title: ionic 3 upload image from camera NOT USING file, file-transfer, file-upload plugins
body: <p>I would like to upload an image to my back-end using FormData, but as Ionic DEVAPP and Ionic VIEW does not support file, file-transfer and file-upload plugins, I need to do it using only Angular Http or HttpClient.</p>
  
  <p>When using DestinationType.FILE_URI, i can get the internal url from the file 
  and display it on a img object, but I can't create a typescript File object from this url without the native file, file-path and file-transfer plugins.</p>
  
  <pre><code>getImage() {
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
  }
  
  this.camera.getPicture(options).then((imageData) =&gt; {
    this.imageURI =  this.sanitizer.bypassSecurityTrustUrl(imageData)
  }, (err) =&gt; {
    console.log(err)
    this.presentToast(err)
  })
  </code></pre>
  
  <p>}</p>
  
  <p>using this template</p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;ion-item&gt;
      &lt;p&gt;{{imageFileName}}&lt;/p&gt;
      &lt;button ion-button color="secondary" (click)="getImage()"&gt;Get Image&lt;/button&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;h4&gt;Image Preview&lt;/h4&gt;
      &lt;img style="display:block" [src]="imageURI" *ngIf="imageURI" alt="Ionic File" width="300" /&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;button ion-button (click)="uploadFile()"&gt;Upload&lt;/button&gt;
    &lt;/ion-item&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>When using DestinationType.DATA_URL I can display the image but can not create the typescript File object needed with the original file name to append the image to the FormData used on my upload service at my Ionic App.</p>
  
  <p>It seems I can find a way to create this typescript File object with the original filename from FILE_URI and a the base64 encoded data from DATA_URL using the camera.getPicture from the cordova camera native plugin.</p>
  
  <p>Service to upload the file to my back-end just uses this approach:</p>
  
  <pre><code>postImage(image: File): Observable&lt;any&gt; {
          const formData = new FormData()
          .append('file', image, image.name)
          }
          return this.httpClient.post&lt;any&gt;(this.myUrl,formData)
      }
  </code></pre>
  
  <p>Both getImage from component myPage.ts and postImage from uploadservice.ts work fine, but I can't find a way to create the File object from camera.getPicture imageData  </p>