formData.append is null value in reactjs in uploading file

Question

hi i got a problem when i try to upload an image, the FormData() is return null value inside it, even i already append it

code of uploadhandler

  const uploadFileHandler = async (e) => {
const file = e.target.files[0];
const formData = new FormData();
// formData.append("username", "Chris");
formData.append("image", file);

console.log(file);
console.log(formData);
setUploading(true);

try {
  const config = {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };

  const { data } = await axios.post(
    "/api/v1/uploads/primary",
    formData,
    config
  );
  setImage(data);
  setUploading(false);
} catch (error) {
  console.error(error);
  setUploading(false);
}};

The file Variable is shown its data but still formData is null and this is the code of form, the user Interface im using React CoreUi Admin and this is the code

                <CFormGroup>
              <CLabel
                htmlFor="images"
                style={{ fontWeight: "bold", fontSize: 15 }}
              >
                Featured Image
              </CLabel>
              <CInput
                style={{ height: "calc(2em + 0.75rem + 2px)" }}
                accept="*"
                type="file"
                id="images"
                placeholder="Choose Featured Images"
                value={image}
                onChange={uploadFileHandler}
              />
              {uploading && (
                <div className="spinner-border text-primary" role="status">
                  <span className="sr-only">Loading...</span>
                </div>
              )}
            </CFormGroup>

i have try many method but its still the same, i read a formData.append() documentation still not working. idk where the wrong is

Sobhan Jahanmard · Accepted Answer · 2021-11-07 11:27:11Z

1

replace this part, with the following:

const file = e.target.files[0];
const formData = new FormData();
// formData.append("username", "Chris");
formData.append("image", file);

 const formData = new FormData();
 const reader = new FileReader();

 if (e.target.files[0]) {
      reader.readAsDataURL(e.target.files[0]);
    }
 reader.onload = (readerEvent) => {
 formData.append("image", readerEvent.target.result);
};

you call a FileReader to read your file. It reads it as data url, then whenever it is ready it's going to append whatever it has read to your formData

answered Nov 7, 2021 at 11:27

Sobhan Jahanmard

9007 silver badges18 bronze badges

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

3 Comments

Maszgalang Over a year ago

idk why its return null object this is the code that you suggest prnt.sc/1ymti3z, and this is the result of formData prnt.sc/1ymtron

Sobhan Jahanmard Over a year ago

could you provide code sandbox for this particular part of the code?

Nurul Huda Over a year ago

The first one is correct. No need to change that part.

Nurul Huda · Accepted Answer · 2021-11-08 09:34:23Z

1

Your FormData is not null.

If you want to know what the content of your FormData then you can call formData.get(key)

const payload = new FormData()
payload.append('foo', 'bar')

// this will not show your value
console.log(payload) 

// this will show your value
console.log(payload.get('foo'))

answered Nov 8, 2021 at 9:34

Nurul Huda

1,60017 silver badges15 bronze badges

Collectives™ on Stack Overflow

formData.append is null value in reactjs in uploading file

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related