danialfarid / ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
MIT License
7.87k stars 1.6k forks source link

Amazon S3 PUT request #1791

Open TxtSync opened 7 years ago

TxtSync commented 7 years ago

Hey there, I have looked on both your issue list and SO - and I cannot find a working solution

What should happen:

  1. My user visits our website
  2. They either drag and drop their file or select their file manually
  3. I then send a request to my API with the file information to generate a SignedURL for Amazon S3
  4. We then send that file to the given signed url.
  5. File is then uploaded into S3

My Problem: On upload the file is completely empty apart from a few bytes.

I have tried using the FileReader, I have tried doing Upload.http and I have tried the default Upload.upload

To get the files from Drag and Drop: this.$scope.$watch('files', function () { scope.upload(scope.files); }); this.$scope.$watch('file', function () { if (scope.file != null) { scope.files = [scope.file]; } });

Get the Signed URL and process: if (files && files.length) { for (var i = 0; i < files.length; i++) { var file = files[i]; if (!file.$error) { $ctrl.DirectoryManagementService.GetUploadURL(file, mainScope.CurrentDirectoryID, mainScope.ContactID, function (response) { });

Uploading into S3 $ctrl.Upload.http({ method: "PUT", url: response.url, headers: {'Content-Type': file.type != '' ? file.type : 'application/octet-stream'}, data: file }).then(function (resp) { console.log(resp); });

Any help is really appreciated.

danialfarid commented 7 years ago

Have a look at Amazon S3 upload section of readme file. Using Upload.upload() you should be able to upload the file.

TxtSync commented 7 years ago

It puts the file in AWS but the file is completely corrupt - If I upload a TXT file it's completely empty.

$ctrl.Upload.upload({ url: response.url, method: "PUT", headers: { 'Content-Type': file.type }, data: { file: file } })

byrneciaran commented 7 years ago

Check that your API is handling the file correctly by saving it locally. For example, when the file is uploaded from the client to my API I need to load it into a Buffer before posting it to S3.

var params = {
                Bucket: "Your Bucket Name",
                ACL: "public-read",
                Key: "Your Key Name",
                Body: new Buffer(file.body)
            };
developeron29 commented 6 years ago

+1, PUT not working using the tutorial from the wiki, Can somebody please suggest a working solution?

wdoyle commented 6 years ago

Can confirm this works perfectly fine with POST

$ctrl.Upload.upload({ url: signedInformation.url, fields: signedInformation.fields, //credentials method: 'POST', file: file }).then(function (resp) { });