Upload Widget with preview dialog and file size validator for video files

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…

  1. Click the widget button to invoke the UploadCare dialog. The Camera and Local Files tabs are enabled.
  2. Click Local Files.
  3. Click the Choose a Local File button.
  4. 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.

Hi @toddhutula,

Thank you for the question and thorough explanation of the issue! I was able to reproduce it. I’ve found that this happens to video files only, and if a file fails validation, it doesn’t get uploaded to storage, but its preview appears in the preview tab instead of the error message. I’ve asked our widget dev team to look into this. I’ll get back to you with an answer as soon as I can.

Hi @toddhutula, this bug has been fixed, see fix: stop video processing when widget changes state by jeetiss · Pull Request #741 · uploadcare/uploadcare-widget · GitHub

The fix will be released with the next widget update.

Thank you for bringing this to our attention :+1:

Thank you Alex, much appreciated.

1 Like