I have a working script that when the file input changes, pick the files, sign their upload data in my django backend, and upload it from the frontend directly to my s3 bucket. It's working great. I'm using ng-file-upload to do it.
var doSignUrl = function(image, success, error){
$http({
url: scope.signUrl,
params: {
s3_object_name: image.name,
s3_object_type: image.type
},
method: 'get'
}).success(success).error(error);
};
var getUploadConfig = function(image, data){
return {
url: data.url,
method: 'POST',
fields : {
key: data.path,
AWSAccessKeyId: data.aws_access_key_id,
acl: data.acl,
policy: data.policy,
signature: data.signature,
"Content-Type": image.type != '' ? image.type : 'application/octet-stream',
filename: data.file_name
},
file: image,
};
};
var doUpload = function(image){
doSignUrl(image, function(signData){
Upload.upload(getUploadConfig(image, signData)).progress(function(e){
doProgress(image, parseInt(100.0 * e.loaded / e.total))
}).success(function(data, status, header, config){
doSuccess(image, signData.url+'/'+signData.path);
}).error(function(data, status, header, config){
doError(image);
});
}, function(data, status, header, config){
console.log(status);
console.log(data);
});
}
for each file the file picker selects i call doUpload(file)
But my real objective is to crop the image in frontend using canvas before to upload. The problem is that when you crop image using canvas, the result is a base64 encoded image, not a file. So my final question is: is it Possible to upload this base64 image directly to s3?
With a lot of research i found out that you can send a blob instead of a file unsing ngFileUpload to s3.
I used this library to convert my base64 to a blob, and then passed the generated blob instead of the file in the Upload.upload()
file parameter.