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

Using setTimeout in Node.js

Troubleshooting issue with C# Ajax success response not triggering alert

Displaying content on a webpage using PHP, AJAX, and HTML

The JQuery parseFloat() function seems to be consistently returning "NAN" whenever it is used with the .text property

Avoiding an event from spreading in Angular

Transforming form inputs into JSON structure

Currently I am developing a Minimax Algorithm implementation for my reversi game using react.js, however I am encountering a RangeError

Anime.js: Grid layout causing issues with displaying simple text animations

React.js: Why does the array index change after dropping an element?

Trigger a click event in jQuery to activate a form through a hyperlink

Tips for adjusting image and div sizes dynamically according to the window size

Retrieve the value of a property in a JavaScript object by specifying a dynamic key for the property

Inconsistent rendering issue identified in AngularJS when updating arrays with ui-router

Strategies for creating a dynamic progress bar using jQuery and JavaScript

Issue with Ajax Form Handling

Utilize Reactjs to efficiently showcase a collection of arrays within an object

jQuery Ajax form submission encountering issues

Encountering a 304 status error in the HTTP GET response after deploying a React app on Netlify

What Causes My Issue with $(document).ready()?

method that provides route-specific variable outputs