Upload image in react does not return form data values

Question

I want to get form data values uploading images.

import React from "react";
import "./styles.css";
import { Upload, Button, Form } from "antd";

export default function App() {
  const normFile = (e) => {
    const fd = new FormData();
    const getFileList = e.fileList.map((i) => {
      return fd.append("upload", i.originFileObj);
    });
    console.log("formadata values", fd);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  return (
    <div className="App">
      <div>
        <Form name="form" className="form">
          <Form.Item
            name="upload"
            className="upload"
            valuePropName="fileList"
            getValueFromEvent={normFile}
          >
            <Upload name="img" listType="picture">
              <Button className="btn">upload images</Button>
            </Upload>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

Trying to access console.log("formadata values", fd); i don't get anything there.
Question: How to get form data using my code?
demo: https://codesandbox.io/s/priceless-flower-82tbe?file=/src/App.js:0-883

Ramin eghbalian · Accepted Answer · 2020-12-15 13:07:43Z

3

to see the values in the FormData you must use loop like below:

for (let value of fd.values()) {
   console.log(value);
}

you can also see the value of a certain data by using the key :

console.log(fd.get('key'));

Also be careful for append multi files by a key (in your code = "upload") in loop, your data will override and just one of them append in the end, for uploading multi files by an input you must use the [] after the name of input like below:

const getFileList = e.fileList.map((i) => {
   return fd.append("upload[]", i.originFileObj);
});

edited Dec 15, 2020 at 13:07

answered Dec 15, 2020 at 12:56

Ramin eghbalian

2,6851 gold badge22 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Upload image in react does not return form data values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related