1

I am trying to send a file to the backend using React but the file always returns undefined when I try to request it from the server, I cannot resolve the issue here is the code :

const [logo, setLogo] = useState();

const handleSubmit = async (e) => {
    e.preventDefault();
    
const formData = new FormData();
formData.append('logo', logo);

 for (var [key, value] of formData.entries()) {
     console.log(key, value);
 }
    try {
        const { data } = await axios.post(
            "/partners",
            {
                formData,
            },
           

        );
        console.log(data)

    } catch (err) {
        console.log(err);
    }
};
<form onSubmit={handleSubmit} method="POST" encType="multipart/form-data">
  <input type="file" name="logo" label="logo" accept=".png" onChange={e => {
     setLogo(e.target.files[0])
  }}/>
</form>

when I change the file and console.log it returns the file but the logo state is empty and axios always send it as an empty object, why is that?

Nick Vu
  • 14,512
  • 4
  • 21
  • 31
Razor Jhon
  • 115
  • 1
  • 12
  • 1
    You might not need the brackets around setLogo. I think it's expecting a return and not getting it. – Joe Fitzsimmons May 09 '22 at 00:10
  • the onChange returns a value when i try to console.log using useEffect but when i set it inside axios it return nothing – Razor Jhon May 09 '22 at 00:15
  • You want `axios.post("/partners", formData)`. **Voting to close as a typo**. See also [this answer](https://stackoverflow.com/a/68643919/283366) – Phil May 09 '22 at 00:17
  • FYI there's nothing wrong with your `onChange` and you definitely do not need to pass anything else to `handleSubmit` – Phil May 09 '22 at 00:21
  • i tried formData still not working , it still returns empty object in the backend , i tried also to set the file[0].name but it gives me and error that the name is undefined – Razor Jhon May 09 '22 at 00:34
  • @Phil i removed it because its not working , i tried to add the formData again still returns empty object – Razor Jhon May 09 '22 at 00:36
  • 1
    No, not `axios.post("/partners", { formData })`. Why did you wrap it in braces? Do you know that is [shorthand](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015) for `{ formData: formData }`? – Phil May 09 '22 at 00:38
  • 1
    its working now , thank you so much , i am so sorry i didn't notice the wraping braces ,didn't know that is an issue , you really saved my day ♥ – Razor Jhon May 09 '22 at 00:46
  • You'll have to use multer in Backend to get the request data and also please check if your post request has multipart-formdata headers – callmeizaz May 09 '22 at 02:28
  • @callmeizaz this isn't tagged with [tag:express] or even [tag:node.js]. OP also says it works now with the proper client-side syntax. And FYI, you should not manually set content-type headers when working with `FormData` in the browser; Axios will ignore them anyway if you do – Phil May 09 '22 at 02:30

0 Answers0