Angular2 File Download for Amazon s3 Recycle Bin

Question

I know how to upload an amazon s3 file to angular 1. Can I find out how to upload a file to angular 2. but I did not find a solution for angular 2.

Answer 1

Improvement / some security is still required.

HTML

<form (ngSubmit)="onSubmit(f)" #f="ngForm" action=""> <input type="file" (change)="fileEvent($event)" /> </form> <button (click)="uploadfile(f)">Upload file!</button> 

c

 export class Page2 { myfile:any; file:any; constructor() { } uploadfile(event) { AWS.config.accessKeyId = 'YOUR-ACCESS-KEY'; AWS.config.secretAccessKey = 'YOU-SECRET-ACCESS-KEY'; var bucket = new AWS.S3({params: {Bucket: 'YOUR-BUCKET-NAME'}}); var params = {Key: this.file.name, Body: this.file}; bucket.upload(params, function (err, data) { console.log(err, data); }); } fileEvent(fileInput: any){ var files = event.target.files; var file = files[0]; this.file = file; } } 

Answer 2

If you use the Rails backend (or even Node), the easiest solution is to create an assigned URL (which should be a PUT) and then use the Angular service to call that PUT and attach the file to the request body.

You can learn more about how I did it here .

Answer 3

Here's how I personally did it.

I had an api that I can name that returns me basic information:

 { "token":"cfc2b831-...", "url":"https://test-26.s3-eu-west-1.amazonaws.com/", "formData":[ {"bucket":"test-26"}, {"key":"upload/images/11a59aa4..."}, {"Content-Type":"image/"}, {"X-Amz-Algorithm":"AWS4-HMAC-SHA256"}, {"X-Amz-Credential":"AKKWEN2A/20171129/eu-west-1/s3/aws4_request"}, {"X-Amz-Date":"20171129T091121Z"}, {"policy":"eyJleH..."}, {"X-Amz-Signature":"3afbb6d..."} ]} 

Then this is my function to send the file to fileDrop:

 onFileDrop(fileArr) { const file = fileArr[0]; this.http.post('api/image', {imageType: 'Photo'}).subscribe((r: any) => { const xhr: XMLHttpRequest = new XMLHttpRequest(); const formData = new FormData(); const url = r.url; r.formData.forEach(ent => { Object.entries(ent).forEach(([k, v]) => { formData.append(k, v); }); }); formData.append('file', file); xhr.open('POST', url, true); xhr.send(formData); }); } 

Answer 4

I don’t know if you have solved this problem right now, but all you have to do is rebuild the mail request that you send to S3

You can check this: https://github.com/ntheg0d/angular2_aws_s3