Skip to content

File validator: "no selected files" case #64

@goodwin64

Description

@goodwin64

ezgif com-video-to-gif

So basically file validation runs with empty files list producing "is not a file" error.

Any piece of advice would be highly appreciated.

Field:

<Field
  component={FieldUploadFile}
  type="file"
  name="attachments"
  label={<FormattedMessage id={messageIds['entity.ticket.field.attachments']} />}
  validate={[file({ allowBlank: true, maxFiles: 10, maxSize: '1 MB' })]}
/>

FieldUploadFile:

export function FieldUploadFileBase(props: IProps) {
  const [attachments, setAttachments] = React.useState<File[]>([]);

  const handleFileDrop = React.useCallback(
    (item: any, monitor: DropTargetMonitor) => {
      if (monitor) {
        const files = monitor.getItem().files;
        setAttachments(attachments.concat(files));
      }
    },
    [attachments],
  );

  const handleFileSelect = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const selectedFiles = Array.from(e.target.files);
      setAttachments(attachments.concat(selectedFiles));
    }
  }, [attachments]);

  const onRemoveFile: AttachmentProps['onRemoveFile'] = (fileToRemove) => {
    setAttachments(attachments.filter((attachment) => attachment !== fileToRemove));
  };

  React.useEffect(() => {
    props.input.onChange(attachments);
  }, [attachments]);

  return (
    <FormControl fullWidth>
      <Box marginBottom={3}>
        <AttachmentTargetBox onDrop={handleFileDrop} handleFileSelect={handleFileSelect} />
      </Box>
      <AttachmentsList files={attachments} onRemoveFile={onRemoveFile} />
      <p>{props.meta.error}</p>
    </FormControl>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions