File size check about react-s3-uploader HOT 8 OPEN

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 POSTing 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.