Filetype validation

[Lehj14]

Hi. Would you be able to add filetype validation? So it shows error when the filetype selected is not on the accept criteria?

[MrKampla]

Hi @Lehj14
You can do that yourself by creating a validator and passing it down as a prop to the useFilePicker prop:

class FileTypeValidator implements Validator {
  validateBeforeParsing(_config: UseFilePickerConfig, plainFiles: File[]): Promise<void> {
    for (const file of plainFiles) {
      // you can check the file either by MIME type or the extension, which can be extracted from file.name
      if (file.type !== 'text/plain') {
        // You can reject a promise with any object you want, it's going to be passed to errors prop 
        return Promise.reject({
          fileTypeError: 'Only plain text files are allowed',
        });
      }
    }
    return Promise.resolve();
  }
  validateAfterParsing(
    config: UseFilePickerConfig,
    file: FileWithPath,
    reader: FileReader
  ): Promise<void> {
    return Promise.resolve();
  }
}

function App() {
  const [open, { plainFiles, errors }] = useFilePicker({
    // don't forget to pass this new validator to the useFilePicker hook
    validators: [new FileTypeValidator()],
  });
  return (
    <div className="App">
      <div className="card">
        <button onClick={() => open()}>open picker</button>
      </div>
      {plainFiles.map((file) => (
        <div>{file.name}</div>
      ))}
      {errors.map((err) => (
        <div>{JSON.stringify(err, null, 2)}</div>
      ))}
    </div>
  );
}

Is that what you need?

[Lehj14]

hi @MrKampla , can i do this on plain react? or it this a typescript?

[Jaaneek]

You can do it on plain reactjs. Just make sure to remove types from the validator.

Besides that we advice to use typescript as it's industry standard

[MrKampla]

@Lehj14 Sure, you can just create a plain object that has validateBeforeParsing and validateAfterParsing functions.

const fileTypeValidator = {
  validateBeforeParsing(_config, plainFiles) {
    // code
  },
  validateAfterParsing(config, file, reader) { 
    // code
  }
 };

Then in the hook:

  const [open, { plainFiles, errors }] = useFilePicker({
    validators: [fileTypeValidator],
  });

As @Jaaneek said, we strongly encourage using typescript and that's why we show every example using TS.

[MrKampla]

The question has been answered, I'm closing this issue.

[filipkowal]

It would be more in line with HTML <input type="file" /> to reject files that's type is not listed in the accept prop.
It's also not trivial to create a validator that checks the types based on a dynamic accept array.

A feature of default fileType validation that's based on the accept prop would be very helpful.

[MrKampla]

In the latest release, v2.1.1 we've added FileTypeValidator that serves a similar purpose to the one described in this thread. You can check how to use it here: #76