Comments (8)
I know it's an old issue but I was with the exactly issue, so I've looking for the documentation and found that using preprocess
prop you could check the file size. Something like below
onPreprocess(file, next) {
if (file.size > maxLenInBytes) {
console.error('Image size is greater than limit')
} else {
next(file);
}
}
<ReactS3Uploader
preprocess={this.onPreprocess}
/>
from react-s3-uploader.
Would someone be able to give an example of how to add file size checking? From the stack overflow link it looks like we are supposed to put this in the "policy variable"
"conditions": [
["content-length-range", 0, 10485760]
]
What is the policy variable and where do we set it using node js?
from react-s3-uploader.
I would like to add to this question: It should be possible to enforce the file size limit on S3's end somehow. Did anyone figure out how to add a policy to the PUT request?
from react-s3-uploader.
looks like it is possible with http://stackoverflow.com/questions/13390343/s3-direct-upload-restricting-file-size-and-type.
Now it begs the question, should we have a hook like onBeforeUpload
that allows us to avoid uploading files in the first place if they violate the conditions we set? Like what happens if you select an EXE or DMG file? Right now they will have to first start the file upload, if there is an s3 policy that rejects it will fail faster and onErrror will be called. If there isn't an s3 policy users will have to wait until the upload is finished and only then see a message the file was rejected.
from react-s3-uploader.
As far as I understand, 'browser-based upload' aka POST
ing form data to https://s3-bucket.s3.amazonaws.com/
is not the same as what we do here. We are creating pre-signed URLs to directly PUT the file.
Like what happens if you select an EXE or DMG file?
On the client side, you can already avoid that already using the accept
option.
Optimally, the solution is two-fold: Prohibit the client from starting the request, but also enforcing the limits in the S3 bucket.
from react-s3-uploader.
@graup totally, that is what I thought too. Note the accept option is only a suggestion list. Users can still select "All files" from the dialog and upload w/e they want.
What ReactDropZone does is have separate calls for onDropAccepted and onDropRejected. https://github.com/okonet/react-dropzone/blob/master/src/index.js#L111
Maybe we can do something like that.
For file types I ended up rolling my own implementation using https://www.npmjs.com/package/attr-accept. The downside it still uploads to s3 first before displaying an error to the user.
from react-s3-uploader.
@andylhansen did you figure out where the "conditions" and policy-variable go?
from react-s3-uploader.
Hello, has anyone found a solution to this?
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.