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

[tank104]

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]

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