Validate File Type in ReactJS using Filepond

Question

I have implemented file upload in ReactJS successfully using Yii2 framework and ReactJS. But I will love to validate file type of file before upload. I have come across this and I have tried implementing it as:

<FilePond
    ref={ref => this.pond = ref}
    files={this.state.coverfiles}
    acceptedFileTypes={['images/*']}
    fileValidateTypeDetectType={(source, type) => new Promise((resolve, reject) => {
        
        resolve(type);
     })
    }
    onupdatefiles={(fileItems) => {
          // Set current file objects to this.state
          this.setState({
              coverfiles: fileItems.map(fileItem => fileItem.file)
          });
      }}
    required={true} 
    name={'coverfiles'} 
    //instantUpload={this.state.sumitted}
    allowImageCrop={true}
    allowMultiple={false} 
    processFile={false}
    
    labelIdle={'Drag and Drop your Cover Add Picture or <span class="filepond--label-action"> Browse </span>'}
    
    >
</FilePond>

I need to do this in different cases for images, audio files and video files and I do not know how to resolve the particular file type.

Have you registered the plugin using the `registerPlugin` function? — Rik, Apr 15 '19 at 06:33

jsdeveloper · Answer 1 · 2019-04-13T12:41:24.233

0

According to the documentation, the browser supplies the mime type of the file so all you have to do is allow image/audio and video types like so:

acceptedFileTypes={['image/*', 'audio/*', 'video/*']}

The fileValidateTypeDetectType function is only needed if the browser is making an error in detecting the mime type. In which case you resolve the correct type (or call reject(reason) to cancel.

edited Apr 13 '19 at 12:41

answered Apr 13 '19 at 09:04

jsdeveloper

3,945
1
15
14

that was the very first thing I did. If you look in my code, you will see a line before the fileValidate that is suppose to check whether the accepted file type is image – Nges Brian Apr 13 '19 at 09:57
I wonder if its simply because you've specified images/* instead of image/* ? – jsdeveloper Apr 13 '19 at 12:41
I have chanaged that and it doesnt work still. so that is not the issue – Nges Brian Apr 13 '19 at 16:06
Have you tried logging out `source` and seeing whats what? – jsdeveloper Apr 13 '19 at 18:59

score 0 · Answer 2 · answered Jan 13 '20 at 19:44

I haven’t attempted using the file-type-validation plugin but I do know It’s possible to do general pre-upload validation if you set a server attribute on FilePond and override the process function. Since a File object is exposed as a parameter to that function, you can query the file.type to get the MIME type as a string and reject.

I needed to override this for some other cleanup I needed in order to conform to my API so this just became the natural spot for all my pre-upload validation (file size, name duplication, etc).

What that roughly looks like in practice is:

<FilePond
    allowMultiple
    server={
             {  process: (fieldName, file, metadata, load, error, progress, abort) => {
                    if (file.type.includes('image')) {
                        error(new Error('Invalid file type'));
                    } else {
                        load(file.name);
                    }
                }
             }
           }
/>

Documentation on that is here: https://pqina.nl/filepond/docs/patterns/api/server/#introduction

Also, file.type validation isn’t a perfect method to determine a file’s type since it doesn’t read the byte stream, just parses based on extension. See the advice on MDN about using File.type here: https://developer.mozilla.org/en-US/docs/Web/API/File/type

Hope that helps!

Validate File Type in ReactJS using Filepond

2 Answers2