Reject files in client side Dropzone

Catch the event for file added and check the file size to be under the
maximum allowed size for uploads. If file is bigger, a warning message
is shown and the file is rejected.

Change how the max_file_size is passed to client, so that now we have
the exact value in bytes to compare, even though Dropzone will still
be configured with an aproximation in MiB.

Fixes: #25464

core/print_api.php

@@ -2077,9 +2077,9 @@ function print_max_filesize( $p_size, $p_divider = 1000, $p_unit = 'kb' ) {
  * @return void
  */
 function print_dropzone_form_data() {
-	$t_max_file_size = ceil( file_get_max_file_size() / ( 1024*1024 ) );
+	//$t_max_file_size = ceil( file_get_max_file_size() / ( 1024*1024 ) );
 	echo 'data-force-fallback="' . ( config_get( 'dropzone_enabled' ) ? 'false' : 'true' ) . '"' . "\n";
-	echo "\t" . 'data-max-filesize="'. $t_max_file_size . '"' . "\n";
+	echo "\t" . 'data-max-filesize-bytes="'. file_get_max_file_size() . '"' . "\n";
 	$t_allowed_files = config_get( 'allowed_files' );
 	if ( !empty ( $t_allowed_files ) ) {
 		$t_allowed_files = '.' . implode ( ',.', explode ( ',', config_get( 'allowed_files' ) ) );

js/common.js

@@ -525,6 +525,8 @@ function enableDropzone( classPrefix, autoUpload ) {
 	var zone_class =  '.' + classPrefix;
 	var zone = $( zone_class );
 	var form = zone.closest('form');
+	var max_filesize_bytes = zone.data('max-filesize-bytes');
+	var max_filseize_mb = Math.ceil( max_filesize_bytes / ( 1024*1024) );
 	try {
 		var zone_object = new Dropzone( form[0], {
 			forceFallback: zone.data('force-fallback'),
@@ -534,7 +536,7 @@ function enableDropzone( classPrefix, autoUpload ) {
 			previewsContainer: '#' + classPrefix + '-previews-box',
 			uploadMultiple: true,
 			parallelUploads: 100,
-			maxFilesize: zone.data('max-filesize'),
+			maxFilesize: max_filseize_mb,
 			addRemoveLinks: !autoUpload,
 			acceptedFiles: zone.data('accepted-files'),
 			previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
@@ -565,6 +567,20 @@ function enableDropzone( classPrefix, autoUpload ) {
 					document.write( response );
 					document.close();
 				});
+				this.on("addedfile", function (file) {
+					if( file.size > max_filesize_bytes ) {
+						var size_mb = file.size / ( 1024*1024 );
+						var max_mb = max_filesize_bytes / ( 1024*1024 );
+						var dec1 = size_mb < 0.01 ? 3 : 2;
+						var dec2 = max_mb < 0.01 ? 3 : 2;
+						var text = zone.data( 'file-too-big' );
+						text = text.replace( '{{filesize}}', size_mb.toFixed(dec1) );
+						text = text.replace( '{{maxFilesize}}', max_mb.toFixed(dec2) );
+						alert( text );
+						this.removeFile( file );
+						return false;
+					}
+				});
 			},
 			fallback: function() {
 				if( $( "." + classPrefix ).length ) {