willwebberley / nodedirectuploader Goto Github PK
View Code? Open in Web Editor NEWCompanion code for the direct-to-S3 uploads Node.js article on Heroku's Dev Center
Home Page: https://devcenter.heroku.com/articles/s3-upload-node
Companion code for the direct-to-S3 uploads Node.js article on Heroku's Dev Center
Home Page: https://devcenter.heroku.com/articles/s3-upload-node
Hi! Thanks for the example.
Unfortunally, the CORS config seems to do not work for me. Does I'm the only one?
The thing that make me saying that is that there is an error on the step/function uploadFile, the xhr return an error 301 (and so on the function alert 'the files couldn't be upload')
Here the error :
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://myApp.herokuapp.com' is therefore not allowed access.
I even tried to had it manually with:
xhr.setRequestHeader('Access-Control-Allow-Headers', '*');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
But still.
I also tried to add more rule to the CORS config so, here the CORS:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedOrigin>http://myApp.herokuapp.com</AllowedOrigin>
<AllowedOrigin>https://myApp.herokuapp.com</AllowedOrigin>
<AllowedHeader>x-amz-*</AllowedHeader>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader> <--- I tried "authorization" at some point suggested by others threads on SO
</CORSRule>
</CORSConfiguration>
What I've missed? Is it a new policy..? idk
EDIT
SO, i was about to say "And I did configure my region correctly"
But I did change the region after created my bucket so in the url I had: us-east-2 but when I copied the url "https://myBuckt.s3.us-east-2.amazonaws.com/" I arrived on a page formatted in xml with a endpoint tag and it gave me the good region :)
Is there option with angular 2 in frontend and node js in backend
when uploading to an s3 bucket in frankfurt, i need to add this line:
aws.config.update({ signatureVersion: 'v4', region: 'eu-central-1' });
inside the method that responds to /sign_s3
.
these issues helped me figure this out:
so req.body is undefined in app.post('/submit_form', function(req, res){...}
see line 33 in app.js
var S3_BUCKET = process.env.S3_BUCKET
Everything works up until the actual sending of the file, where I get a 403 on the PUT request.
I verified all access ids and keys, request signatures, etc.
What code should I post to get help debugging ?
Hi, I've been trying to troubleshoot an issue for about a week now. I've followed the guide, I'm happy to provide examples of code.
I'm getting Cross Origin 403 errors when I publish to heroku (I have a pipeline with a staging and production app).
I'm based in London, UK - and when uploading locally to a bucket (bucket region is set to London, UK) the code works as expected. I notice that when I switch to a bucket with a different EU region that the code stops working locally, leading me to assume that the issue is that regions between the bucket and the app have to be the same?
I set the regions of both (heroku)) apps to 'EU'. After some googling, I've seen a post that says that Heroku's EU servers are in the region 'eu-west-1' (Ireland). I've tried setting up all 4 EU regions of S3 bucket and publishing to heroku and getting the same error.
Can someone let me know if I'm on the right track? fom Heroku: "A single bucket typically stores the files, assets and uploads for an application. To create a bucket access the S3 section of the AWS Management Console and create a new bucket in the US Standard region."
Logically this wouldn't make sense to me if the app is hosted in the EU region.
Jay
This example shows how to upload a file, but how do you display the file after upload?
Hello,
I'm just getting familiar with Amazon S3 and this tutorial has been really helpful. However, one thing I noticed is that my Amazon Access Key appears in the client network requests as "AMZ-Credential". Is this expected -- what steps can be taken to hide the value from end-users?
**The key was visible on both local and heroku deployed app, which I've since taken down.
I used your code as it is. I left the app.post('/save-details', (req, res) => {}); function blank. However, I entered the configuration access keys, i.e., aws-access-id, aws-secret-key, s3-bucket, in a hidden config file, and referenced them in app.js file. Also, I filled aws s3 Bucket permissions according to the instructions given on Heroku. If you wish, you can look at my code at Brian1111/ndu.
When I run the app on localhost and upload an image, Chrome tab displays a rotating circle busy sign. No file is being uploaded to aws s3 Bucket. In addition, Nodemon displays the following message: "message: 'Missing required key 'Bucket' in params', code: 'MissingRequiredParameter',"
Should I write any code for the app.post('/save-details',) function to make the NodeDirectUploader app work?
I am PUTting files to S3 via ajax requests and about 50% of the time I get ERR_CONNECTION_RESET errors.
I know the requests are signed correctly -- any ideas what may be causing this? Again, this is an intermittent problem that I see from multiple locations and machines.
http://stackoverflow.com/questions/22798774/err-connection-reset-when-putting-to-s3
I get a correct and successful S3 Signed JSON from S3, but when i try to do the PUT to my Bucket it throws "Error: Request failed with status code 404", any idea of what could be the problem?. Thank's
Entered into an error while running the command Heroku local because of the environment variable. So could you add a simple note to anyone following up on the tutorial to consider that before running Heroku locally?
When I try to upload the file I get file can not be uploaded. I have set all the environment variables but still I get that error.
I keep geting 403 errors. I thought it was related to special characters in the file name, but it happens even with the simplest filenames.
Is it possible that the problem regards the S3 Region? I'm creating all my buckets in US Standard. ¿Perhaps I should use a specific region?
Mac OSx v10.12.6
Firefox 54.0.1
On Firefox I'm getting the following error after the:
const xhr = new XMLHttpRequest();
xhr.open('GET',
XML Parsing Error: not well-formed
Location:
I changed this to an AJAX 'GET' and set dataType and mimeType to 'application/pdf/' but then get:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://S3BUCKET.s3-ap-southeast-2.amazonaws.com/596772d37d3e5f6170d51de9/599be64abbebb505d93f0327/Annexure-1.pdf?AWSAccessKeyId=AWSACCESSKEY&Content-Type=application%2Fpdf&Expires=1503390725&Signature=SIGNATUREU%3D&x-amz-acl=public-read. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Getting : TypeError: Not a buffer <br> at new Hmac (crypto.js:226:17) <br> at Object.Hmac (crypto.js:224:12) <br> at app.post.username (/Users/scott/Code/NodeDirectUploader/app.js:58:28) <br> at callbacks (/Users/scott/Code/NodeDirectUploader/node_modules/express/lib/router/index.js:164:37) <br> at param (/Users/scott/Code/NodeDirectUploader/node_modules/express/lib/router/index.js:138:11) <br> at pass (/Users/scott/Code/NodeDirectUploader/node_modules/express/lib/router/index.js:145:5) <br> at Router._dispatch (/Users/scott/Code/NodeDirectUploader/node_modules/express/lib/router/index.js:173:5) <br> at Object.router (/Users/scott/Code/NodeDirectUploader/node_modules/express/lib/router/index.js:33:10) <br> at next (/Users/scott/Code/NodeDirectUploader/node_modules/express/node_modules/connect/lib/proto.js:169:15) <br> at SendStream.error (/Users/scott/Code/NodeDirectUploader/node_modules/express/node_modules/connect/node_modules/serve-static/index.js:88:7)
When trying to test get request to /sign_s3 with both url parameters(s3_object_name and s3_object_type) filled. I believe it has something to do with the put_request string being the incorrect format.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.