title: File upload in Angular 2, payload is missing the file data
body: <p>I am trying to implement a file upload in angular 2 (or rather 4) with typescript.</p>
  
  <p>So far I have tried the ngx-uploader, the primeNg uploader with default upload and with a custom upload.</p>
  
  <p>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.</p>
  
  <p>Here the code I currently have:</p>
  
  <p>html for primeNg uploader</p>
  
  <pre><code> &lt;p-fileUpload name="files" url="{{uploadUrl}}" multiple="multiple" maxFileSize="10000000"
    (onUpload)="uploadFinished($event)" withCredentials="true" (onBeforeSend)="addHeaders($event)"
                  customUpload="true" (uploadHandler)="uploadHandling($event)"&gt;
  
    &lt;/p-fileUpload&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>uploadPrep(event: any) {
      // console.log(event.files);
      const fileList: FileList = event.files;
      if (fileList.length &gt; 0) {
        const formData: FormData = new FormData();
        for (let i = 0; i &lt; 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 =&gt; res.json())
          .subscribe(
            data =&gt; console.log('success'),
            error =&gt; console.log(error)
          );
      }
    }
  </code></pre>
  
  <p>When I look at the final request, the payload looks like this (for the example of a txt file):</p>
  
  <pre><code>------WebKitFormBoundaryUDTmTTvWLNAqcD65
  Content-Disposition: form-data; name="files"; filename="testdata.txt"
  Content-Type: text/plain
  
  
  ------WebKitFormBoundaryUDTmTTvWLNAqcD65--
  </code></pre>
  
  <p>The request also always seems to just send around 100-200B of data, even if I attach a picture with several MB in size.</p>
  
  <p>I looked at the <code>formData</code> created and the <code>event.files</code> 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.</p>
  
  <p>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. </p>
  
  <p>What could be the issue or how could I fix it?</p>