Hi guys, thanks so much for writing this awesome library. Unfortunately, I have not been able to get the deleteFile working in the same action creator as uploadFile (which works immaculately). Every time I try to invoke deleteFile the API call just stalls, and I am not sure why. Thanks,

Hi!

Our current implementation for an upload profile picture feature works perfectly under our HTTP staging deployment. However, on production (with same keys just for testing) using HTTPS, the upload fails with 403 no matter what and gives the following error:

<?xml version="1.0" encoding="UTF-8"?>
<Error>
  <Code>SignatureDoesNotMatch</Code>
  <Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message> 
  <AWSAccessKeyId>IWon'tPostNoKeysOnGitHub</AWSAccessKeyId>
 <StringToSign>eyJleHBpcmF0aW9uIjoiMjAxOS0xMS0xNFQwMDozMTo0My4wMTlaIiwiY29uZGl0aW9ucyI6W3siYWNsIjoicHVibGljLXJlYWQifSx7ImJ1Y2tldCI6InZhbHUtcHJvZmlsZXMifSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInByb2ZpbGUtaW1hZ2VzLyJdLFsic3RhcnRzLXdpdGgiLCIkQ29udGVudC1UeXBlIiwiIl0sWyJzdGFydHMtd2l0aCIsIiR4LWFtei1tZXRhLXRhZyIsIiJdLHsieC1hbXotYWxnb3JpdGhtIjoiQVdTNC1ITUFDLVNIQTI1NiJ9LHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUFWV1pIVVVEUkxXTUJCRjRVLzIwMTkxMTE0L3VzLWVhc3QtMS9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWRhdGUiOiIyMDE5MTExNFQwMDMxNDMwMTlaIn0seyJ4LWFtei1tZXRhLXV1aWQiOiIxNDM2NTEyMzY1MTI3NCJ9LHsieC1hbXotc2VydmVyLXNpZGUtZW5jcnlwdGlvbiI6IkFFUzI1NiJ9XX0=</StringToSign>
 <SignatureProvided>ed611b066e4abdcc606331798682fbd77e67c1aaab680c3cdde12a55d5a6d75d</SignatureProvided>
  <StringToSignBytes>65 79 4a 6c 65 48 42 70 63 6d 46 30 61 57 39 75 49 6a 6f 69 4d 6a 41 78 4f 53 30 78 4d 53 30 78 4e 46 51 77 4d 44 6f 7a 4d 54 6f 30 4d 79 34 77 4d 54 6c 61 49 69 77 69 59 32 39 75 5a 47 6c 30 61 57 39 75 63 79 49 36 57 33 73 69 59 57 4e 73 49 6a 6f 69 63 48 56 69 62 47 6c 6a 4c 58 4a 6c 59 57 51 69 66 53 78 37 49 6d 4a 31 59 32 74 6c 64 43 49 36 49 6e 5a 68 62 48 55 74 63 48 4a 76 5a 6d 6c 73 5a 58 4d 69 66 53 78 62 49 6e 4e 30 59 58 4a 30 63 79 31 33 61 58 52 6f 49 69 77 69 4a 47 74 6c 65 53 49 73 49 6e 42 79 62 32 5a 70 62 47 55 74 61 57 31 68 5a 32 56 7a 4c 79 4a 64 4c 46 73 69 63 33 52 68 63 6e 52 7a 4c 58 64 70 64 47 67 69 4c 43 49 6b 51 32 39 75 64 47 56 75 64 43 31 55 65 58 42 6c 49 69 77 69 49 6c 30 73 57 79 4a 7a 64 47 46 79 64 48 4d 74 64 32 6c 30 61 43 49 73 49 69 52 34 4c 57 46 74 65 69 31 74 5a 58 52 68 4c 58 52 68 5a 79 49 73 49 69 4a 64 4c 48 73 69 65 43 31 68 62 58 6f 74 59 57 78 6e 62 33 4a 70 64 47 68 74 49 6a 6f 69 51 56 64 54 4e 43 31 49 54 55 46 44 4c 56 4e 49 51 54 49 31 4e 69 4a 39 4c 48 73 69 65 43 31 68 62 58 6f 74 59 33 4a 6c 5a 47 56 75 64 47 6c 68 62 43 49 36 49 6b 46 4c 53 55 46 57 56 31 70 49 56 56 56 45 55 6b 78 58 54 55 4a 43 52 6a 52 56 4c 7a 49 77 4d 54 6b 78 4d 54 45 30 4c 33 56 7a 4c 57 56 68 63 33 51 74 4d 53 39 7a 4d 79 39 68 64 33 4d 30 58 33 4a 6c 63 58 56 6c 63 33 51 69 66 53 78 37 49 6e 67 74 59 57 31 36 4c 57 52 68 64 47 55 69 4f 69 49 79 4d 44 45 35 4d 54 45 78 4e 46 51 77 4d 44 4d 78 4e 44 4d 77 4d 54 6c 61 49 6e 30 73 65 79 4a 34 4c 57 46 74 65 69 31 74 5a 58 52 68 4c 58 56 31 61 57 51 69 4f 69 49 78 4e 44 4d 32 4e 54 45 79 4d 7a 59 31 4d 54 49 33 4e 43 4a 39 4c 48 73 69 65 43 31 68 62 58 6f 74 63 32 56 79 64 6d 56 79 4c 58 4e 70 5a 47 55 74 5a 57 35 6a 63 6e 6c 77 64 47 6c 76 62 69 49 36 49 6b 46 46 55 7a 49 31 4e 69 4a 39 58 58 30 3d</StringToSignBytes>
  <RequestId>CC576A45B4C5DCDC</RequestId>
<HostId>HztbAO2kJqpBU4k6yajg6oOF3O/nwzcl/D0UftbIuh8I+UDRuKTBxuMWtN29gNbbNrQC6N8m6wM=</HostId>
</Error>

My bucket policy (production-url.com is production and beta.production-url.com is staging):

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow requests made from https://production-url.com and http://beta.production-url.com",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::my-bucket/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "https://production-url.com",
                        "http://production-url.com",
                        "https://beta.production-url.com",
                        "http://beta.production-url.com"
                    ]
                }
            }
        }
    ]
}

And the CORS configuration:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://beta.production-url.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://production-url.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

I've tried modifying the S3 policy, CORS configuration with no luck. Also, the same keys and configuration are working for plain HTTP access. It is the only (relevant) difference at this point and can't seem to find any clue! Any help will be greatly appreciated.

Thanks in advance!

Hello,
Getting above error while deleting file on s3
Please help me.

Hi, i could not istall in my new project ..
getting following error
npm install --save react-s3
npm WARN [email protected] requires a peer of react@ but none is installed. You must install peer dependencies yourself.

npm ERR! path G:\haachy\haachynew\node_modules.bin\webpack
npm ERR! code EEXIST
npm ERR! Refusing to delete G:\haachy\haachynew\node_modules.bin\webpack: is outside G:\haachy\haachynew\node_modules\webpack and not a link
npm ERR! File exists: G:\haachy\haachynew\node_modules.bin\webpack
npm ERR! Move it away, and try again.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MY PC\AppData\Roaming\npm-cache_logs\2018-03-05T14_30_02_283Z-debug.log

After installation to "meteor npm install --save react-s3" my application showing error meteorInstallation not found and many more please help

The instructions ask you to put your secret key as a parameter. But to my understanding...you probably do not want to publish your secretKey in a client React App. Am I missing something?

Hi I have been facing issue while deleting the images from the s3 as in the uploadFIle function file is uploaded by not adding the region name is the URL but during the delete file it's taking the region name in the URL so that leads to URL mismatch and the file is not found on the URL.

Any help is appreciated

Thanks

i want to add content-disposition attachment

ERROR in crosstab-portal-1.0.0.js from UglifyJs
Unexpected token: keyword (const) [./node_modules/react-s3/lib/Date.js:1,7][xxx-xxx-1.0.0.js:10995,0]

I am not able to build the application. I am facing above error when I run build command.
Any solution for this?

On version 1.5.5, the uploadFile variable from the package is not a named export as portrayed in the readme file.

When i trying to run npm build, it prompts error about failed to minify the code from this file:

from the error i guessing because the file using Class syntax which is es2016 and the create-react-app didnt compile it so i added babel-loader but still showing me the same error

my babel settings:

Any help would be greatly appreciated. Thank you.

I'm getting an error throw regarding an unexpected token, regarding the import Signature from "./Signature"

I'm not sure why, the first time hitting this page this error doesn't show up but on refresh it does.

I'm using Nextjs setup, I've tried the aws-s3 version of this library and that has no issue however I get a different error to do with unable to split file name of undefined.

import S3FileUpload from 'react-s3';
// Optional Import
import { uploadFile } from 'react-s3';

(function (exports, require, module, __filename, __dirname) { import Signature from "./Signature";
                                                                     ^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/kwu/projects/c2b--booking-form/node_modules/react-s3/index.js:1:80)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

.doc is getting changed to .msword and sometimes .document
.svg is getting changed to .svg+xml

How can we stop this issue?

Hi. I installed the package and when I want to import it, I got this error:

  Try `npm install @types/aws-s3` if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-s3';```

What's wrong here?

I am not able to upload files through this plugin. I always get 403 status (forbidden) when I hit uploadFile function. Can you please walk me through settings to be done on AWS? Please help

My issue is very weird. I am using the upload function to write an image into an S3 Bucket. When I execute the upload function, I get an error saying "Fetch Failed" but when I check my S3 Bucket on AWS, the image is there.

So basically, I am getting a "Fetch Failed" error even though it did not fail since my image object gets written to my S3 Bucket.

I am not sure if this is a bug with this library or with my permissions on AWS.

My current fix includes adding a catch error to the upload's fetch request and also hard-coding a status value to the promise. Cleary this is not a real solution since I am basically just ignoring the error.

      await fetch(url, { method: "post", body: fd })
      .catch(error => { console.log('error uploading', error) })
      return Promise.resolve({
        bucket: this.config.bucketName,
        key: `${this.config.dirName ? this.config.dirName + "/" : ""}${fileName}`,
        location: `${url}/${this.config.dirName ? this.config.dirName + "/" : ""}${fileName}`,
        status: 200
      });

I'm not sure why I get this when I do uploadFile

When use us-east-1 in config.region it generates an invalid URL.

• Generated URL for us-east-1: https://<bucket>.s3-us-east-1.amazonaws.com/
• Expected URL for us-east-1: https://<bucket>.s3.amazonaws.com/ or https://<bucket>.s3.us-east-1.amazonaws.com/ (not sure about the last one)

I want to upload in s3 but different awsUrl, e.g ams3.digitaloceanspaces.com, can i do this ?.

If i want save my image in root s3. I can't save they there.

am uploading profile pics to aws s3 ,but i want to change the image names before uploading , i don't want to use the File constructor because some browsers doesn't support it

The same date is used over multiple requests, this causes the clock to be way off sync over a long period of time.
which is cause the server to reject the upload with the following error : 403 -Invalid according to Policy: Policy expired.
i suggest turning the date into a function that is called on each request.

Hi Team,

Iam facing this issue when iam using

npm run build (for my production)

Failed to minify the code from this file

./node_modules/react-s3/lib/ReactS3.js:6

Read more here: http://bit.ly/2tRViJ9

Iam not able to get what is wrong it would be great help if someone help me in this regard

No way to add object tagging

can we use progress feature callback in master npm build

Here is the error i got

Object.defineProperty(webpack_exports, "__esModule", { value: true });\n\n// CONCATENATED MODULE: ./node_modules/react-s3/lib/Signature.js\nconst Crypto = webpack_require(1193);\n\nclass Signature {\n static getSignature(config, date, policyBase64) {\n const getSignatureKey = (Crypto, key, dateStamp, regionName) => {\n const kDate = Crypto.HmacSHA256(dateStamp, "AWS4" + key);\n const kRegion = Crypto.HmacSHA256(regionName, kDate);\n const kService = Crypto.HmacSHA256('s3', kRegion);\n const kSigning = Crypto.HmacSHA256("aws4_request", kService);\n return kSigning;\n };\n const signature = policyEncoded => {\n return Crypto.HmacSHA256(policyEncoded, getSignatureKey(Crypto, config.secretAccessKey, date, config.region, "s3")).toString(Crypto.enc.Hex);\n };\n return signature(policyBase64);\n }\n}\n// EXTERNAL MODULE: ./node_modules/react-s3/lib/Policy.js\nvar Policy = webpack_require(1217);\n\n// EXTERNAL MODULE: ./node_modules/react-s3/lib/Date.js\nvar lib_Date = webpack_require(558);\n\n// CONCATENATED MODULE: ./node_modules/react-s3/lib/ReactS3.js\n\n\n\n\nclass ReactS3_ReactS3 {\n static upload(file, config) {\n const fd = new FormData();\n const key = ${config.albumName}/ + file.name;\n const url = https://${config.bucketName}.s3.amazonaws.com/;\n fd.append('key', key);\n fd.append('acl', 'public-read');\n fd.append('Content-Type', file.type);\n fd.append('x-amz-meta-uuid', '14365123651274');\n fd.append('x-amz-server-side-encryption', 'AES256');\n fd.append('X-Amz-Credential', ${config.accessKeyId}/${lib_Date[\"b\" /* dateYMD */]}/${config.region}/s3/aws4_request);\n fd.append('X-Amz-Algorithm', 'AWS4-HMAC-SHA256');\n fd.append('X-Amz-Date', lib_Date["c" /* xAmzDate /]);\n fd.append('x-amz-meta-tag', '');\n fd.append('Policy', Policy["a" / default /].getPolicy(config));\n fd.append('X-Amz-Signature', Signature.getSignature(config, lib_Date["b" / dateYMD /], Policy["a" / default /].getPolicy(config)));\n fd.append("file", file);\n return new Promise(async (resolve, reject) => {\n const errorHandler = fn => {\n return fn.then(data => [null, data]).catch(err => [err]);\n };\n const uploadResult = async () => {\n let err, result;\n [err, result] = await errorHandler(fetch(url, {\n method: 'post',\n headers: {\n fd\n },\n body: fd\n }));\n if (err) reject(err);\n resolve({\n bucket: config.bucketName,\n key: ${config.albumName}/${file.name},\n location: ${url}${config.albumName}/${file.name},\n result: result\n });\n };\n uploadResult();\n });\n }\n static delete(fileName, config) {\n const fd = new FormData();\n const url = https://${config.bucketName}.s3-${config.region}.amazonaws.com/${config.albumName}/${fileName};\n fd.append('Date', lib_Date["c" / xAmzDate /]);\n fd.append('X-Amz-Date', lib_Date["c" / xAmzDate /]);\n fd.append('Authorization', Signature.getSignature(config, lib_Date["b" / dateYMD /], Policy["a" / default /].getPolicy(config)));\n fd.append('Content-Type', 'text/plain');\n return new Promise(async (resolve, reject) => {\n const errorHandler = fn => {\n return fn.then(data => [null, data]).catch(err => [err]);\n };\n const deleteResult = async () => {\n let err, result;\n [err, result] = await errorHandler(fetch(url, {\n method: 'delete',\n headers: {\n fd\n }\n }));\n if (err) reject(err);\n resolve({\n ok: result.ok,\n status: result.status,\n message: 'File Deleted',\n fileName: fileName\n });\n };\n deleteResult();\n });\n }\n}\n/ harmony default export */ var lib_ReactS3 = webpack_exports["default"] = (ReactS3_ReactS3);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvcmVhY3QtczMvbGliL1NpZ25hdHVyZS5qcz80ZmViIiwid2VicGFjazovLy8uL25vZGVfbW9kdWxlcy9yZWFjdC1zMy9saWIvUmVhY3RTMy5qcz9iMGFmIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBOztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxDOzs7Ozs7OztBQ2hCQTtBQUNBO0FBQzJDOztBQUUzQztBQUNBO0FBQ0E7QUFDQSx1QkFBdUIsaUJBQWlCO0FBQ3hDLCtCQUErQixrQkFBa0I7QUFDakQ7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLHlDQUF5QyxtQkFBbUIsR0FBRyw0QkFBUSxHQUFHLGNBQWM7QUFDeEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxxQkFBcUI7QUFDckI7QUFDQSxpQkFBaUI7QUFDakI7QUFDQTtBQUNBO0FBQ0EsNEJBQTRCLGlCQUFpQixHQUFHLFVBQVU7QUFDMUQsaUNBQWlDLElBQUksRUFBRSxpQkFBaUIsR0FBRyxVQUFVO0FBQ3JFO0FBQ0EsaUJBQWlCO0FBQ2pCO0FBQ0E7QUFDQSxTQUFTO0FBQ1Q7QUFDQTtBQUNBO0FBQ0EsK0JBQStCLGtCQUFrQixNQUFNLGNBQWMsaUJBQWlCLGlCQUFpQixHQUFHLFNBQVM7QUFDbkg7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsaUJBQWlCO0FBQ2pCO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLGlCQUFpQjtBQUNqQjtBQUNBO0FBQ0EsU0FBUztBQUNUO0FBQ0E7QUFDQSIsImZpbGUiOiIxMTkyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgQ3J5cHRvID0gcmVxdWlyZSgnY3J5cHRvLWpzJyk7XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIFNpZ25hdHVyZSB7XG4gICAgc3RhdGljIGdldFNpZ25hdHVyZShjb25maWcsIGRhdGUsIHBvbGljeUJhc2U2NCkge1xuICAgICAgICBjb25zdCBnZXRTaWduYXR1cmVLZXkgPSAoQ3J5cHRvLCBrZXksIGRhdGVTdGFtcCwgcmVnaW9uTmFtZSkgPT4ge1xuICAgICAgICAgICAgY29uc3Qga0RhdGUgPSBDcnlwdG8uSG1hY1NIQTI1NihkYXRlU3RhbXAsIFwiQVdTNFwiICsga2V5KTtcbiAgICAgICAgICAgIGNvbnN0IGtSZWdpb24gPSBDcnlwdG8uSG1hY1NIQTI1NihyZWdpb25OYW1lLCBrRGF0ZSk7XG4gICAgICAgICAgICBjb25zdCBrU2VydmljZSA9IENyeXB0by5IbWFjU0hBMjU2KCdzMycsIGtSZWdpb24pO1xuICAgICAgICAgICAgY29uc3Qga1NpZ25pbmcgPSBDcnlwdG8uSG1hY1NIQTI1NihcImF3czRfcmVxdWVzdFwiLCBrU2VydmljZSk7XG4gICAgICAgICAgICByZXR1cm4ga1NpZ25pbmc7XG4gICAgICAgIH07XG4gICAgICAgIGNvbnN0IHNpZ25hdHVyZSA9IHBvbGljeUVuY29kZWQgPT4ge1xuICAgICAgICAgICAgcmV0dXJuIENyeXB0by5IbWFjU0hBMjU2KHBvbGljeUVuY29kZWQsIGdldFNpZ25hdHVyZUtleShDcnlwdG8sIGNvbmZpZy5zZWNyZXRBY2Nlc3NLZXksIGRhdGUsIGNvbmZpZy5yZWdpb24sIFwiczNcIikpLnRvU3RyaW5nKENyeXB0by5lbmMuSGV4KTtcbiAgICAgICAgfTtcbiAgICAgICAgcmV0dXJuIHNpZ25hdHVyZShwb2xpY3lCYXNlNjQpO1xuICAgIH1cbn1cblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL25vZGVfbW9kdWxlcy9yZWFjdC1zMy9saWIvU2lnbmF0dXJlLmpzXG4vLyBtb2R1bGUgaWQgPSBudWxsXG4vLyBtb2R1bGUgY2h1bmtzID0gIiwiaW1wb3J0IFNpZ25hdHVyZSBmcm9tICcuL1NpZ25hdHVyZSc7XG5pbXBvcnQgUG9saWN5IGZyb20gJy4vUG9saWN5JztcbmltcG9ydCB7IGRhdGVJU09TdHJpbmcsIHhBbXpEYXRlLCBkYXRlWU1EIH0gZnJvbSAnLi9EYXRlJztcblxuY2xhc3MgUmVhY3RTMyB7XG4gICAgc3RhdGljIHVwbG9hZChmaWxlLCBjb25maWcpIHtcbiAgICAgICAgY29uc3QgZmQgPSBuZXcgRm9ybURhdGEoKTtcbiAgICAgICAgY29uc3Qga2V5ID0gYCR7Y29uZmlnLmFsYnVtTmFtZX0vYCArIGZpbGUubmFtZTtcbiAgICAgICAgY29uc3QgdXJsID0gYGh0dHBzOi8vJHtjb25maWcuYnVja2V0TmFtZX0uczMuYW1hem9uYXdzLmNvbS9gO1xuICAgICAgICBmZC5hcHBlbmQoJ2tleScsIGtleSk7XG4gICAgICAgIGZkLmFwcGVuZCgnYWNsJywgJ3B1YmxpYy1yZWFkJyk7XG4gICAgICAgIGZkLmFwcGVuZCgnQ29udGVudC1UeXBlJywgZmlsZS50eXBlKTtcbiAgICAgICAgZmQuYXBwZW5kKCd4LWFtei1tZXRhLXV1aWQnLCAnMTQzNjUxMjM2NTEyNzQnKTtcbiAgICAgICAgZmQuYXBwZW5kKCd4LWFtei1zZXJ2ZXItc2lkZS1lbmNyeXB0aW9uJywgJ0FFUzI1NicpO1xuICAgICAgICBmZC5hcHBlbmQoJ1gtQW16LUNyZWRlbnRpYWwnLCBgJHtjb25maWcuYWNjZXNzS2V5SWR9LyR7ZGF0ZVlNRH0vJHtjb25maWcucmVnaW9ufS9zMy9hd3M0X3JlcXVlc3RgKTtcbiAgICAgICAgZmQuYXBwZW5kKCdYLUFtei1BbGdvcml0aG0nLCAnQVdTNC1ITUFDLVNIQTI1NicpO1xuICAgICAgICBmZC5hcHBlbmQoJ1gtQW16LURhdGUnLCB4QW16RGF0ZSk7XG4gICAgICAgIGZkLmFwcGVuZCgneC1hbXotbWV0YS10YWcnLCAnJyk7XG4gICAgICAgIGZkLmFwcGVuZCgnUG9saWN5JywgUG9saWN5LmdldFBvbGljeShjb25maWcpKTtcbiAgICAgICAgZmQuYXBwZW5kKCdYLUFtei1TaWduYXR1cmUnLCBTaWduYXR1cmUuZ2V0U2lnbmF0dXJlKGNvbmZpZywgZGF0ZVlNRCwgUG9saWN5LmdldFBvbGljeShjb25maWcpKSk7XG4gICAgICAgIGZkLmFwcGVuZChcImZpbGVcIiwgZmlsZSk7XG4gICAgICAgIHJldHVybiBuZXcgUHJvbWlzZShhc3luYyAocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBlcnJvckhhbmRsZXIgPSBmbiA9PiB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIGZuLnRoZW4oZGF0YSA9PiBbbnVsbCwgZGF0YV0pLmNhdGNoKGVyciA9PiBbZXJyXSk7XG4gICAgICAgICAgICB9O1xuICAgICAgICAgICAgY29uc3QgdXBsb2FkUmVzdWx0ID0gYXN5bmMgKCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBlcnIsIHJlc3VsdDtcbiAgICAgICAgICAgICAgICBbZXJyLCByZXN1bHRdID0gYXdhaXQgZXJyb3JIYW5kbGVyKGZldGNoKHVybCwge1xuICAgICAgICAgICAgICAgICAgICBtZXRob2Q6ICdwb3N0JyxcbiAgICAgICAgICAgICAgICAgICAgaGVhZGVyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgZmRcbiAgICAgICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICAgICAgYm9keTogZmRcbiAgICAgICAgICAgICAgICB9KSk7XG4gICAgICAgICAgICAgICAgaWYgKGVycikgcmVqZWN0KGVycik7XG4gICAgICAgICAgICAgICAgcmVzb2x2ZSh7XG4gICAgICAgICAgICAgICAgICAgIGJ1Y2tldDogY29uZmlnLmJ1Y2tldE5hbWUsXG4gICAgICAgICAgICAgICAgICAgIGtleTogYCR7Y29uZmlnLmFsYnVtTmFtZX0vJHtmaWxlLm5hbWV9YCxcbiAgICAgICAgICAgICAgICAgICAgbG9jYXRpb246IGAke3VybH0ke2NvbmZpZy5hbGJ1bU5hbWV9LyR7ZmlsZS5uYW1lfWAsXG4gICAgICAgICAgICAgICAgICAgIHJlc3VsdDogcmVzdWx0XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9O1xuICAgICAgICAgICAgdXBsb2FkUmVzdWx0KCk7XG4gICAgICAgIH0pO1xuICAgIH1cbiAgICBzdGF0aWMgZGVsZXRlKGZpbGVOYW1lLCBjb25maWcpIHtcbiAgICAgICAgY29uc3QgZmQgPSBuZXcgRm9ybURhdGEoKTtcbiAgICAgICAgY29uc3QgdXJsID0gYGh0dHBzOi8vJHtjb25maWcuYnVja2V0TmFtZX0uczMtJHtjb25maWcucmVnaW9ufS5hbWF6b25hd3MuY29tLyR7Y29uZmlnLmFsYnVtTmFtZX0vJHtmaWxlTmFtZX1gO1xuICAgICAgICBmZC5hcHBlbmQoJ0RhdGUnLCB4QW16RGF0ZSk7XG4gICAgICAgIGZkLmFwcGVuZCgnWC1BbXotRGF0ZScsIHhBbXpEYXRlKTtcbiAgICAgICAgZmQuYXBwZW5kKCdBdXRob3JpemF0aW9uJywgU2lnbmF0dXJlLmdldFNpZ25hdHVyZShjb25maWcsIGRhdGVZTUQsIFBvbGljeS5nZXRQb2xpY3koY29uZmlnKSkpO1xuICAgICAgICBmZC5hcHBlbmQoJ0NvbnRlbnQtVHlwZScsICd0ZXh0L3BsYWluJyk7XG4gICAgICAgIHJldHVybiBuZXcgUHJvbWlzZShhc3luYyAocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBlcnJvckhhbmRsZXIgPSBmbiA9PiB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIGZuLnRoZW4oZGF0YSA9PiBbbnVsbCwgZGF0YV0pLmNhdGNoKGVyciA9PiBbZXJyXSk7XG4gICAgICAgICAgICB9O1xuICAgICAgICAgICAgY29uc3QgZGVsZXRlUmVzdWx0ID0gYXN5bmMgKCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBlcnIsIHJlc3VsdDtcbiAgICAgICAgICAgICAgICBbZXJyLCByZXN1bHRdID0gYXdhaXQgZXJyb3JIYW5kbGVyKGZldGNoKHVybCwge1xuICAgICAgICAgICAgICAgICAgICBtZXRob2Q6ICdkZWxldGUnLFxuICAgICAgICAgICAgICAgICAgICBoZWFkZXJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBmZFxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSkpO1xuICAgICAgICAgICAgICAgIGlmIChlcnIpIHJlamVjdChlcnIpO1xuICAgICAgICAgICAgICAgIHJlc29sdmUoe1xuICAgICAgICAgICAgICAgICAgICBvazogcmVzdWx0Lm9rLFxuICAgICAgICAgICAgICAgICAgICBzdGF0dXM6IHJlc3VsdC5zdGF0dXMsXG4gICAgICAgICAgICAgICAgICAgIG1lc3NhZ2U6ICdGaWxlIERlbGV0ZWQnLFxuICAgICAgICAgICAgICAgICAgICBmaWxlTmFtZTogZmlsZU5hbWVcbiAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIH07XG4gICAgICAgICAgICBkZWxldGVSZXN1bHQoKTtcbiAgICAgICAgfSk7XG4gICAgfVxufVxuZXhwb3J0IGRlZmF1bHQgUmVhY3RTMztcblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL25vZGVfbW9kdWxlcy9yZWFjdC1zMy9saWIvUmVhY3RTMy5qc1xuLy8gbW9kdWxlIGlkID0gbnVsbFxuLy8gbW9kdWxlIGNodW5rcyA9ICJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///1192\n"

My concern is that the credentials for s3 being accessible in Client side rendering front-end framework like react. How do I make sure the credentials aren't public?

I have tried figuring out why I am getting this error not sure what else to do. Setup is consistent with suggested setup, any ideas?

Hello ,

It's GIve me

SyntaxError: missing : after property id
static async uploadFile(file, config) {

For Mozilla browser .

Working Fine in Chrome

Please gives solution

There is a bug that relates to how images are stored in S3. For all images, the name of the image is used to store it in S3. Which means let's say I am adding a pet husky and I am uploading an image with name mypet.jpeg.

Later if you adding a new image for yourself with your pet image mypet.jpeg. Then it will override the previous image uploaded by me. Thats why we should be using a GUID for images.

When uploading images, remove the name of the image that is uploaded and instead use a GUID for the S3 image name.

example if I am uploading mypet.jpg then change the file name to 09dacb08-378d-408c-abb1-379b558cd604.jpeg and then upload to S3. This should be how it needs to be done for all image uploads.

Hi, I'm a developer from China.

Our team want to upload files to aws-china with aws-s3. But we found that the url in S3Client.js does not apply to China. After trying, we found that we need to change the url to use this：

const url = `https://${config.bucketName}.s3.${config.region}.amazonaws.com.cn/`

We don't know if there are other countries with local aws. So maybe we can't solve this problem through PR. We especially hope that you can help us solve this problem. Thank you very much!

I look forward to hearing from you.

Hi all, I'm having trouble uploading with the package. When I try to upload an image/jpeg I get the net::ERR_CERT_COMMON_NAME_INVALID. Does it have something to do with my policy?

Config ->
const config = {
			bucketName: "bucket",
			dirName: "avatar" ,
			region: "us-east-1",
			accessKeyId: "123123123123123123123123123",
			secretAccessKey: "123123123123123213213213213123213213",
		};

Policy ->
{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow all kind of http requests originating from http://www.your-website.com and https://www.your-website.com",
            "Effect": "Allow",
            "Principal": *
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::bucket/*",
            "Condition": {
                "StringEquals": {
                    "s3:x-amz-acl": [
                        "public-read"
                    ]
                }
            }
        }
    ]
}

On Including the react-s3 library in my component the following error appears:

ERROR in react-s3/lib/ReactS3.js
Module parse failed: /var/www/html/re4m_web/node_modules/react-s3/lib/ReactS3.js Unexpected token (7:17)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:17)
at Parser.pp$4.raise (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp.expect (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:597:28)
at Parser.pp$3.parseMethod (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:2071:10)
at Parser.pp$1.parseClassMethod (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:1137:25)
at Parser.pp$1.parseClass (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:1118:14)
at Parser.pp$1.parseStatement (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:697:19)
at Parser.pp$1.parseTopLevel (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/var/www/html/re4m_web/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/var/www/html/re4m_web/node_modules/webpack/lib/Parser.js:902:15)
at NormalModule. (/var/www/html/re4m_web/node_modules/webpack/lib/NormalModule.js:104:16)
at NormalModule.onModuleBuild (/var/www/html/re4m_web/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/var/www/html/re4m_web/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /var/www/html/re4m_web/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/var/www/html/re4m_web/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
@ ./~/react-s3/index.js 1:17-41

Hello. First thanks for this library.

I'm having a problem when trying to upload a file from the frontend. I'm currently doing so like this:

let S3Client = new S3({
      bucketName: 'bucket',
      region: 'eu-east-1',
      accessKeyId: 'id',
      secretAccessKey: 'sec',
      s3Url: 'https://bucket.s3.amazonaws.com/'
});
S3Client
      .uploadFile(document.querySelector('[type="file"]').files[0])
      .then(response => console.log(response))
      .catch(err => console.error(err))

I'm not sure if this is a correct approach? I'm only getting 400 bad request

I have been able to delete a file with the same configuration (S3Client.deleteFile('a.file'))

In readme example, file isn't defined so I'm not sure what's the expected or how should I send the file? Any help?

Thanks!

is there any way i can change file name before uploading

I am getting this error when I use the first filename argument

const filename = 'hello-world.jpg'

const S3Client = new S3(config);

` upload = (e) => {
console.log(e.target.files[0])

S3Client.uploadFile(filename, e.target.files[0])
.then(data => console.log(data))
.catch(err => console.error(err))

} `

Thanks, guys

Please advise what should be transferred as file for command ReactS3.upload(file, config). Some object or pathname?

Hi Team,

we have implemented s3 bucket policy Bcoz
In current code by default it is uploading as a public and every one is able to open it
How to add the ACL in the config while uploading

const config = {
bucketName: '',
dirName: prefixPath, /* optional */
region: 'us-east-1',
accessKeyId: '',
secretAccessKey: '',
ACL: 'private'
}

when i upload a file on s3 bucket it rename the file.

for example -
file name- abc.xlsx
in response the uploaded file name is changed
like- my-awesome-file.xlsx.vnd.openxmlformats-officedocument.spreadsheetml.sheet

i have also checked its not issue of s3 bucket when i directly upload file on s3 bucket it upload with same name.

its an issue it should upload with same name

I see in the readme you have it described as an image uploading library for react. Is there a specific reason it doesn't support all filetypes? If not would you mind a pull request that allows for any type to be uploaded in the policy.

Hey man. First off I love the simplicity of the plug-in, really dig it. Unfortunately though when I try an upload new versions of my music project files, the url extension reads undefined and I'm unable to open them when downloaded. The extension for Ableton files is '.als' in case you need it. Any way I can fix this on my end?

Hi, i'm trying to upload a file, but i got an error

Error: Must provide a filename in order to delete anything in your bucket

The problem is in the ErrorThrower class, specifically in fileName param, using the uploadFile method

Thanks

I use CRA and when trying to create a build file receive the next error:
Failed to minify the code from this file:
./node_modules/react-s3/lib/ReactS3.js:6
Read more here: http://bit.ly/2tRViJ9
According to the given link it's problem that the library is published not production ready. How it can be fixed?
Thank you in advance for answer

Hello,

Just wanna know how will we add other metadata such as cache-control upon uploading?

Thanks!

Hi, when i installed module for a first time everything was fine, but when I turned off my application and turn on again I got this error:

I tried to delete module and install it again (with command npm install --save react-s3) but bug is not fixed. Any help?

Hi,

How can use this for uploading any file? not just images

Thanks!

Image is getting changed on S3, i have uploaded image on s3 but its a transparent square instead of actual image.

Hi.
When I tried delete a file the url is sending like this:
https://__BUCKETNAME.s3-__REGION.amazonaws.com/__DIRNAME/__FILENAME
there is a - instead of . after s3. So the correctly url must be:
https://__BUCKETNAME.s3.__REGION.amazonaws.com/__DIRNAME/__FILENAME
Can you help me?
Thanks!

Hello,

I know this isn't an issue with the library. It is most likely a user error but if you could help I would appreciate it!

I keep getting a 403 Forbidden error when trying to upload. I currently have my s3 bucket access control on public so that shouldn't be the issue.

Here is my code...

the config:

constructor(props) {
        super(props)

        this.state = {
            accepted: [],
            rejected: [],
            croppedImage: '',
            src: null
        }

        this.s3Config = {
            bucketName: 'myActualBucketName',
            dirName: 'shop_logo',
            region: 'us-east-1',
            accessKeyId: 'myAccessKey',
            secretAccessKey: mySecretAccessKey',
        }

        this.onChange = this.onChange.bind(this);
        this.onCancelClicked = this.onCancelClicked.bind(this)
        this.onSaveClicked = this.onSaveClicked.bind(this)
    }

the upload:

onSaveClicked() {
        uploadFile(this.state.croppedImage, this.s3Config)
            .then(data => console.log(data))
            .catch(err => console.error("error", err))
    }

and then I did put this in my bucket policy on aws

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow all kind of http requests originating from http://www.your-website.com and https://www.your-website.com",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::myActualBucketName/*"
        }
    ]
}

I'm sure if i am setting up the bucket policy right. not really sure what this does.
I did change some of the bucket names and keys just for this post.

Thanks for any help!

Hi
Can i upload array of file from single request .

Thanks .