# Uploadingimage to server

**URL:** <https://forum.ionicframework.com/t/uploadingimage-to-server/134130>\
**Category:** ionic-v3\
**Created:** [July 2, 2018, 2:46am UTC](https://forum.ionicframework.com/t/uploadingimage-to-server/134130 "2018-07-02T02:46:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![andjelicnikola](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@andjelicnikola](https://forum.ionicframework.com/u/andjelicnikola)\
**Post date:** [July 2, 2018, 2:46am UTC](https://forum.ionicframework.com/t/uploadingimage-to-server/134130/1 "2018-07-02T02:46:17Z")

</div>

I want to upload files to S3 server. I am able to get image from Camera and read it with file plugin:

```auto
    this.file.resolveLocalFilesystemUrl(imageData).then((entry: FileEntry) => {
      let dirPath = entry.nativeURL;
      const dirPathSegments = dirPath.split('/');
      dirPathSegments.pop();
      dirPath = dirPathSegments.join('/');

      this.file.readAsArrayBuffer(dirPath, entry.name).then((buffer) => {
        console.log(buffer);

        const imgBlob = new Blob([new Uint8Array(buffer)], {type: 'application/image-jpeg;charset=utf-8'});
        console.log(imgBlob);

        this.videoService.store('match', 118, [imgBlob])
        .subscribe(
          (event: any) => {
            // Handeling server response
          },
          (responseError) => console.log(responseError));
      });

    }).catch((err) => console.log(err));

```

Is there a way to send actual file and not blob or Array buffer? Or can somebody explain why it is better to send Blob or Array buffer.

Thanks

---

<div class="post-metadata">

**Author:** ![ekhmoi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ekhmoi/32/103413_2.png) [@ekhmoi](https://forum.ionicframework.com/u/ekhmoi)\
**Post date:** [July 2, 2018, 6:44am UTC](https://forum.ionicframework.com/t/uploadingimage-to-server/134130/2 "2018-07-02T06:44:33Z")

</div>

You can create FormDate and append your blob and then post your form data to server.  
_Note: As far as I know iOS doesn’t have proper FormData support. You might need to use polyfill_

```auto
...
public uploadFile(url: string, base64: string): Observable<any> {
      const blob: Blob = this.dataURItoBlob(base64);
      const fd = new FormData();
      fd.append('file[]', blob);
      return this.http.post(url, fd);
}

private dataURItoBlob(dataURI: string): Blob {
    // convert base64/URLEncoded data component to raw binary data held in a string
    let byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = encodeURI(dataURI.split(',')[1]);

    // separate out the mime component
    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    const ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
  }

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:30pm UTC](https://forum.ionicframework.com/t/uploadingimage-to-server/134130/3 "2021-07-19T21:30:33Z")

</div>