vue-dropzone
vue-dropzone copied to clipboard
rowanwins
`acceptedFiles` is not respected for S3 upload
I'm following the example for S3 direct upload, and I've also specified acceptedFiles in the dropzoneOptions config object. I can see the uploaded file shown as an error, however it actually was still uploaded successfully on to my S3 bucket. Here's my code:
// Component
<vue-dropzone
ref="myVueDropzone"
id="dropzone"
:awss3="awss3"
:options="dropzoneOptions"
@vdropzone-error="dropzoneError"
v-on:vdropzone-s3-upload-error="s3UploadError"
v-on:vdropzone-s3-upload-success="s3UploadSuccess"></vue-dropzone>
// Dropzone config object
dropzoneOptions: {
url: 'https://httpbin.org/post',
thumbnailWidth: 150,
maxFilesize: 0.5,
acceptedFiles: 'image/png'
}
// Event handlers
s3UploadError(errorMessage) {
console.error('error: ', errorMessage);
},
s3UploadSuccess(s3ObjectLocation) {
console.log('success: ', s3ObjectLocation);
},
What I saw on UI:
Console log:
Your files are being uploaded successfully, but there's little issue after upload. When file is uploaded to S3 same file is sent to server as well and that functionality is giving the error. (Soon we will have a support to optional file sending to server, we have an active PR for that).
Check your server code where S3 object URL is sent.
On Mar 8, 2018 12:07 AM, "Phuc Tran" [email protected] wrote:
I'm following the example for S3 direct upload, and I've also specified acceptedFiles in the dropzoneOptions config object. I can see the uploaded file shown as an error, however it actually was still uploaded successfully on to my S3 bucket. Here's my code:
// Component<vue-dropzone ref="myVueDropzone" id="dropzone" :awss3="awss3" :options="dropzoneOptions" @vdropzone-error="dropzoneError" v-on:vdropzone-s3-upload-error="s3UploadError" v-on:vdropzone-s3-upload-success="s3UploadSuccess"> // Dropzone config object dropzoneOptions: { url: 'https://httpbin.org/post', thumbnailWidth: 150, maxFilesize: 0.5, acceptedFiles: 'image/png' } // Event handlerss3UploadError(errorMessage) { console.error('error: ', errorMessage); },s3UploadSuccess(s3ObjectLocation) { console.log('success: ', s3ObjectLocation); },
What I saw on UI: [image: UI] https://camo.githubusercontent.com/296301720ecf2e7d5c76068ef24deed6de5f242f/68747470733a2f2f692e696d6775722e636f6d2f6d65416b4d4a452e706e67
Console log: [image: Console] https://camo.githubusercontent.com/f2f5effe0a8a48137a5a7ab5bf2964647ab584a7/68747470733a2f2f692e696d6775722e636f6d2f63486b4b52654b2e706e67
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/rowanwins/vue-dropzone/issues/300, or mute the thread https://github.com/notifications/unsubscribe-auth/AME1nYeqljDugWrTbTHJSTK14-BCfufXks5tcCZLgaJpZM4Sg774 .
Sorry I realized I didn't phrase my question clearly. I actually uploaded a file that has a non-accepted extension so I was expecting to see the error (which is correct on the UI) and the file shouldn't have been sent successfully to S3 (but it was).
FWIW, the same issue applies to max size allowed config option too (i.e. if I try to upload a file that's larger than the allowed size, it'll be shown as an error on the UI. However the file is still actually uploaded to S3).
Also if I don't use the provided S3 direct upload functionality (i.e. do not use the :awss3 option), and just go with the basic setup and provide my own AWS creds through dropzone config, it works as expected for both test case (i.e. if I upload a non supported file type/ larger than allowed file size, it throws an error and the file is NOT uploaded on S3). So I reckon there must be some code for the in-built S3 upload that ignores the error and still go ahead with the actual uploading?
same thing happens with the accept method
for example:
accept(file, done) {
console.log(file.name);
if (file.name === 'large.png') {
const errMsg = "Naha, you don't.";
console.log(errMsg);
done(errMsg);
} else { done(); }
},
as per the docs, if I try to upload a file called 'large.png' it should reject the upload. I confirm that it does go inside the method and does go into the if that should reject the upload, however it has no impact and the file is uploaded anyway
I suspect this is also why the renameFile method does nothing as well when uploading to S3
I'm also hitting this issue. I have a workaround that seems to work until this is fixed properly.
Add a handler for the vdropzone-sending event:
v-on:vdropzone-sending="sending"
In that function, check if the file is accepted. If it's not, cancel the request to S3.
sending: function(file) {
if (!file.accepted) {
// abort doesn't work. Setting the timeout is the only thing I've found that cancels the s3 request.
file.xhr.timeout = 1;
}
}
@vrajroham Any progress on this?
Hey, @vinayakkulkarni not yet honestly! Will be fixing this soon and will update here.
The issue is in the vue-dropzone.vue component file on line 415 at the end of a conditional in the getSignedAndUploadToS3 method.
} else {
promise.then(() => {
setTimeout(() => this.dropzone.processFile(file));
});
}
The processFile function called and doesn't check file.accepted status. Error status files are processed as normal.
} else {
promise.then(() => {
if(file.status != Dropzone.QUEUED) return
setTimeout(() => this.dropzone.processFile(file));
});
}
@vrajroham This is definitely still an issue with a simple fix. Would love to get a PR merged with @ganicus proposed code change!
