Multiple validations in FineUploader

Question

I'm using FineUploader in my React app to upload files to Azure Blob Storage. I'm currently using validation to make sure a user can only upload one file. I now want to add two more validations:

1. I want to allow only JPG and PNG files
2. I also want to make sure that the pixel size of the file user can upload must be at least 300x300 pixels. In other words, I want to impose both width and height requirements

How do I add these validations? Do I need a validation property inside options for each requirement or do they go into the existing one? My current validation looks like this:

// Omitted for brevity
constructor(props) {

   super(props);
   this.uploader = new FineUploaderAzure({
            options: {
                cors: {
                    expected: true,
                    sendCredentials: false
                },
                signature: {
                    endpoint: "some-url.com"
                },
                request: {
                    endpoint: "my-container-url"
                },
                validation: {
                    multiple: false
                }
            },
            callbacks: {
                onError: function (id, name, errorReason, xhrOrXdr) {

                }
            }
        })
}

Answer 1

Assume react/fine-uploader don't change it, by Documentation, you should do it like this.

options: {
  multiple: false,
  cors: {
    expected: true,
    sendCredentials: false
  },
  signature: {
    endpoint: "some-url.com"
  },
  request: {
    endpoint: "my-container-url"
  },
  validation: {
    allowedExtensions: ['jpeg', 'jpg', 'png'],
    image:{
      minHeight: 300,
      minWidth: 300
    }
  }
}

PS. I didn't use fineuploader in react, so please see if this is working as well in react.

---

Answer to update

In case you want to have your own validation, first of all you should not use onError. onError is invoked if and only if error occurs. You validate the image size, though the image doesn't match your criteria, it is NOT error.

Then you have two choice to do your validation, that depends on what effect you want. First you need to know the flow of events. It is:

onSubmit -> validation -> onValidate

The work (check is image or not) you most likely want can be done on both three places.

If you want it in the validation, then the answer I provided already made it (allowedExtensions: ['jpeg', 'jpg', 'png']). But let's say you want to make some customization of alert or other checking, you need to do it in onValidate.

callbacks:{
  onValidate: function(data, button_container) {
    console.log(data); //data.name && data.size
    return false;
  }
}

But please be reminded that in onValidate, you can only get back file name and file size, no other information.

If you want to also check the width & height, you probably need to take a look on this SO question (give OP a upvote if you find this is what you want.)