How can I properly send images (and text) from React to Django API using fetch?

Question

My django API views is setup as follows;

class AddProductToStorageAPIView(APIView):
    parser_classes = [MultiPartParser, FormParser]

    def post(self, request, format=None):
        print(request.data) #I want to know what data is coming in for now
        return Response({"details": "all done successfully"}, status=200)

When I make a POST request from postman (with formdata), the data request.data returns:

]}>

However, when I try to make a POST request from the react side. Things got so messed up. First here is my code in react side:

const handleSubmit = (e) =>{
        e.preventDefault();
        var headers = new Headers();
        headers.append("Content-Type", "multipart/form-data");
        headers.append("X-CSRFToken", csrftoken)

        var formdata = new FormData();
        formdata.append("title", state.title);
        formdata.append("description", state.description);
        formdata.append("price", state.price);
        formdata.append("category", state.category);
        for (var i = fileinput.current.files.length - 1; i >= 0; i--) {
            formdata.append("Images", fileinput.current.files[0], 
            fileinput.current.files[0].name);
        }//because the file input has 'multiple'='true' (i.e multiple files can be added)
        
        var requestOptions = {
          method: 'POST',
          headers: headers,
          body: formdata,
          redirect: 'follow'
        };

        fetch("http://127.0.0.1:8000/api/v1/plus/product/", requestOptions)
          .then(response => response.text())
          .then(result => console.log(result))
          .catch(error => console.log('error', error));
    }

On submit however, I get 400 bad request error saying multipart form parse error - invalid boundary in multipart:None and I don't have a clue what that means.

Then, I changed headers.append("Content-Type", "multipart/form-data"); above to headers.append("Content-Type", "multipart/form-data;; boundary=--------------------------426310166704307097870742") which is something I copied from postman (I don't know what I did here too). So when I submit again, the no boundary error disappears but I get this freaking numbers and symbols on my terminal and I have no idea what it means. It looks like this;

Somebody please help me. All I want to do is to send images (could be more than one) and some texts from the react frontend to my Django API.

How can I properly send images (and text) from React to Django API using fetch?

0 Answers