How can I set the content-type of an Excel file in a form data object using JavaScript and Vue.js?

Question

How can I set the content-type of an Excel file in a form data object using JavaScript and Vue.js?

My method for creating a FormData object

function generateFormData(file, payload) {
  let formData = new window.FormData()
  formData.append('Excel', file)
  formData.append('SomeOtherKey', JSON.stringify(payload))
  return formData
}

My approach for transmitting data to the server

function transmitDataToServer(payload) {
  axios.post('/some-url', payload)
}

Although in the request body it is currently set as application/octet-stream, I require it to be

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Snapshot of the request payload

https://i.sstatic.net/JQSVf.png

How can I accurately specify the Content-Type for the file?

javascript ajax file multipartform-data content-type

Answer 1

Answer №1

From what I understand, it seems that setting the content type on the formData object is not possible. One alternative could be to specify the content-type in the axios request instead of the formData object. This can be achieved by including a third parameter in the axios.post() function, known as the config parameter. Here is an example:

const desiredContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

function sendPayloadToServer (data) {
  const config = {
         headers: { 
              "content-type": desiredContentType
         }
  }
  axios.post('/some-url', data, config);
}

Answer 2

From what I understand, it seems that setting the content type on the formData object is not possible. One alternative could be to specify the content-type in the axios request instead of the formData object. This can be achieved by including a third parameter in the axios.post() function, known as the config parameter. Here is an example:

const desiredContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

function sendPayloadToServer (data) {
  const config = {
         headers: { 
              "content-type": desiredContentType
         }
  }
  axios.post('/some-url', data, config);
}

How can I set the content-type of an Excel file in a form data object using JavaScript and Vue.js?

Answer №1

Similar questions

The JQuery duplication process did not function as anticipated

Update the variables upon a click event following the completion of an AJAX request

Displaying the product quantity counter in the shopping cart immediately after adding the item

The value of this.$refs.<refField> in Vue.js with TypeScript is not defined

Creating protected routes in ReactJs using Typescript by utilizing a Higher Order Component (HOC) as

I attempted to shift my focus back to the input box, but for some reason, it doesn't want to cooperate

Partial data sent through Ajax to PHP file

Form submissions are not saving checkbox answers

What is the best way to display changing session variables in PHP?

The reason why React.js does not automatically bind its functions to the "this" object

Yii, utilizing Fancybox to display ajax-loaded content

Incorporating items into a dynamic array using MobX

Save user input data into an Excel file using PHPExcel

What is the level of visibility in Nextjs?

Following the ajax request, the subsequent code was unable to be executed as it awaited the JSON response

Guide on submitting a form using a custom AJAX function based on the id or class parameter

"Improve your Angular ngrx workflow by utilizing the sandbox pattern to steer clear of

Guide on utilizing AngularJS Filter service without HTML for Chrome extension development

Send an email with an attachment while remaining on the current page

Is it possible to incorporate a php file within .htaccess?