Fiel Upload

UI Components for React
Post Reply
lineargruppo
Posts: 2
Joined: 22 Mar 2021, 13:37

05 May 2021, 15:03

How to add custom header (like Authentication) on upload request?
Thanks.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

07 May 2021, 01:44

Hi,

You can use onBeforeSend callback for it.

Code: Select all

const onBeforeSend = (xhr, formData) => {
   xhr.setRequestHeader('Authorization', ...);
   ...
}
Or

customUpload and uploadHandler(files) to write the custom upload methods

Best Regards,

web.dev@spectec.ae
Posts: 3
Joined: 02 Sep 2019, 15:02

11 Jul 2021, 14:56

Hi,

I tried inside onBeforeSend callback

Code: Select all

const onBeforeUpload = (xhr, formData) => {
		let token = '********_token_************';
		xhr.setRequestHeader('Authorization', 'Bearer ' + token);
	}
but got error

Code: Select all

	Uncaught TypeError: xhr.setRequestHeader is not a function

I'm using PrimeReact version 6.4.1

web.dev@spectec.ae
Posts: 3
Joined: 02 Sep 2019, 15:02

11 Jul 2021, 15:33

Hi,

also, when I debug, I saw that xhr object has xhr & formData object inside. When I changed function to

Code: Select all

	const onBeforeUpload = (e) => {
		let token = '********************_token_*****************';
		e.xhr.setRequestHeader('Authorization', 'Bearer ' + token);
	}
I got

Code: Select all

	Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
best regards

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 Jul 2021, 11:49

Hi,

Please try;

Code: Select all

const onBeforeSend = (e) => {
		let token = '********************_token_*****************';
		e.xhr.setRequestHeader('Authorization', 'Bearer ' + token);
}

<FileUpload onBeforeSend={onBeforeSend} .../>
Exp; https://codesandbox.io/s/happy-night-77 ... oadDemo.js

Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests