Merge pull request #1723 from Automattic/add/file-upload-limit

Allow limiting the number of file uploads per field

assets/js/ajax-file-upload.js

@@ -5,15 +5,39 @@ jQuery(function($) {
 			dataType: 'json',
 			dropZone: $(this),
 			url: job_manager_ajax_file_upload.ajax_url.toString().replace( '%%endpoint%%', 'upload_file' ),
-			maxNumberOfFiles: 1,
 			formData: {
 				script: true
 			},
+			change: function() {
+				this.validation_errors = [];
+			},
 			add: function (e, data) {
-				var $file_field     = $( this );
-				var $form           = $file_field.closest( 'form' );
-				var $uploaded_files = $file_field.parent().find('.job-manager-uploaded-files');
-				var uploadErrors    = [];
+				var $file_field      = $( this );
+				var $form            = $file_field.closest( 'form' );
+				var $uploaded_files  = $file_field.parent().find('.job-manager-uploaded-files');
+				var uploadErrors     = [];
+				var fileLimitLeft    = false;
+				var fileLimit        = parseInt( $file_field.data( 'file_limit' ), 10 );
+
+				if ( typeof $file_field.data( 'file_limit_left' ) !== 'undefined' ) {
+					fileLimitLeft = parseInt( $file_field.data( 'file_limit_left' ), 10 );
+				} else if ( typeof fileLimit !== 'undefined' ) {
+					var currentFiles = parseInt( $uploaded_files.children( '.job-manager-uploaded-file' ).length, 10);
+					fileLimitLeft = fileLimit - currentFiles;
+					$file_field.data( 'file_limit_left', fileLimitLeft );
+				}
+
+				if ( false !== fileLimitLeft && fileLimitLeft <= 0 ) {
+					var message = 'Exceeded upload limit';
+					if( $file_field.data( 'file_limit_message' ) ) {
+						message = $file_field.data( 'file_limit_message' );
+					} else if ( typeof job_manager_job_submission !== 'undefined' ) {
+						message = job_manager_job_submission.i18n_over_upload_limit;
+					}
+					message = message.replace( '%d', fileLimit );
+
+					uploadErrors.push( message );
+				}
 
 				// Validate type
 				var allowed_types = $(this).data('file_types');
@@ -27,15 +51,18 @@ jQuery(function($) {
 				}
 
 				if ( uploadErrors.length > 0 ) {
-					window.alert( uploadErrors.join( '\n' ) );
+					this.validation_errors = this.validation_errors.concat( uploadErrors );
 				} else {
+					if ( false !== fileLimitLeft ) {
+						$file_field.data( 'file_limit_left', fileLimitLeft - 1 );
+					}
 					$form.find(':input[type="submit"]').attr( 'disabled', 'disabled' );
 					data.context = $('<progress value="" max="100"></progress>').appendTo( $uploaded_files );
 					data.submit();
 				}
 			},
 			progress: function (e, data) {
-				var progress        = parseInt(data.loaded / data.total * 100, 10);
+				var progress = parseInt( data.loaded / data.total * 100, 10 );
 				data.context.val( progress );
 			},
 			fail: function (e, data) {
@@ -49,6 +76,7 @@ jQuery(function($) {
 				data.context.remove();
 
 				$form.find(':input[type="submit"]').removeAttr( 'disabled' );
+				$file_field.trigger( 'update_status' );
 			},
 			done: function (e, data) {
 				var $file_field     = $( this );
@@ -61,12 +89,12 @@ jQuery(function($) {
 
 				// Handle JSON errors when success is false
 				if( typeof data.result.success !== 'undefined' && ! data.result.success ){
-					window.alert( data.result.data );
+					this.validation_errors.push( data.result.data );
 				}
 
 				$.each(data.result.files, function(index, file) {
 					if ( file.error ) {
-						window.alert( file.error );
+						this.validation_errors.push( file.error );
 					} else {
 						var html;
 						if ( $.inArray( file.extension, image_types ) >= 0 ) {
@@ -88,7 +116,15 @@ jQuery(function($) {
 					}
 				});
 
+				if ( this.validation_errors.length > 0 ) {
+					this.validation_errors = this.validation_errors.filter( function( value, index, self ) {
+						return self.indexOf(value) === index;
+					} );
+					window.alert( this.validation_errors.join( '\n' ) );
+				}
+
 				$form.find(':input[type="submit"]').removeAttr( 'disabled' );
+				$file_field.trigger( 'update_status' );
 			}
 		});
 	});

assets/js/job-submission.js

@@ -1,8 +1,55 @@
 jQuery(document).ready(function($) {
 	$( document.body ).on( 'click', '.job-manager-remove-uploaded-file', function() {
+		var $inputField = $(this).closest( '.fieldset-type-file' ).find( 'input[type=file][multiple][data-file_limit]' );
+
 		$(this).closest( '.job-manager-uploaded-file' ).remove();
+		$inputField.trigger( 'update_status' );
+
 		return false;
 	});
+
+	$( document.body ).on( 'update_status', '.fieldset-type-file input[type=file][multiple][data-file_limit]', function(){
+		var fileLimit     = parseInt( $(this).data( 'file_limit' ), 10 );
+		var currentFiles  = parseInt( $(this).siblings( '.job-manager-uploaded-files' ).first().children( '.job-manager-uploaded-file' ).length, 10);
+		var fileLimitLeft = fileLimit - currentFiles;
+
+		if ( fileLimitLeft > 0 ) {
+			$(this).prop( 'disabled', false );
+		} else {
+			$(this).prop( 'disabled', true );
+		}
+
+		$(this).data( 'file_limit_left', fileLimitLeft );
+	} );
+
+	$( document.body ).on( 'change', '.fieldset-type-file input[type=file][multiple][data-file_limit]', function(){
+		var fileLimit     = parseInt( $(this).data( 'file_limit' ), 10 );
+		var currentFiles  = parseInt( $(this).siblings( '.job-manager-uploaded-files' ).first().children( '.job-manager-uploaded-file' ).length, 10);
+		var fileLimitLeft = fileLimit - currentFiles;
+		var rawElement    = $(this).get(0);
+
+		if ( typeof rawElement.files !== 'undefined' ) {
+			var filesUploaded = parseInt( rawElement.files.length, 10 );
+			if ( fileLimit && filesUploaded > fileLimitLeft ) {
+				var message = job_manager_job_submission.i18n_over_upload_limit;
+				if ($(this).data( 'file_limit_message' ) && typeof $(this).data( 'file_limit_message' ) === 'string' ) {
+					message = $(this).data( 'file_limit_message' );
+				}
+
+				message = message.replace( '%d', fileLimit );
+				rawElement.setCustomValidity( message );
+			} else {
+				rawElement.setCustomValidity( '' );
+			}
+
+			rawElement.reportValidity();
+		}
+
+		return true;
+	} );
+
+	$( '.fieldset-type-file input[type=file][multiple][data-file_limit]' ).trigger( 'update_status' );
+
 	$( document.body ).on( 'submit', '.job-manager-form:not(.prevent-spinner-behavior)', function() {
 		$(this).find( '.spinner' ).addClass( 'is-active' );
 		$(this).find( 'input[type=submit]' ).addClass( 'disabled' ).on( 'click', function() { return false; } );