Upload Widget with preview dialog and file size validator
Browser: Chrome, Version 81.0.4044.92 (Official Build) (64-bit)
I’m trying to perform file size validation in conjunction with the UploadCare preview dialog.
My file size validator function is called twice after selecting a local file.
In the first invocation of my validator function, the “file info” size property is null.
In the second invocation of my validator function, the “file info” size property is correctly defined as an integer and I can throw an error.
However, the preview dialog still displays the selected video and asks the user if they want to add the file. Even if I throw an error in the second invocation of my validator function.
I would like the preview dialog to NOT display the video and display my error message instead. Also, do not give the user the option of adding the file with an “Add” button.
Using ucare library:
https://ucarecdn.com/libs/widget/3.7.4/uploadcare.js
There’s a single widget defined in the page:
<input type="hidden" role="uploadcare-uploader" id="uploadedVideo"
data-public-key="<public key>"
data-tabs="camera file"
data-clearable="true"
data-preview-step="true"
data-images-only="false"
data-input-accept-types="video/mp4, video/webm, video/ogg" />
Then this script executes on document.ready of the webpage:
$("[role=uploadcare-uploader]").each(function() {
uploadcareWidgetInit($(this));
});
…which then initializes a SingleWidget() with a file size validator…
function uploadcareWidgetInit($input) {
uploadcareWidget = uploadcare.SingleWidget($input);
uploadcareWidget.validators.push(cmp_fileSizeValidation());
The validator function is defined as…
function cmp_fileSizeValidation() {
return function (fileInfo) {
if (!fileInfo.size) {
return;
}
if (fileInfo.size > 104857600) {
throw new Error("fileMaximumSize");
}
};
}
Here are the sequence of events to recreate the behavior…
- Click the widget button to invoke the UploadCare dialog. The Camera and Local Files tabs are enabled.
- Click Local Files.
- Click the Choose a Local File button.
- Select a file greater than the max file size, e.g. greater than 100 MB.
After selecting a file, the cmp_fileSizeValidation() validator is executed. But the “fileInfo” parameter only has a “name” property assigned, the “size” property value is null, so we return from the validator function without error.
During this first validator invocation, the callstack of uploadcare.js seems to be building a file list for the preview panel.
And then the validator is called a second time. But this time the “fileInfo” parameter has the size value assigned and the error is thrown.
throw new Error(“fileMaximumSize”);
During this second validator invocation, the callstack of uploadcare.js seems to be starting the upload of the file.
So when using the UploadCare preview dialog, the video still displays and asks the user “Add this video?” with an Add button. The validation message does not display. I’m assuming the video displays because no error was thrown during the panel building phase.
And If I change the file validator function to throw an error on the first invocation, then the preview dialog behaves correctly by displaying the error message and not displaying the preview of the video.
Is there something I can change (setting or value) that will provide the file size in the first invocation of my validator? Or is this a limitation of the preview dialog and I can not use it together with a file validator? Or maybe there’s some other work-around I can implement in my validator function.
Thanks for your time.