Question 281586 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can't see full breakdown of multipart/form-data response in Chrome

This question all stemmed from trying to understand why I am not able to get the proper file MimeType in rails. Each file I’ve sent, csv, pdf, etc… returns type application/octet-stream.

So, I was checking to see that my Content Type was set for each file being uploaded. However, when inspecting my Chrome developer, all I see for the content type is:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryVeLZZi3BHlOBVxuv

This seems like a truncated version of what I was expecting to see, for example from w3:

   Content-Type: multipart/form-data; boundary=AaB03x

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Larry
   --AaB03x
   Content-Disposition: form-data; name="files"
   Content-Type: multipart/mixed; boundary=BbC04y

   --BbC04y
   Content-Disposition: file; filename="file1.txt"
   Content-Type: text/plain

   ... contents of file1.txt ...
   --BbC04y
   Content-Disposition: file; filename="file2.gif"
   Content-Type: image/gif
   Content-Transfer-Encoding: binary

   ...contents of file2.gif...
   --BbC04y--
   --AaB03x--

Some pseudocode for the way I am sending the form data:

const formData = new FormData()
files.map(file => formData.append('file', file)

axios.post('https://example.com', formData)

I can see the binary file values being sent in the payload, so I’m just trying to get a better understanding of what’s happening, and ultimately why I am unable to get the proper Mime types for the files being sent.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I must have been on a 1 track mind yesterday, but I finally found it. It's in the payload. 🤦 Leaving this message here in case anyone else was as confused as I was.

    enter image description here


  2. 0

    1. Check Response Type: Ensure that you are expecting a binary response from your server. If you are using responseType: ‘blob’ in your AJAX request, make sure the server is actually responding with a binary blob.

    2. Proper Handling of Response: Make sure you are handling the response correctly in your JavaScript code. You should access the response as a Blob and then use the arrayBuffer method on it. Here’s an example of how to do it:

    const formData = new FormData();
files.map(file => formData.append('file', file));

$.ajax({
    url: 'https://example.co',
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        // Do something
    },
    error: function(error) {
        // Handle errors
    }
});

    1. Content-Type Header: Ensure that the server sets the correct Content-Type header for the response. If you’re expecting a binary response, it should be something like ‘application/octet-stream’ or another appropriate binary type.

    2. Check Your Backend: Make sure that your server-side code is properly handling the POST request and responding with the expected data. It’s important that the server is correctly formatting and sending the response.

    3. Check for CORS Issues: If your server is on a different domain, you might run into Cross-Origin Resource Sharing (CORS) issues. Ensure that your server is configured to handle CORS properly, and your client code is not blocked by the browser’s same-origin policy.

    4. Update jQuery: Sometimes, issues like this are resolved in newer versions of jQuery. Make sure you are using an up-to-date version of jQuery.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search