PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

[FIXED] How do I post an Array of images using formdata reactjs

 October 13, 2022     axios, javascript, multipartform-data, reactjs     No comments   

Issue

I am trying to post an object with multiple images as an array how do append the images as an array to the formdata

const onSubmit = async (e) => {

    
    const formData = new FormData(); 
    formData.append("image", values.images);
    formData.append("title", values.title);
    formData.append("price", values.price);
    formData.append("quantity", values.quantity);
    formData.append("id", id);

    try {
      const res = await axios.post(
        "//localhost:4000/products/saveProduct",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
     /////////////
<form onSubmit={handleSubmit(onSubmit)}>
        <div className="custom-file mb-4">
          <input
            type="file"
            className="custom-file-input"
            name="image"
            multiple
            placeholder="choose file"
            onChange={handleChange}
          />
//////
  const handleChange = (e) => {
    const { type, name } = e.target;
    const getValue = () => {
      if (type === "checkbox") {
        return e.target.checked;
      } else if (type === "select-multiple") {
        return Array.from(e.target.selectedOptions).map(
          (option) => option.value
        );
      } else if (type === "file") {
        for (let i = 0; i < e.target.files.length; i++) {
          e.target.files[i].url = URL.createObjectURL(e.target.files[i]);
        }
        return Array.from(e.target.files);
      }
      return e.target.value;
    };

Also When I send this to my back end I am getting to an empty object as the req.body


Solution

You can append all the images to the same key, for example "images". Then you can parse the request body as multipart formdata on the server, and you get an array of files when you access "images".

for (const image of value.images) {
  formData.append("images", image);
}

Although, if I remember correctly. When you only append one file, it not going to be parsed into an array on the server.

Another solution is to create (with useRef) or get (with querySelector) a reference to the form element. Then you can create the formData directly from the form element.

const formData = new FormData(myFormElement);

Then you can append the rest of the data that you want to send.



Answered By - Szabó Sebestyén
Answer Checked By - David Marino (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing