Comments (17)
Would be nice if it were more configurable, but right now it uploads as private so that you are request to have a signed URL to access the content. It also prepends a UUID to the file name to ensure that files don't conflict with one another. The idea behind this repo is to use it for user-uploaded files, and you would never want to override files with the same name (presumably).
You should check the response to the PUT request, since it will have the UUID-ed image name, and then you should be able to hit /s3/img/abc-123-def-456-whatever.foo.jpg
to get the image.
from react-s3-uploader.
Hmm.. I don't see any response from the PUT request, although it gives a 200. I can see the file in the s3 bucket, although it appears to uploading to a nameless folder. Maybe my config is weird..
aws.config.update({
accessKeyId: config.aws.id,
secretAccessKey: config.aws.secret,
region: 'us-west-1'
});
Which has worked w/ just using the aws-sdk.
Edit: Also, I will make a PR in the future for the editable params.
from react-s3-uploader.
Sorry, the response is from the /signUpload
call, not the PUT
. See screenshot here: http://screencast.com/t/Q0z2RVXEmINI
The publicUrl
is the URL to hit to retrieve the image. Let me know if that URL doesn't work for you.
from react-s3-uploader.
I have a similar response and that is the URL I'm trying to hit, although my sign call looks a bit different.
And the public URL is the one I've been trying, doesn't seem to be working for me. Is there something additional I need to change in my bucket?
from react-s3-uploader.
PR here #12
from react-s3-uploader.
Hmmm, so neither the publicUrl
nor the signedUrl
work for you? The signed URL goes straight to S3, so if that doesn't work, then I'm not sure what could be wrong. Perhaps your AWS credentials don't have access to the files they upload, and therefore can't create signed URLs for them? Just a guess.
If you can send more information, such as the exact response to the GET /sign
and GET /s3/img
requests, that may be helpful. Also ensuring the file is in S3 with the same name that the response is providing would be good.
from react-s3-uploader.
@seanadkinson So my setup is a React application that is talking to an Express server. The React application is running on 8080 and the Express on 3000. I can see the image in my S3 bucket when I do the upload, but the URL given back by the library is giving me a 404.
Here is the component in my react app:
<ReactS3Uploader
signingUrl="http://127.0.0.1:3000/s3/sign"
accept="image/*"
onProgress={this.onUploadProgress}
onError={this.onUploadError}
onFinish={this.onUploadFinish} />
And here is the express application:
var express = require('express')
var exphbs = require('express-handlebars')
var http = require('http')
var path = require('path')
var aws = require('aws-sdk')
var app = express()
var config = require('config')
// aws config
aws.config.update({
accessKeyId: config.aws.id,
secretAccessKey: config.aws.secret
});
app.engine('handlebars', exphbs({ defaultLayout: 'main' }))
app.set('view engine', 'handlebars')
app.use(express.static(path.join(__dirname, 'public')))
app.set('port', process.env.PORT || 3000)
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
next()
})
app.use('/s3', require('react-s3-uploader/s3router')({ bucket: config.aws.bucket }))
app.listen(app.get('port'), function(port) {
console.log('server running', app.get('port'))
})
from react-s3-uploader.
Can you paste or screenshot the contents of that 404? Curious what the Location
response header shows, and what the request looks like. If you click it, it should show all the request/response headers.
from react-s3-uploader.
from react-s3-uploader.
Hmm, and you can see that 813e5bba...bill.jpg
exists in the howl-us-west-1-666
bucket? When you access this file directly via S3 (for example, to download it or display it in the browser), is there any difference in the URL besides the query parameters?
And if you change the ACL and upload it as public-read
, it works? That sort of tells me that perhaps your AWS credentials that are being used to sign the URL don't have access to reading files. I wonder if you use something like s3cmd
with your application's credentials, can you read files from this bucket that are private?
from react-s3-uploader.
Yes I can see that the file has been uploaded, but the interesting thing is its uploading to a nameless directory so the file path ends up being something like https://s3-us-west-1.amazonaws.com/howl-us-west-1-666//34782836-f796-4fc0-9d1f-c8fd0e6854d6_billy.jpg
Note the //
from react-s3-uploader.
Are you on the latest version, 1.1.8
? There was an issue before with uploading with a "." directory prefix.
from react-s3-uploader.
Yes I'm on the most recent version. Should I specifying my bucket differently? Changing the ACL doesn't seem to work either, when I hit the http://localhost:3000/s3/img/etc...jpg
from react-s3-uploader.
So I did some experimenting and removed the getFileKeyDir(req) + '/' +
from the fileKey
in the router, so it was just var fileKey = filename;
and everything works fine.
I put that back together and then then I passed getFileKeyDir: function(){ return 'foo' }
, into the express route and everything works fine. So it seems to me that without passing a getFileKeyDir
the router is adding that additional slash in the URL and effectively creating an empty directory in the bucket.
So maybe that check for trailing slash function isn't doing what its expected to do?
from react-s3-uploader.
Yeah, must not. Let me look into that real quick.
from react-s3-uploader.
Looks like a recent fix to that getFileKeyDir
wasn't applied to the /sign
, just the /s3/img
call.
Just pushed v1.1.9
. Can you pull that down and make sure it works for you?
Thanks!
from react-s3-uploader.
@seanadkinson good to go on this issue ๐
from react-s3-uploader.
Related Issues (20)
- MultipartUpload support๏ผ HOT 1
- Method Not Allowed 405 PUT Error
- index.d.ts missing methods/props HOT 1
- ReactS3Uploader.propTypes is undefined when deployed on Heroku HOT 3
- Domentation for all the props
- iPhone camera video quality issue
- Console Warning: getDefaultProps is only used on classic React.createClass...
- Content-Type is blank when uploading HOT 3
- How to notify server of image upload? HOT 1
- Is the "accept" prop even being used? Where can we find a list of valid prop arguments? (Duplication of #220) HOT 2
- Return boolean or Promise on file upload
- Can't limit upload size HOT 1
- Getting CORS error on uploading file on AWS S3 HOT 3
- Unable to generate a valid signed upload URL for Digital Ocean spaces
- Type for signingUrlHeaders is wrong HOT 2
- findDOMNode is deprecated in StrictMode HOT 1
- Uncaught ReferenceError: process is not defined - Chrome browser Console error HOT 2
- Upload error 400 after onProgress reports all the way through 100% HOT 4
- Mime-types modules is not intended to be used with browser HOT 2
- Upload error: Could not contact request signing server
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-s3-uploader.