How to validation input type="file"

[NantipatSoftEn]

I read this document https://react-hook-form.com/get-started#Applyvalidation not see example validate file upload

For example file name , max file size, type file

don't have this feature ? or something I missed 😷😷

[bluebill1049]

U will have to use validate function to measure the size of ur file, for required field required still works.

[NantipatSoftEn]

OK , Thank

[surajpheudin]

Hey can you comment the code of validating size of file?

[SalahAdDin]

It is not hard actually, you will require to get the file and not only its path and validate it with a custom schema.

[tuyenphk]

How can I add the validation for image size, image type, and display alert message if it is not suitable?
My code is here

const Upload = () => {
  let [file, setFile] = useState(null);
  /**
   * Create a new state variable to hold the name of the
   * file. This is needed since the browser does not retain
   * the filename by default when uploading. 
   */
  let [filename, setFilename] = useState('');

  const filterBySize = (file) => {
    //filter out files larger than 5MB
    return file.size < 5242880;
  };

  const fileChangedHandler = event => {
    let file = event.target.files[0];
    let reader = new FileReader();
    /**Capture filename */
    setFilename(file.name);
    console.log(file);
    reader.onload = function(e) {

      setFile(e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);

    if (file != ".png" || file !=".jpg" ) {
      window.alert("File does not support. You must use .png or .jpg ");
      return false;
   }
   if (file.size > e6) {
     window.alert("Please upload a file smaller than 1 MB");
     return false;
   }
   
  };
return(
  <input className="btn btn-secondary" 
                  id="fileInput" 
                  type="file" 
                  accept="image/*"
                  // inputProps={{ accept: 'image/*' }}
                  // fileFilter={filterBySize}
                  onChange={fileChangedHandler} 
                />
                

[ognitio-technologies]

Try this code, this will work, InputField is material ui component you can use input instead of it

const {
register,
handleSubmit,
formState: { errors },
} = useForm();

const submitHandler = (data) => {
console.log(data)
};

files[0]?.size < 1000000 || "Max 1MB Allowed", acceptedFormats: (files) => ["image/jpeg", "image/jpg"].includes(files[0]?.type) || "Only (JPG, JPEG) are allowed", }, }), }} error={errors.image && true} helperText={errors.image && errors.image.message} /> submit

[Dathin]

If you are wondering how to do this using just react hook form you can use the validate function.

You can find more examples at the docs.

Here is my implementation of this validation:

          {...register('image', {
            validate: {
              lessThan10MB: files => files[0]?.size < 10000000 || 'Max 10MB',
              acceptedFormats: files =>
                ['image/jpeg', 'image/png', 'image/gif'].includes(
                  files[0]?.type
                ) || 'Only PNG, JPEG e GIF',
            },
          })}

And if you are wondering whats inside files this is the answer so you can do name validation and stuff

[Boye-dev]

It doesnt work

[Ali-Aref]

can't access the files[0].type or files[0].size, however I can access the file as file without array, and file.type and file.size returns undefined

[saharbca]

can't access the files[0].type or files[0].size, however I can access the file as file without array, and file.type and file.size returns undefined

Did get a solution for that ?

[vqtruong0910]

you should use setValue("image", {e.target.files[0]}) in onChange event of input tag before using above code

[rootsher]

#127 (comment)

[SalahAdDin]

There is a problem with this approach: You need to use a custom handle function to process from the file path to a file object itself, but doing that you will need to leave the input value out to avoid this problem.

But by avoiding passing the value to the controlled input, we can not reset it using the reset function.

That's a big problem when we have a static form, for instance.

[muzudre]

This worked for me:

ref={register({
    required: 'File is required',
    validate: (value) => {
        const acceptedFormats = ['pdf']; // Add more file formats if needed
        const fileExtension = value[0]?.name.split('.').pop().toLowerCase();
        if (!acceptedFormats.includes(fileExtension)) {
            return 'Invalid file format. Only PDF files are allowed.';
        }
        return true;
    }
})}