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

[PLPeeters]

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]

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]

@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 ended up switching to ngx-file-drop. I'll leave this open though, as it still looks like a bug to me.

[hasi94]

@MCurran16 Thank you it work for me

[izi-SL]

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

[marcoshmendes]

@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]

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

[vravipati9]

@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]

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) });