Restrict multiple file number

[Akshara89]

Hi,

Can we restrict the number of images upload. Like I want user to upload only 3 images.

Also I upload 3 images. I want to show the image in String like

Image1.png, Image2.png, Image3.png

Thanks in advance

[sprmn]

I don't think you can add a restriction to the number of files for an html input element. What you can do is only use the first 3 images and provide a warning if a user has selected more. A possible way to implement this is by overwriting the onChange handler, as shown in https://github.com/fris-fruitig/react-firebase-file-uploader/issues/4#issuecomment-277352083.

Your handleChangeImage function would then look like this:

  handleChangeImage = (e) => {
    if (e.target) {
      // show warning to a user
      alert('You can only select up to 3 files')
      return;
    }
    for (let i = 0; i < e.target.files.length; i++) {
      // do something with the images
    }

Another solution would be to create 3 separate inputs with no option for selecting multiple files.

Regarding your final question, the File object of each selected file is provided in the onUploadStart callback. You can retrieve the filename in there using file.name.