Suggestion for a better user experience

[bleutzinn]

First of all, thanks for creating simpleUpload.js ! Allow me to suggest some small changes in your example where you show the use of allowed file extensions and types.

By using the input field attribute accept the browse dialog is restricted to the allowed file types only. This increases the user experience since the user can not select a file which will be rejected later because of being of an invalid type.

To demonstrate this the "Example #3: Cancellable Uploads (with file type & size filtering)" could be modified into:

JavaScript

$(document).ready(function(){

	allowedExts = 'jpg,jpeg,jpe,jif,jfif,jfi,png,gif';
	allowedTypes = 'image/pjpeg,image/jpeg,image/png,image/x-png,image/gif,image/x-gif';
	$('input[type=file]').attr('accept', allowedTypes);

	$('input[type=file]').change(function(){

		$(this).simpleUpload("/ajax/upload.php", {

			allowedExts: allowedExts.split(','),
			allowedTypes: allowedTypes.split(','),
			maxFileSize: 5000000, //5MB in bytes

			start: function(file){
				//upload started

				this.block = $('<div class="block"></div>');
				this.progressBar = $('<div class="progressBar"></div>');
				this.cancelButton = $('<div class="cancelButton">x</div>');

				/*
				 * Since "this" differs depending on the function in which it is called,
				 * we need to assign "this" to a local variable to be able to access
				 * this.upload.cancel() inside another function call.
				 */

				var that = this;

				this.cancelButton.click(function(){
					that.upload.cancel();
					//now, the cancel callback will be called
				});

				this.block.append(this.progressBar).append(this.cancelButton);
				$('#uploads').append(this.block);

			},

			progress: function(progress){
				//received progress
				this.progressBar.width(progress + "%");
			},

			success: function(data){
				//upload successful

				this.progressBar.remove();
				this.cancelButton.remove();

				if (data.success) {
					//now fill the block with the format of the uploaded file
					var format = data.format;
					var formatDiv = $('<div class="format"></div>').text(format);
					this.block.append(formatDiv);
				} else {
					//our application returned an error
					var error = data.error.message;
					var errorDiv = $('<div class="error"></div>').text(error);
					this.block.append(errorDiv);
				}

			},

			error: function(error){
				//upload failed
				this.progressBar.remove();
				this.cancelButton.remove();
				var error = error.message;
				var errorDiv = $('<div class="error"></div>').text(error);
				this.block.append(errorDiv);
			},

			cancel: function(){
				//upload cancelled
				this.block.fadeOut(400, function(){
					$(this).remove();
				});
			}

		});

	});

});

HTML

<div id="uploads"></div>

<input type="file" name="file" multiple>

Note that the only changes are in the Javascript code (above/before the maxFileSize setting).