Any way to prevent upload to do additional checks before uploading?

Uppy
1

Consider the following usage case: User must upload 3 JPG images (required) and 1 PDF/DOC (optional). We have hidden fields on the page in a separate form running JQ validation, extraneous to the need described below.

Problems:

  • Uppy can not throw custom errors for multiple file types
  • therefore we are using maxNumberOfFiles=4, minNumberOfFiles=3, allowedFileTypes: ['image/*', 'application/pdf'],
  • Uppy allows a situation where users could satisfy multiple uploads which would then have different assembly IDs for transloadit
  • therefore we want to restrict/validate uploads via JS
  • ideally we want to allow 3 images, 3 images and 1 PDF - but prevent 3 PDF’s or 2PNG files, ect…

Attempting to hook into the following functions does not PREVENT the upload, consider this logic:

uppy.on('upload', (data) => {
	  	console.log(data);
		// IF 3 images and 1 PDF, then continue
		return false; //else, prevent upload
	});
	
	uppy.upload().then((result) => {
	  	console.log(result);
		// IF 3 images and 1 PDF, then continue
		return false; //else, prevent upload
	});

I would have thought return false; would have prevented the upload, it does not.

Solutions needed:

  • stop upload from happening when a user clicks on “upload”
  • check if the requirements are met (3 images and/or 1 pdf)
  • note that result/data objects do not seem to contain this valuable information: file type, ext, size

Were there a method to “prevent” upload and also “access” [file type], [ext], [size] data I could easily write the JQvalidator script needed vai hidden fields to prevent an upload.

However, this eludes me. Any ideas?

I was thinking event.preventDefault(); via #uppy_container .uppy-c-btn-primary might work… but I feel like there should be some way to hook into this via uppy.on or uppy.upload() or maybe there is a method such as uppy.OnBeforeUpload() that is not listed?

Lets assume I do just JQ to target the #uppy_container .uppy-c-btn-primary button… problem there is that button does not “exist” on page load… solvable only with JQ and not vanilla JS since elem.onclick is not going to “bind” to a button that does not exist. Also problematic is the button itself does not have an ID I can just target…

I am not seeing how I can extract [file type], [ext], [size] data to perform additional custom checks since that object does not exist till the files reach the Tus Server or Transloadit…

This then creates a paradox, where the only solution is to let the user upload with “some impunity” first and then collect the assembly IDs separately for every file…

perhaps the solution is

  • Stop the upload by targeting the uppy upload button using JQ event.preventDefault();
  • ask for uppy.getFiles() and do my external checks using JQ.validator on hidden fields

Is there any other way?

2

well… this does not work.
So… now I see no way to “prevent an upload” unless there is an Uppy Method for it?

jQuery(document).ready(function($) {
		console.log("JQ loaded");
	
	$(".uppy-c-btn-primary").on('click',function(event){
            event.stopPropagation();
			event.preventDefault();
			console.log("on clicked");
			return false;
        });

	$("body").delegate(".uppy-c-btn-primary", "click", function(event){
            event.stopPropagation();
			event.preventDefault();
			console.log("delegate clicked");
			return false;
	});
	
	$(".uppy-c-btn-primary").live('click', function(event){
			event.stopPropagation();
			event.preventDefault();
			console.log("live clicked");
			return false;
	});
	
	$(".uppy-c-btn-primary").addEventListener('click', function (event) {
			event.stopPropagation();
			event.preventDefault();
			console.log("live clicked");
			return false;
	});
	
	
 });

How can NONE of these work?
I gotta be doing something wrong here…

3

got this working

var CustomCheckUploads;
jQuery(document).ready(function($) {
	
	CustomCheckUploads = function (files) {
	  console.log('CustomCheckUploads happened');
		console.log(files);
		return false;
	}

 }); 

 const uppy = new Uppy.Core({
 onBeforeUpload: (files) => {
			 return CustomCheckUploads(files);
		 },
});

But I am still surprised I was not able to target that <button> elem directly…