AXIOS post method with image returning 500 (Internal Server Error)

Question

I'm trying to POST images in my React.js project. On submit returns 500 (Internal Server Error). Backed is worked correctly, in Postman when testing everything is worked perfectly. So, I spoke with my backend colleague and he also said that it is problem somewhere in my code.

import React, { useState } from "react";
import apiRequest from "helpers/apiRequest";
import styled from "styled-components";
import { BiImageAdd } from "react-icons/bi";

const ImageAdder = () => {
  const [image, setImage] = useState({});
  const token =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Mywicm9sZSI6ImFkbWluIiwiZW1haWwiOiJhZG1pbkBnbWFpbC5jb20iLCJpYXQiOjE2NDAzNjQ4MzgsImV4cCI6MTY0MTIyODgzOH0.WkpuP3aJi9bk85aSz0CxmeN_--WHBGZqEYTy6rVsO0s";
  const onFileChange = (e) => {
    setImage(e.target.value[0]);
  };

  const onFileUpload = () => {
    const formdata = new FormData();
    formdata.append("uploaded file ", image);
    console.log("image : ", image);
    getImage(formdata);
  };
  const getImage = async (formdata) => {
    try {
      await apiRequest({
        method: "post",
        url: `spisak-srebrenica/upload`,
        headers: {
          Authorization: `Bearer ${token}`,
        },
        body: { formdata },
      });
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <Container>
      <h1>0 slika odabrano</h1>
      <div className="buttons">
        <Button>Obriši odabrano</Button>
        <Button light="light">Poništi</Button>
      </div>
      <div className="dropzone">
        <label>Dodaj nove slike</label>
        <div className="cont">
          <div className="wrapper">
            <input type="file" onChange={onFileChange} />
            <div className="items">
              <BiImageAdd size={50} opacity={0.5} />
              <p>
                Dodaj slike <span>ili prevuci ovdje</span>
              </p>
              <span className="format">PNG,JPG,GIF do 10MB</span>
            </div>
          </div>
          <Button onClick={onFileUpload}>Dodaj</Button>
        </div>
      </div>
      <div></div>
    </Container>
  );
};

export default ImageAdder;

Try this : https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data — Reza Ghorbani, Dec 27 '21 at 09:20
Post the error message of the 500. If there is no message, go into the application logs. Try to avoid provide credentials. Anybody can decode the content and read or use it (until its valid). — rickroyce, Jan 04 '22 at 13:05

score 0 · Answer 1 · answered Dec 27 '21 at 09:29

0

In order to get the file, you have access the files attribute of the event target. So i think onFileChange should probably be like this:

 const onFileChange = (e) => {
    setImage(e.target.files[0]);
  };

answered Dec 27 '21 at 09:29

arvir

101
1
10

It's like that. Check code upper. – bajrax Dec 27 '21 at 09:31
@bajrax the code snippet posted above shows ```setImage(e.target.value[0]);``` inside onFileChange – arvir Dec 27 '21 at 09:34
@bajrax Sorry, but I rectified that instantly, but idk why it isn't reflected for you. Anyways, it should be ```setImage(e.target.files[0])``` if that isn't what is being shown in the answer – arvir Dec 27 '21 at 09:40
Oh yes, sorry. I changed, but I got the same error. But thank you :D – bajrax Dec 27 '21 at 09:43

AXIOS post method with image returning 500 (Internal Server Error)

1 Answers1