Cordoba / Ionic application uploads a base64 image to S3 via a server signed URL

Question

I can't seem to upload a photo to S3. I looked at a lot of resources on the Internet, and I can not find a definite answer to this question. Here is what I still have. I always get the error code: 3 as my failed message.

Client side:

$scope.uploadTopicPhoto = function(imageData) { var image2save = "data:image/jpeg;base64," + imageData; $http({ url: 'http://api.example.io/signS3upload', method: "GET" }).then(function (success) { var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = success.data.key options.mimeType = "image/jpeg"; options.chunkedMode = false; options.httpMethod = 'PUT'; function win(r) { console.log("Code = " + r.responseCode); } function fail(error) { alert("An error has occurred: Code = " + error.code); } var uri = encodeURI(success.data.signed_request); var ft = new FileTransfer(); ft.upload(image2save, uri, win, fail, options); }); } 

Server side:

 var s3 = new aws.S3(); var bucketName = 'testimages'; var s3_params = { Bucket: bucketName, Key: uuid.v4() + '.jpg', Expires: 60, ContentEncoding: 'base64', ContentType: 'image/jpeg', ACL: 'public-read' }; s3.getSignedUrl('putObject', s3_params, function(err, data){ if (err) { console.log(err); } else { var return_data = { signed_request: data, key: s3_params.Key }; res.json(return_data); } }); 

CORS:

 <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Content-*</AllowedHeader> <AllowedHeader>Authorization</AllowedHeader> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration> 

Answer 1

I think you do not need to include data:image/jpeg;base64, in front of your base64 image data. Just delete this part and load the base64 data directly into the request body.

See: fooobar.com/questions/118982 / ... and http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPUT.html#RESTObjectPUT-requests .

Answer 2

it works for me, I send the image file to the REST API and the API loads the image into the s3 bucket and the credentials are obtained from another file [save credential].

 (function() { function execute(rqst, q, fwk) { console.log('called api') var uploadedFile = rqst.files['image']; console.log(rqst.files['image']); var newId = fwk.uuid.v4(); console.log('.........', rqst); if (rqst.body.data) { var image_type = rqst.body.data; } else { var image_type = rqst.body.image_type; } console.log('type', image_type, newId); if (image_type && uploadedFile) { if (!uploadedFile.extension) { uploadedFile.extension = "png"; console.log('not ex'); } var newPath = "images/food-images" + "/" + newId + '.' + uploadedFile.extension; fwk.getAwsS3Client(function(err, awsS3Client) { var params = { localFile: uploadedFile.path, s3Params: { Bucket: fwk.config.awsS3.bucketName, Key: newPath, }, }; var uploader = awsS3Client.uploadFile(params); uploader.on('error', function(err) { console.error('Unable to upload' + image_type + 'photo:' + err.toString()); q.resolve({ status: 200, data: { code: 1, error_message: 'Unable to upload' + image_type + 'photo.' } }); }); uploader.on('progress', function() { console.log(uploader.progressAmount); }); uploader.on('end', function() { console.log("upload" + image_type + "photo done."); fwk.getAwsS3PublicUrl(newPath, function(err, publicUrl) { if (err) { console.error('Error getting public url: ' + err.toString()); q.resolve({ status: 200, data: { code: 1, error_message: 'Error getting public url.' } }); } else { // console.log('ho gya upload',newPath,publicUrl) q.resolve({ status: 200, data: { code: 0, photo_url: newPath, public_photo_url: publicUrl } }); } }) }); }); } else { console.error('Error key parameter missing'); q.resolve({ status: 200, data: { code: 1, error_message: 'Error Missing required key in params.' } }); } } exports.execute = execute; })(); 

Answer 3

If you use canvas.toDataURL , you do not need data:image/jpeg;base64 , it is generated by the function. If you are using btoa , you need to add the header data:image/jpeg;base64 .