CODEWITHSUNDEEP
angularhttptypescriptfile-uploadprimeng
m41n
m41n

Reputation: 443

File upload in Angular 2, payload is missing the file data

I am trying to implement a file upload in angular 2 (or rather 4) with typescript.

So far I have tried the ngx-uploader, the primeNg uploader with default upload and with a custom upload.

I can set the required headers, the files information like file-type, size and file-name get added to the request just fine. But the actual data of the file is simply missing.

Here the code I currently have:

html for primeNg uploader

 <p-fileUpload name="files" url="{{uploadUrl}}" multiple="multiple" maxFileSize="10000000"
  (onUpload)="uploadFinished($event)" withCredentials="true" (onBeforeSend)="addHeaders($event)"
                customUpload="true" (uploadHandler)="uploadHandling($event)">

  </p-fileUpload>

The onUpload function does some stuff in case of a success (status 200), which I do get. It should not matter at this point. The onBeforeSend is for the default upload of primeNg for adding headers and is not called with the custom upload used on uploadHandler. The uploadUrl is also set correctly. The code for my uploadHanding is as follows:

uploadPrep(event: any) {
    // console.log(event.files);
    const fileList: FileList = event.files;
    if (fileList.length > 0) {
      const formData: FormData = new FormData();
      for (let i = 0; i < fileList.length; i++) {
        const file: File = fileList[0];
        formData.append('files', file, file.name);
      }
      console.log(formData);
      const headers = new Headers();
        headers.append('X-XSRF-TOKEN', document.cookie.substr(11, document.cookie.length - 11));
      const options = new RequestOptions({headers: headers});
      this.http.post(this.uploadUrl, formData, options)
        .map(res => res.json())
        .subscribe(
          data => console.log('success'),
          error => console.log(error)
        );
    }
  }

When I look at the final request, the payload looks like this (for the example of a txt file):

------WebKitFormBoundaryUDTmTTvWLNAqcD65
Content-Disposition: form-data; name="files"; filename="testdata.txt"
Content-Type: text/plain


------WebKitFormBoundaryUDTmTTvWLNAqcD65--

The request also always seems to just send around 100-200B of data, even if I attach a picture with several MB in size.

I looked at the formData created and the event.files which primeNg gives me that should contain the files to upload. The files information (type, name, etc) is always there but the actual data is missing, as it is in the payload shown above.

At this point I have no idea what the problem is as it doesn't seem to be an issue with the uploader itself since I tested several options, as stated at the beginning of my question.

What could be the issue or how could I fix it?

Upvotes: 1

Views: 2113

Answers (1)

m41n
m41n

Reputation: 443

Well, a bit of a silly solution (at least it makes me feel silly).

First off, I realized that the payload would not show the data itself anyway.

Secondly, the error itself was that the backend simply looked for the data at the wrong place.

In my html I was setting:

name="files"

while the backend was looking for the data at file. A bit of miscommunication, but all solved now. These two really have to be identical.

Upvotes: 0

Related Questions