WARNING: This plugin is not maintained

If you have a desire to continue to develop and support, email me, with pleasure I will give access to the repository.

---

ВНИМАНИЕ: Этот плагин больше не поддерживается

Если у вас есть желание продолжить разработку и поддержку, напишите мне, с удовольствием предоставлю весь необходимый доступ.

---

$.fn.fileapi

jQuery plugin for FileAPI (multiupload, image upload, crop, resize and etc.)

Install

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
	window.FileAPI = {
		  debug: false // debug mode
		, staticPath: '/js/jquery.fileapi/FileAPI/' // path to *.swf
	};
</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.exif.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>

---

Example

<div id="uploader">
	<div class="js-fileapi-wrapper">
		<input type="file" name="files[]" />
	</div>
	<div data-fileapi="active.show" class="progress">
		<div data-fileapi="progress" class="progress__bar"></div>
	</div>
</div>
<script>
	jQuery(function ($){
		$('#uploader').fileapi({
			url: './ctrl.php',
			autoUpload: true,
			accept: 'image/*',
			multiple: true,
			maxSize: FileAPI.MB*10 // max file size
		});
	});
</script>

---

Options

url:String

URL to which the request is sent.<br/> If undefined or empty, it is set to the action property of the file upload form if available.

autoUpload:Boolean

To enable automatic uploads, set this option to true.

data:Object

Additional form data to be sent along with the file uploads can be set using this option.

headers:Object

Additional request headers.

multiple:Boolean

It specifies that multiple files can be selected at once, default true.

accept:String

If the value of the type attribute is file, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers: image/*, audio/*, video/*, etc.

duplicate:Boolean

The ability to upload duplicates, default false.

paramName:String

The parameter name for the file form data (the request argument name).<br/> If undefined or empty, the name property of the file input field is used, or files[] if the file input name property is also empty.

dataType:String

The type of data that is expected back from the server, default json.

chunkSize:Number

Chunk size in bytes, eg: .5 * FileAPI.MB.

chunkUploadRetry:Number

Number of retries during upload chunks.

maxSize:Number

The maximum allowed file size in bytes, by default unlimited.

maxFiles:Number

This option limits the number of files that are allowed to be uploaded using this plugin.

imageSize:Object

Allowable size of uploaded images, eg: { minWidth: 320, minHeight: 240, maxWidth: 3840, maxHeight: 2160 }.

sortFn:Function

Sort function of selected files.

filterFn:Function

Filter function of selected files, eg: function (file, info){ return /^image/.test(file.type) && info.width > 320 }.

imageTransform:Object

Rules of changes the original image on the client (see details).

imageTransform: {
	// resize by max side
	maxWidth: 800,
	maxHeight: 600
}

imageOriginal:Boolean

Sent to the server the original image or not, if defined imageTransform option.

elements:Object

// Default options
elements: {
	// Controls
	ctrl: {
		upload: '[data-fileapi="ctrl.upload"]',
		reset: '[data-fileapi="ctrl.reset"]',
		abort: '[data-fileapi="ctrl.abort"]'
	},
	// Display element depending on files
	empty: {
		show: '[data-fileapi="empty.show"]',
		hide: '[data-fileapi="empty.hide"]'
	},
	// Display element depending on queue state
	emptyQueue: {
		show: '[data-fileapi="emptyQueue.show"]',
		hide: '[data-fileapi="emptyQueue.hide"]'
	},
	// Display element depending on upload state
	active: {
		show: '[data-fileapi="active.show"]',
		hide: '[data-fileapi="active.hide"]'
	},
	// Preview file (single upload)
	preview: {
		el: 0, // css selector
		width: 0,
		height: 0,
		keepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally
	},
	// Total size of queue
	size: '[data-fileapi="size"]',
	// Selected file name
	name: '[data-fileapi="name"]',
	// Progress bar total
	progress: '[data-fileapi="progress"]',
	// Filelist options
	file: {
		// Template
		tpl: '[data-fileapi="file.tpl"]',
		// Progress bar
		progress: '[data-fileapi="file.progress"]',
		// Display element depending on upload state
		active: {
			show: '[data-fileapi="active.show"]',
			hide: '[data-fileapi="active.hide"]'
		},
		// Preview file or icon
		preview: {
			el: 0, // css selector
			get: 0, // eg: function($el, file){ $el.append('<i class="icon icon_'+file.name.split('.').pop()+'"></i>'); }
			width: 0,
			height: 0,
			keepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally
		}
	},
	// Drag and drop
	dnd: {
		// DropZone: selector or element
		el: '[data-fileapi="dnd"]',
		// Hover class
		hover: 'dnd_hover'
	}
}

---

Events

onSelect:Function(evt:$.Event, data:FilesObject)

Retrieve file List, takes two arguments.

$('...').fileapi({
	onSelect: function (evt, data){
		data.all; // All files
		data.files; // Correct files
		if( data.other.length ){
			// errors
			var errors = data.other[0].errors;
			if( errors ){
				errors.maxSize; // File size exceeds the maximum size `@see maxSize`
				errors.maxFiles; // Number of files selected exceeds the maximum `@see maxFiles`
				errors.minWidth; // Width of the image is smaller than the specified `@see imageSize`
				errors.minHeight;
				errors.maxWidth; // Width of the image greater than the specified `@see imageSize`
				errors.maxHeight;
			}
		}
	}
});

onBeforeUpload:Function(evt:$.Event, uiEvt:Object)

Before start uploading.

function (evt, uiEvt){
	var files = uiEvt.files;
	var widget = uiEvt.widget;
	if (files.length > 1000) {
	   return false; // prevent uploading
	}
}

onUpload:Function(evt:$.Event, uiEvt:Object)

Start uploading.

function (evt, uiEvt){
	// Base properties
	var file = uiEvt.file;
	var files = uiEvt.files;
	var widget = uiEvt.widget;
	var xhr = uiEvt.xhr;
}

onFilePrepare:Function(evt:$.Event, uiEvt:Object)

Preparation of data before uploading.

function (evt, uiEvt){
	var file = uiEvt.file;
	uiEvt.options.data.fileType = file.type;
}

onFileUpload:Function(evt:$.Event, uiEvt:Object)

Start upload the same file.

onProgress:Function(evt:$.Event, uiEvt:Object)

Common uploading progress.

function (evt, uiEvt){
	var part = uiEvt.loaded / uiEvt.total;
}

onFileProgress:Function(evt:$.Event, uiEvt:Object)

Progress upload the same file.

function (evt, uiEvt){
	var file = uiEvt.file;
	var part = uiEvt.loaded / uiEvt.total;
}

onComplete:Function(evt:$.Event, uiEvt:Object)

Completion of the entire uploading.

onFileComplete:Function(evt:$.Event, uiEvt:Object)

Completion of uploading the file.

function (evt, uiEvt){
	var error = uiEvt.error;
	var result = uiEvt.result; // server response
}

onDrop:Function(evt:$.Event, data:FilesObject)

Retrieve file List, takes two arguments.

onDropHover:Function(evt:$.Event, uiEvt:Object)

$('#box').fileapi({
	onDropHover: function (evt, uiEvt){
		$(this).toggleClass('dnd_hover', uiEvt.state);
	}
});

onFileRemove(evt:$.Event, file:File)

Removing a file from the queue

function (evt, file){
	if( !confirm('Remove "'+file.name+'"?') ){
		return false;
	}
}

onFileRemoveCompleted(evt:$.Event, file:File)

Removing a file from the queue

function (evt, file){
	// Send ajax-request
	$.post('/remove-ctrl.php', { uid: FileAPI.uid(file) });
}

Cropper

Based on Jсrop.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.FileAPI = { /* options */ };</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>
<script src="/js/jquery.fileapi/jcrop/jquery.Jcrop.min.js"></script>
<link href="/js/jquery.fileapi/jcrop/jquery.Jcrop.min.css" rel="stylesheet" type="text/css"/>

Usage:

$('#userpic').fileapi({
	url: '...',
	accept: 'image/*',
	onSelect: function (imageFile){
		$('#userpic-upload-btn')
			.unbind('.fileapi')
			.bind('click.fileapi', function (){
				$('#userpic').fileapi('upload');
			})
		;

		$('#image-preview').cropper({
			  file: imageFile
			, bgColor: '#fff'
			, maxSize: [320, 240] // viewport max size
			, minSize: [100, 100] // crop min size
			, aspectRatio: 1      // optional, aspect ratio: 0 - disable, >0 - fixed, remove this option: autocalculation from minSize
			, onSelect: function (coords){
				$('#userpic').fileapi('crop', imageFile, coords);
			}
		});
	}
});

---

Customization

$('#upload').fileapi({
	multiple: true,

	// Restores the list of files uploaded earlier *** IE < 9 — NOT SUPPORTED ***
	files: [{
		src: "http://path/to/filename.png",
		type: "image/png",
		name: "filename.png",
		size: 31409,
		data: { id: 999, token: "..." }
	}],

	// Remove a file from the upload queue
	onFileRemove: function (evt, file){
		if( !confirm("Are you sure?") ){
			// Cancel remove
			evt.preventDefault();
		}
	},

	onFileComplete: function (evt, uiEvt){
		var file = uiEvt.file;
		var json = uiEvt.result;

		file.data = {
			id: json.id,
			token: json.token
		};
	},

	onFileRemoveCompleted: function (evt, file){