How to add multiple files uisng reactjs

Question

Here i'm trying to add multiple files to upload, but it is replacing in to new one and the response value is also showing empty. i dont understand what i'm doing wrong here thanks in advance

const [question, setQuestion] = React.useState('');
const [fileImage, setFileImage] = React.useState([]);

const handleChange = (event) => {
 setQuestion(event.target.value);
}

const handleSelectChange = (event) => {
 setFileImage(event.target.files);
}

addQuizDetails() {
  const Questions = question;
  const fileImages = fileImage;
  const headers = {
    "Content-Type": "multipart/form-data"
  }
  var formData = new FormData();
    formData.append("image", fileImages);
    formData.append("question",question )
    axios
    .post("http://localhost:4000/api/quiz/addQuiz",formData,headers)
    .then(response => {
      if (response.data.message) {
        alert(response.data.message)
      }
      else {
        alert("failed")
      }
  })
 }
}


 <TextField className={classes.content} onChange={handleChange} label="Question" variant="outlined" />
          <input 
            type="file" 
            onChange={handleSelectChange}
            multiple />
          <div className={classes.button}>
            <Button className={classes.submit} variant="contained" onClick={addQuizDetails}>Submit</Button>           
          </div>

Rashed Rahat · Accepted Answer · 2021-08-02 18:12:01Z

1

Try below code by using spread operator for array:

const handleSelectChange = (event) => {
    const selectedFiles = event.target.files
    setFileImage([...fileImage, ...selectedFiles]);
}

answered Aug 2, 2021 at 18:12

Rashed Rahat

2,5152 gold badges25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add multiple files uisng reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related