title: Generate CSV file client side, send using Angular POST, save server side through PHP backend
body: <p>situation:
  clients has an existing windows app that uses csv files to transfer data back and forth and wants to persist in that manner.</p>
  <p>challenge:
  After reading CSV data from server address process the data and generate a new CSV file and upload this to the 'backend'.</p>
  <p>What I have tried:
  I have read just about every SO post on uploading files, but the problem is that if i just use the test data. I.e. read the file, rename and save to backend it doesn't seem to work?</p>
  <p>I use below code to get the blob for the file, this works fine and I can manipulate the data after retrieving it:</p>
  <pre><code>getCsvData3(url: string) {
          let httpOptions: any = {
              //observe: 'response',
              headers: new HttpHeaders({ 'Content-Type': 'application/octet-stream' }),
              params: new HttpParams(),
              responseType: 'response'
          }
                       
          return this.httpClient.get&lt;string&gt;(url, httpOptions);
      }
  </code></pre>
  <p>Now I tried testing this by simply re-creating a <code>File</code> object and attach it to the outgoing process.
  Using:</p>
  <pre><code>const type = { type: data.body.type };
  const blob = new Blob([data.body], type);
  const file = this.blobToFile(blob, 'test.csv')
  </code></pre>
  <p>Where <code>blobToFile</code> looks like (I have tried several options to do this to no avail):</p>
  <pre><code>blobToFile(theBlob: Blob, fileName: string): File {
          var b: any = theBlob;
          //A Blob() is almost a File() - it's just missing the two properties below which we will add
          b.lastModifiedDate = new Date();
          b.name = fileName;
  
          //Cast to a File() type
          return &lt;File&gt;theBlob;
      }
  </code></pre>
  <p>Subsequently I attach the file to the <code>httpClient.Post()</code> call:</p>
  <pre><code>uploadFile(file: File, fileNum: number) {
          const formData = new FormData();
          formData.append(&quot;the_file&quot;, file, file.name);
          this.dataService.uploadWithProgress(formData)
              .subscribe(event =&gt; {
                  if (event.type === HttpEventType.UploadProgress) {
                      console.log(Math.round(100 * event.loaded / event.total));
                      //let percentUploaded = Math.round(100 * event.loaded / event.total);
                  } else if (event instanceof HttpResponse) {
                      console.log(file.name + ', Size: ' + file.size + ', Uploaded URL: ' +         event.body.link);
                      //this.fileUploadSuccess();
                  }
              },
                  err =&gt; console.log(err)
              );
      }
  </code></pre>
  <p>But no matter what I try, I do not get this to work?</p>
  <p>I have also tried to use the MediaFilePicker of NativeScript but that too gives all sorts of nightmares?
  See this question.</p>