Uploading images to amazon S3 using Ionic Framework

ionic-v1
1

Hi,
Can anyone suggest me How we can upload images to Amazon S3 using Ionic Framework .??
Anyone Please give link to sample application for This …Can Anyone Suggest.Thanks In Advance

Regards

1 Like
2

I implemented this. You need to get a file uri from the camera and then use the file transfer plugin to upload it to an endpoint. My server provides a presigned path that I then PUT to and it works great.

3

can you please provide an example? Im looking to upload a video to S3 after capturing it
I have been struggling to achieve this. Please help me.

4

Hi taybinco,
Thanks For Replying .Can you show me example code for uploading to S3 (you can use fake parameters for signature key)

Thanks

5

http://ngcordova.com/docs/plugins/fileTransfer/

6

I did try cordovafiletransfer api and still could not get it work. I gave https://bucket_name.s3.amazonaws.com/ as server path and mediafile path including the file name as the filepath. but i still could not get it working. If you have a working project of snippet please share it with us.

Thanks!

7

I did this for video uploading and it worked. One can do something similar for images:

$scope.recordVideo = function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URL,
sourceType: Camera.PictureSourceType.CAMERA
};
$cordovaCapture.captureVideo(options).then(function(imageData) {
$scope.picData = imageData;
$scope.ftLoad = true;
$scope.uploadVideo(imageData);
$ionicLoading.show({template: ‘Successfully recorded.’, duration:500});
},
function(err){
$ionicLoading.show({template: ‘Failed to record video’});
});
};

$scope.uploadVideo = function(fileURL) {
var fileName = fileURL[0].lastModifiedDate+’_’+fileURL[0].name,
date = fileURL[0].lastModifiedDate,
fileURL = fileURL[0].fullPath;

var s3URI = encodeURI("https://bucketlist_name.s3.amazonaws.com/"),
    policyBase64 = "policyBase64_file",
    signature = "signature",
    awsKey = 'AWS_Key',
    acl = "public-read";
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "video/quicktime";
options.chunkedMode = true;
options.params = {
    "key": date+'_'+fileURL.substr(fileURL.lastIndexOf('/') + 1),
    "AWSAccessKeyId": awsKey,
    "acl": acl,
    "policy": policyBase64,
    "signature": signature,
    "Content-Type": "video/quicktime"
};

var json = {
  description: $scope.description,
  challenge: $scope.userChallenges,
  charity_name: $scope.charityOrgs
};

var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("https://bucketlist_name.s3.amazonaws.com/"), 
  function(result) { 
    $ionicLoading.show({content: 'Loading Data', animation: 'fade-in',showBackdrop: true, maxWidth: 200,duration:500});
  }, function(error) { 
    $ionicLoading.show({template: 'Failed to upload video'});
    $ionicLoading.hide();
  }, options);

};

1 Like
8

I would not recommend implementing uploading to S3 directly in Javascript within your web app. Doing so means that you have to incorporate your credentials within the code, to a certain extent, and a nefarious person can either sniff out those credentials ‘over the wire’ or hack into the source code for your app (which is really just uncompiled, visible HTML/Javascript) and obtain them.

Far better solution is to set up a small web service that you can send a RESTful request to, which will handle the upload to an S3 bucket for you.

I have done this with good results on a couple of Ionic apps to date.

End of the day, spending the $5 to $10/month to set up a tiny Amazon EC2, Heroku or Digital Ocean server to handle this is worth it, given the risk. It is only about 15 lines of Ruby code to set up an uploader service that can listen for a request from your app, take the image data and send it to S3.

(Note: If you are using an EC2 server, there is the added bonus of no extra data charges to send the image data from the EC2 instance to S3)

1 Like
9

Hello there @CyberFerret!

If possible, could you please show me the Ruby server code you used to create the endpoint to listen for and upload to S3?

I agree with you, the way you describe is the way it needs to be done.

Thanks!

10

S3 has the concept of presigned posts. This way, you can ask your server for a URL to upload to, and your authorizations bundled into the URL. I don’t store any AWS information in my javascript code.

11

I haven’t played with presigned posts in detail, but I understand that even for these, you need a server to generate the POST variables in the form in your app.

So in both cases you need to have a server with some scripting that can either generate the presigned POST, or else handle the file upload to S3 for you.

I am more than happy to set up a small AirPair blog post with a tutorial based on how I currently use Sinatra/Ruby to handle S3 uploads. I guess it comes down to the interest that people have in this. If enough people in this thread want it, I will sit down and do one.

3 Likes
12

This answer is kind of lately but may be help some other people. One guy create a demo app for this scenario.You can take a look at Ionic Market - Image Upload Example

1 Like
13

Hello,

I use same code but i did not success. I am getting this error.

“InvalidRequestThe authorization mechanism you have provided is not supported. Please use AWS4-HMAC-SHA256.29B3883B0B6E03B0IrIkS01C9Bj1swRsiJqX5RZOVcZl5Q/Iu4An+WhqwnXxaIbP//mWqeNv5/8zmamwxOejVa98Jzk=”

Please help me I am stuck from last 2 days.