S
S
Sergey Filnor2018-05-07 17:43:12
JavaScript
Sergey Filnor, 2018-05-07 17:43:12

How to send a file through a React application and process it correctly in an API written in laravel?

Good afternoon.
Actually the question is already described in the title. Faced with the problem that we can not transfer the file from react to our API. We catch either a 422 error, or a 401 ...
In the react component, we collect data from the form - we pass it to the action and there we collect it as a FormData object.

let ProductFormData = new FormData();
      for( let item in data){
        ProductFormData.set( item, data[item]);
      }

      axios.post(
        `${baseUrl}/api/products`,
        {
          ProductFormData
        },
        {
          headers: {
            'Accept': 'application/json',
            'Content-type': 'multipart/form-data',
            'Authorization': `Bearer ${token}`,
          },
          contentType:false,
      	  cache: false,
      	  processData:false,
        }
      )

And after that, on the back, the object simply does not pass validation - it writes that it is empty, although all fields leave the client. I easily get them through formData.entries () by going through the iterator and all the fields, including files, are present there.
At the same time, in the console, in the network tab, the request is also empty:
5af065c629eb1295817550.png
What am I doing wrong? Is there any specifics, how should it be processed correctly in the front so that it is sent correctly?
Or do you just need to correctly read the request on the backend?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question