Adding the Authorization header in an Ajax request within ExtJS can be easily done by including the

Question

Adding the Authorization header in an Ajax request within ExtJS can be easily done by including the

I've been struggling to upload a file using ExtJS and web API. The issue I'm facing is that when trying to send an authorization header to the server, it always returns as null. I even attempted to include the header in the XHR request within the beforerequest function, but still had no luck.

Below is the code snippet:

Ext.Ajax.request({
            url: 'url',
            method: 'Post',
            headers : {'Authorization':'Bearer '+access_token},
            form: form,
            isUpload: true,
            params: {id: id},

After some research, I found out that sending a header in form submit might not be possible. Are there any alternative methods I can explore to achieve my goal?

javascript ajax extjs asp.net-web-api2

Answer 1

Answer №1

Here's a way to upload files using the FormData object and XMLHttpRequest:

 var xhr = new XMLHttpRequest();

 xhr.open('POST', url, true);

 var formData = new FormData();

 for (var i= 0; i< files.length; i++) {
      var file = files[i];
      formData.append(file.name, file);
 }

 xhr.onreadystatechange = function(eOpts) {
      if (xhr.readyState !== 4 || me.isDestroyed) {
            return;
      }
      ......
 };

 xhr.send(formData);

Learn more about FormData

Answer 2

Here's a way to upload files using the FormData object and XMLHttpRequest:

 var xhr = new XMLHttpRequest();

 xhr.open('POST', url, true);

 var formData = new FormData();

 for (var i= 0; i< files.length; i++) {
      var file = files[i];
      formData.append(file.name, file);
 }

 xhr.onreadystatechange = function(eOpts) {
      if (xhr.readyState !== 4 || me.isDestroyed) {
            return;
      }
      ......
 };

 xhr.send(formData);

Learn more about FormData

Answer 3

Answer №2

It's fascinating, however, I was unable to locate a solution using ExtJS.

Check out this example demonstrating how you can include headers in a POST request with a file shared by Gabriele Romanato:

// Locate the input file within the HTML document
const fileInput = document.getElementById("file-input");

// Create an instance of XMLHttpRequest
const xhr = new XMLHttpRequest();

// Set up the callback function to handle the server response
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // The file has been successfully uploaded
    console.log("File successfully uploaded!");
  }
};

// Open a connection to the server
xhr.open("POST", "/upload-file", true);

// Set the "Content-Type" header to "multipart/form-data"
xhr.setRequestHeader("Content-Type", "multipart/form-data");

// Create a FormData object and add the selected file
const formData = new FormData();
formData.append("file", fileInput.files[0]);

// Send the request to the server using the send() method
xhr.send(formData);

Answer 4

It's fascinating, however, I was unable to locate a solution using ExtJS.

Check out this example demonstrating how you can include headers in a POST request with a file shared by Gabriele Romanato:

// Locate the input file within the HTML document
const fileInput = document.getElementById("file-input");

// Create an instance of XMLHttpRequest
const xhr = new XMLHttpRequest();

// Set up the callback function to handle the server response
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // The file has been successfully uploaded
    console.log("File successfully uploaded!");
  }
};

// Open a connection to the server
xhr.open("POST", "/upload-file", true);

// Set the "Content-Type" header to "multipart/form-data"
xhr.setRequestHeader("Content-Type", "multipart/form-data");

// Create a FormData object and add the selected file
const formData = new FormData();
formData.append("file", fileInput.files[0]);

// Send the request to the server using the send() method
xhr.send(formData);

Adding the Authorization header in an Ajax request within ExtJS can be easily done by including the

Answer №1

Answer №2

Similar questions

After the ajax request is made in React JS, the column vanishes from the screen

Explain to me the process of passing functions in TypeScript

In Firefox, using the new Date function within a string does not function as expected

Develop an interactive single-page scrolling system for seamless navigation between points

Using Jquery Datatables to populate with an asp.net webmethod through ajax calls

Is it more efficient to have a single global event listener or multiple event listeners of the same type in each component for productivity?

Increasing the selected date range by adding days manually in PHP - a comprehensive guide

Fetching data in a post request seems to be causing an issue with FormData image being

Troubleshooting date range validation in jQuery

What are some effective ways to manage MySQL queries using asynchronous functions in JavaScript?

Mongooses do not clutter the array with unnecessary lines

Periodically transmit information to a Google Script web application

Setting the initial state for your ngrx store application is a crucial step in ensuring the

Error in Angular 2: The app.component.html file triggered an exception at line 1, character 108 due to excessive recursion

Modify the color scheme of an HTML webpage

"Utilizing Dynamic Dropdown Options Pulled from Database and Automatically Refreshing List upon

What is the best way to position my Jchartfx area graph below my gridview?

React Native - Listview triggering multiple refreshes when pulled down

Unexpected error arises in Typescript despite code functioning properly

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?