0

I am working on an application in which I have to upload multiple images. I am using redux-saga and Nexjs. Right now it is uploading a single image but selecting multiple images.

My Code:

const inputFile = React.useRef(null);

const onChangeFile = event => {
event.stopPropagation();
event.preventDefault();
var image = event.target.files[0];
if (image) {
  var temp = URL.createObjectURL(image);
  onImageSelect && onImageSelect(temp);
  set_disabled(true);
  dispatch(
    post.uploadImage({
      fileObject: image,
      callback: source_url => {
        imageHandler(source_url);
        set_disabled(false);
        event.target.value = null;
        onImageUploaded && onImageUploaded();
      },
    })
  );
}
};

and JSX:

<>
  <input
    accept='image/*'
    type='file'
    ref={inputFile}
    style={{ display: 'none' }}
    onChange={onChangeFile}
    multiple
  />

  <Box clone color='#666'>
    <IconButton
      size='small'
      onClick={() => {
        inputFile.current.click();
      }}
    >
      <WallpaperOutlinedIcon />
    </IconButton>
  </Box>
</>

Which changes do I need to add to upload multiple images I ama bit confuse. Thanks

Rashed Rahat
  • 2,357
  • 2
  • 18
  • 38
Zeeshan Shaheen
  • 53
  • 6

2 Answers2

0

Get all the files from the array and try to upload each of them:

var images = event.target.files; // Will contain all the images
for(const image of images) {
  // image is single image object
  // do whatever you want
}
Mehmet Ali
  • 313
  • 3
  • 15
0

I do not have the rep to reply to your comment directly, but in regard to the other answer here, use Promise.all() instead of a for loop.

travish
  • 1