# Image upload to Amazon S3 with Ionic

**URL:** <https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974>\
**Category:** ionic-v3\
**Created:** [October 25, 2017, 7:34pm UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974 "2017-10-25T19:34:40Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jicee13](https://avatars.discourse-cdn.com/v4/letter/j/71e660/32.png) [@jicee13](https://forum.ionicframework.com/u/jicee13)\
**Post date:** [October 25, 2017, 7:34pm UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/1 "2017-10-25T19:34:40Z")

</div>

Hi guys. I’m trying to implement an image upload feature in my Ionic app that talks to Amazon s3. I don’t need help with the camera feature or the ionic native things, I just need guidance on getting it hooked up to Amazon s3. I’ve looked through the Javascript SDK and got confused. I like the aws-starter kit they just released, but its resource overkill for what I’m trying to do.

Anyone have any tutorials or tips on integrating Amazon s3 with Ionic?

---

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [March 7, 2018, 10:19pm UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/2 "2018-03-07T22:19:16Z")

</div>

> [@jicee13](#):
>
> I’ve looked through the Javascript SDK and got confused

Hi @jicee13, I have the same problem. I need to upload a multimedia file on AWS S3 but I’m confused. Have you solved your problem?

Thanks in advance  
L

---

<div class="post-metadata">

**Author:** ![morphist](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/morphist/32/127474_2.png) [@morphist](https://forum.ionicframework.com/u/morphist)\
**Post date:** [March 8, 2018, 12:10am UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/3 "2018-03-08T00:10:17Z")

</div>

What do you guys mean integration with S3? can you specify a use case in detail?

like you have app that has blobs? files? or media? that you want to the app to be able to upload (like using htp.post? are there any limitations or reasons you can do that via RESTful API?

---

<div class="post-metadata">

**Author:** ![sanjib\_dev](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@sanjib\_dev](https://forum.ionicframework.com/u/sanjib_dev)\
**Post date:** [March 8, 2018, 12:49pm UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/4 "2018-03-08T12:49:16Z")

</div>

Just wonder if normal form post with proper header set is possible just like mentioned in AWS JS sdk?

---

<div class="post-metadata">

**Author:** ![morphist](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/morphist/32/127474_2.png) [@morphist](https://forum.ionicframework.com/u/morphist)\
**Post date:** [March 8, 2018, 4:24pm UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/5 "2018-03-08T16:24:50Z")

</div>

Should be. I do this with azure:

```auto
uploadSnippetBlob(blob: Blob, snippetId: string) {
    console.log("uploading to Azure blob storage...")
    let headers = new HttpHeaders().set('Authorization', this.userData.token);
    let formData = new FormData(); 
    formData.append("snippet", blob);
    return this.http.post(this.apiBaseUrl+`/api/my/snippets/${snippetId}/thumbnail`, formData, { headers })
        .pipe(
            retry(1),
            timeoutWith(7000, Observable.throw(new Error('uploadSnippetThumbnailImage API call timed out'))),
            catchError(this.handleError('uploadSnippetThumbnailImage'))
        )
  };

```

---

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [March 9, 2018, 8:53pm UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/6 "2018-03-09T20:53:10Z")

</div>

Hi guys, I completed the integration using this code:

```auto
  const params = {
      Bucket: Config.Prop.AWS_BUCKET,
      Key: Config.Prop.AWS_FOLDER + '/' + time.getTime() + ".mp4",
      Body: base64File.Body,
      ContentEncoding: 'base64',
      ContentType: base64File.ContentType
    };

    this.bucket.upload(params, function (err, data) {
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }
      console.log('Successfully uploaded file.', data);
    }).on('httpUploadProgress', function (evt) {
      let a = (evt.loaded * 100) / evt.total;
      console.log("Uploaded :: " + a + '%');
    }).send(callback);

```

---

<div class="post-metadata">

**Author:** ![jicee13](https://avatars.discourse-cdn.com/v4/letter/j/71e660/32.png) [@jicee13](https://forum.ionicframework.com/u/jicee13)\
**Post date:** [March 10, 2018, 12:11am UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/7 "2018-03-10T00:11:09Z")

</div>

Nice! So this looks like you converted to base64. I’m looking for a solution where I can upload the file as an object that way I can upload any type of file… You think you could help me with this?

---

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [March 10, 2018, 7:36am UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/8 "2018-03-10T07:36:29Z")

</div>

My problem is retrieve the file from camera! I opened another thread for this problem: [How to create a Base64 Video String for AWS.S3](https://forum.ionicframework.com/t/how-to-create-a-base64-video-string-for-aws-s3/124061/7)

---

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [March 10, 2018, 8:34am UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/9 "2018-03-10T08:34:57Z")

</div>

This is my full code:

```auto
chooseVideo() {
    console.log("chooseVideo begin");
    let cameraOptions: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      mediaType: this.camera.MediaType.VIDEO
    }
    console.log("cameraOptions", cameraOptions);

    this.camera.getPicture(cameraOptions).then((imageData) => {
      console.log("imageData", imageData);

      alert("CHOOSED");
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      alert(base64Image);

      console.log("base64Image", base64Image);

      this.uploadVideo(imageData);

    }, (err) => {
      alert("ERROR");
      alert(err);
      alert("ERROR -> " + JSON.stringify(err));
    });
    console.log("chooseVideo end");
  }

```

after choosing video from camera:

```auto
uploadVideo(imageData) {
    console.log("imageData begin");
    let time = new Date();

    let bucket = new S3(
      {
        accessKeyId: Config.Prop.AWS_ACCESS_KEY_ID,
        secretAccessKey: Config.Prop.AWS_SECRET_ACCESS_KEY,
        region: Config.Prop.AWS_REGION
      }
    );

    const params = {
      Bucket: Config.Prop.AWS_BUCKET,
      Key: Config.Prop.AWS_FOLDER + '/' + time.getTime() + ".mp4",
      Body: imageData,
      ContentType: "video/mp4"
    };

    console.log("params", params);

    bucket.upload(params, function (err, data) {

      console.log("err", err);
      console.log("data", data);

      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }

      console.log('Successfully uploaded file.', data);
      return data;
    });
  }

```

The file is sent to AWS.S3 but it is a text file with this content:  
`/storage/sdcard/DCIM/SharedFolder/Video_2018-03-09_220205.mp4`

Help me please  
Luca

---

<div class="post-metadata">

**Author:** ![monterorf](https://avatars.discourse-cdn.com/v4/letter/m/bcef8e/32.png) [@monterorf](https://forum.ionicframework.com/u/monterorf)\
**Post date:** [April 3, 2018, 8:55pm UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/10 "2018-04-03T20:55:26Z")

</div>

Did you fixed this issue already?

---

<div class="post-metadata">

**Author:** ![ShineNayLinOo](https://avatars.discourse-cdn.com/v4/letter/s/8c91f0/32.png) [@ShineNayLinOo](https://forum.ionicframework.com/u/ShineNayLinOo)\
**Post date:** [January 11, 2019, 4:23am UTC](https://forum.ionicframework.com/t/image-upload-to-amazon-s3-with-ionic/109974/11 "2019-01-11T04:23:53Z")

</div>

Hello Luca,

Could you please let me know what plugin you used to implement this?  
Thanks in advance!