Not getting all headers added on upload (i.e. content-length) #1160

New Issue

2020-07-31T04:36:22Z

tank104 commented

2020-07-31 04:36:22 +00:00

(Migrated from github.com)

When using this control, I am seeing the request but it looks to be missing headers (like content-length) so its getting rejected by my microservice.

The setup is:

    this.uploader = new FileUploader({
      url: `${environment.userApiUrl}/users/${this.userId}/profilepicture`,
      method: "POST",
      disableMultipart: true,
      autoUpload: true,
      maxFileSize: 2 * 1024 * 1024,
    });

The request looks like this:

Request URL: http://localhost:8002/api/users/fb092da2-2833-45e8-8acc-2bddf5fe33ea/profilepicture
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Content-Type: image/jpeg
Referer: http://localhost:8881/settings/user
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

What am I doing wrong?

When using this control, I am seeing the request but it looks to be missing headers (like content-length) so its getting rejected by my microservice. The setup is: ``` this.uploader = new FileUploader({ url: `${environment.userApiUrl}/users/${this.userId}/profilepicture`, method: "POST", disableMultipart: true, autoUpload: true, maxFileSize: 2 * 1024 * 1024, }); ``` The request looks like this: ``` Request URL: http://localhost:8002/api/users/fb092da2-2833-45e8-8acc-2bddf5fe33ea/profilepicture Referrer Policy: no-referrer-when-downgrade Provisional headers are shown Content-Type: image/jpeg Referer: http://localhost:8881/settings/user User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36 ``` What am I doing wrong?

tank104 commented

2020-08-04 02:46:28 +00:00

(Migrated from github.com)

Ok just to circle back, the missing headers was a bit of a red herring.

After a lot of debugging and trial and error I realised if I commented out this method below it worked:

    xhr.upload.onprogress = (event: any) => {
      let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
      this._onProgressItem(item, progress);
    };

I then found this issue https://github.com/nathanboktae/q-xhr/issues/12 which may or may not be related but it gave me something to work with.

In the end this code worked (and correct CORS setup, which I had already):

    this.uploader = new FileUploader({
      url: URL,
      **disableMultipart: true, // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
      formatDataFunction: (item) => {
        item.withCredentials = false;
        return item._file;
      }**
    });

Ok just to circle back, the missing headers was a bit of a red herring. After a lot of debugging and trial and error I realised if I commented out this method below it worked: ``` xhr.upload.onprogress = (event: any) => { let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0); this._onProgressItem(item, progress); }; ``` I then found this issue https://github.com/nathanboktae/q-xhr/issues/12 which may or may not be related but it gave me something to work with. In the end this code worked (and correct CORS setup, which I had already): ``` this.uploader = new FileUploader({ url: URL, **disableMultipart: true, // 'DisableMultipart' must be 'true' for formatDataFunction to be called. formatDataFunction: (item) => { item.withCredentials = false; return item._file; }** }); ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1160