CORS: onErrorItem is being called after the OPTIONS request instead of doing the actual upload #1016

New Issue

2018-05-01T11:21:38Z

PLPeeters commented

2018-05-01 11:21:38 +00:00

(Migrated from github.com)

I've been trying to get this to work, but for some reason it's calling onErrorItem immediately after getting the response from the OPTIONS request.

My configuration is as simple as it can be:

thumbnailUploader: FileUploader = new FileUploader({
    url: thumbnailUploadEndpoint,
    autoUpload: true
  })

The OPTIONS request seems to come back with the right headers:

Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Access-Control-Allow-Origin: http://localhost:4200
Allow: POST, OPTIONS, PUT
...

onErrorItem is called with the following:

item has isError and isUploaded set to true, which makes no sense to me
response is an empty string
status is 0
headers is an empty object

I've been trying to get this to work, but for some reason it's calling `onErrorItem` immediately after getting the response from the `OPTIONS` request. My configuration is as simple as it can be: thumbnailUploader: FileUploader = new FileUploader({ url: thumbnailUploadEndpoint, autoUpload: true }) The OPTIONS request seems to come back with the right headers: Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT Access-Control-Allow-Origin: http://localhost:4200 Allow: POST, OPTIONS, PUT ... `onErrorItem` is called with the following: * `item` has `isError` _and_ `isUploaded` set to `true`, which makes no sense to me * `response` is an empty string * `status` is `0` * `headers` is an empty object

FrontendJesus commented

2018-06-18 15:06:17 +00:00

(Migrated from github.com)

Is this only on CORS error? What would happen if there is a "real" error, not just CORS. Would it also be isError = true + isUploaded = true? That would make it impossible to retry uploading I think, kinda problematic.

MCurran16 commented

2018-06-22 13:34:16 +00:00

(Migrated from github.com)

@PLPeeters I was having the same issue. I added this and everything worked correctly.

ngAfterViewInit() {
  this.fileUploader.onAfterAddingFile = (item => {
    item.withCredentials = false;
  });
}

Hope this helps! Credit #399

@PLPeeters I was having the same issue. I added this and everything worked correctly. ``` ngAfterViewInit() { this.fileUploader.onAfterAddingFile = (item => { item.withCredentials = false; }); } ``` Hope this helps! Credit #399

👍 6 🎉 1

PLPeeters commented

2018-06-22 14:09:13 +00:00

(Migrated from github.com)

I ended up switching to ngx-file-drop. I'll leave this open though, as it still looks like a bug to me.

hasi94 commented

2018-07-24 05:57:22 +00:00

(Migrated from github.com)

@MCurran16
Thank you it work for me

@MCurran16 Thank you it work for me

izi-SL commented

2018-10-17 10:52:33 +00:00

(Migrated from github.com)

Same issue occur for me also for onCompleteItem, but while ago it works properly . worst thing is it returns the empty response.

marcoshmendes commented

2019-02-21 18:21:12 +00:00

(Migrated from github.com)

@PLPeeters I was having the same issue. I added this and everything worked correctly.
ngAfterViewInit() {
  this.fileUploader.onAfterAddingFile = (item => {
    item.withCredentials = false;
  });
}
Hope this helps! Credit #399

Ho my gosh! I am sooooo happy about that! I was trying for hours, i was close to give up from this lib. Thank you so much!! I have no more errors about CSRF token invalid

> @PLPeeters I was having the same issue. I added this and everything worked correctly. > > ``` > ngAfterViewInit() { > this.fileUploader.onAfterAddingFile = (item => { > item.withCredentials = false; > }); > } > ``` > Hope this helps! Credit #399 Ho my gosh! I am sooooo happy about that! I was trying for hours, i was close to give up from this lib. Thank you so much!! I have no more errors about CSRF token invalid

RonAlmog commented

2019-03-18 01:18:29 +00:00

(Migrated from github.com)

Gosh, @PLPeeters, thank you! You saved the day.

vravipati9 commented

2020-04-29 19:53:54 +00:00

(Migrated from github.com)

@MCurran16 , Thanks a lot! It worked for me too.

Though I haven't understand the reason behind this and wondering why we need to set withCredentials after fileUpload

@MCurran16 , Thanks a lot! It worked for me too. Though I haven't understand the reason behind this and wondering why we need to set withCredentials after fileUpload

abhashpr commented

2020-05-13 05:36:41 +00:00

(Migrated from github.com)

I went through the django docs and found that the data been sent as part of the request i.e. the request body should also have the 'csrfmiddlewaretoken'. I did set the key in my request like this and it worked. So your request body should have this as key alongwith the value

this.http
.post('http://localhost:8000/blog/post_test/',
{ csrfmiddlewaretoken: this._tokenService.token },
httpOptions)
.subscribe(data => {
console.log(data)
});

I went through the django docs and found that the data been sent as part of the request i.e. the request body should also have the 'csrfmiddlewaretoken'. I did set the key in my request like this and it worked. So your request body should have this as key alongwith the value this.http .post('http://localhost:8000/blog/post_test/', **{ csrfmiddlewaretoken: this._tokenService.token },** httpOptions) .subscribe(data => { console.log(data) });

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1016