Image upload to Amazon S3 with Ionic

Ionic Framework ionic-v3
1

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?

2

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

3

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?

4

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

5

Should be. I do this with azure:

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'))
        )
  };
6

Hi guys, I completed the integration using this code:

  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);
7

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?

8

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

9

This is my full code:

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:

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

10

Did you fixed this issue already?

11

Hello Luca,

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