PHPackages                             rubaxa/fileapi - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. rubaxa/fileapi

AbandonedLibrary[File & Storage](/categories/file-storage)

rubaxa/fileapi
==============

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

0.4.11(10y ago)85184.9k↓35.7%188[11 issues](https://github.com/RubaXa/jquery.fileapi/issues)5MITJavaScript

Since Oct 29Pushed 5y ago62 watchersCompare

[ Source](https://github.com/RubaXa/jquery.fileapi)[ Packagist](https://packagist.org/packages/rubaxa/fileapi)[ Docs](https://github.com/RubaXa/jquery.fileapi)[ RSS](/packages/rubaxa-fileapi/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (5)Used By (5)

### WARNING: This plugin is not maintained

[](#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
============

[](#fnfileapi)

jQuery plugin for [FileAPI](https://github.com/mailru/FileAPI/) (multiupload, image upload, crop, resize and etc.)

Install
-------

[](#install)

```

	window.FileAPI = {
		  debug: false // debug mode
		, staticPath: '/js/jquery.fileapi/FileAPI/' // path to *.swf
	};

```

---

Example
-------

[](#example)

```

	jQuery(function ($){
		$('#uploader').fileapi({
			url: './ctrl.php',
			autoUpload: true,
			accept: 'image/*',
			multiple: true,
			maxSize: FileAPI.MB*10 // max file size
		});
	});

```

---

Options
-------

[](#options)

### url`:String`

[](#urlstring)

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

### autoUpload`:Boolean`

[](#autouploadboolean)

To enable automatic uploads, set this option to `true`.

### data`:Object`

[](#dataobject)

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

### headers`:Object`

[](#headersobject)

Additional request headers.

### multiple`:Boolean`

[](#multipleboolean)

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

### accept`:String`

[](#acceptstring)

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`

[](#duplicateboolean)

The ability to upload duplicates, default `false`.

### paramName`:String`

[](#paramnamestring)

The parameter name for the file form data (the request argument name).
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`

[](#datatypestring)

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

### chunkSize`:Number`

[](#chunksizenumber)

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

### chunkUploadRetry`:Number`

[](#chunkuploadretrynumber)

Number of retries during upload chunks.

### maxSize`:Number`

[](#maxsizenumber)

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

### maxFiles`:Number`

[](#maxfilesnumber)

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

### imageSize`:Object`

[](#imagesizeobject)

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

### sortFn`:Function`

[](#sortfnfunction)

Sort function of selected files.

### filterFn`:Function`

[](#filterfnfunction)

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

### imageTransform`:Object`

[](#imagetransformobject)

Rules of changes the original image on the client (see [details](https://github.com/mailru/FileAPI#imagetransformobject)).

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

### imageOriginal`:Boolean`

[](#imageoriginalboolean)

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

### elements`:Object`

[](#elementsobject)

```
// 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(''); }
			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
------

[](#events)

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

[](#onselectfunctionevtevent-datafilesobject)

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`)

[](#onbeforeuploadfunctionevtevent-uievtobject)

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`)

[](#onuploadfunctionevtevent-uievtobject)

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`)

[](#onfilepreparefunctionevtevent-uievtobject)

Preparation of data before uploading.

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

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

[](#onfileuploadfunctionevtevent-uievtobject)

Start upload the same file.

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

[](#onprogressfunctionevtevent-uievtobject)

Common uploading progress.

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

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

[](#onfileprogressfunctionevtevent-uievtobject)

Progress upload the same file.

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

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

[](#oncompletefunctionevtevent-uievtobject)

Completion of the entire uploading.

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

[](#onfilecompletefunctionevtevent-uievtobject)

Completion of uploading the file.

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

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

[](#ondropfunctionevtevent-datafilesobject)

Retrieve file List, takes two arguments.

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

[](#ondrophoverfunctionevtevent-uievtobject)

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

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

[](#onfileremoveevtevent-filefile)

Removing a file from the queue

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

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

[](#onfileremovecompletedevtevent-filefile)

Removing a file from the queue

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

Cropper
-------

[](#cropper)

Based on [Jсrop](http://deepliquid.com/content/Jcrop.html).

```

window.FileAPI = { /* options */ };

```

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
-------------

[](#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){
		evt.preventDefault();

		file.$el
			.attr('disabled', true)
			.addClass('my_disabled')
		;

		new ModalConfirm('Delete "'+file.name+'"?')
			.then(function (){
				$.post('/api/remove', file.data);

				$('#upload').fileapi("remove", file);
				// or so
				evt.widget.remove(file);
			}, function (){
				file.$el
					.attr('disabled', false)
					.removeClass('my_disabled')
				;
			})
		;
	}

})
```

---

Using with Bootstrap
--------------------

[](#using-with-bootstrap)

You can use this uploader with Bootstrap framework without writing much additional CSS. Just add the following CSS to your page to hide the browser's "browse" button:

```
#id-of-uploader .btn {
	cursor: pointer;
	display: inline-block;
	position: relative;
	overflow: hidden;
}

#id-of-uploader .btn input {
	top: -10px;
	right: -40px;
	z-index: 2;
	position: absolute;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	font-size: 50px;
}
```

---

MIT LICENSE
-----------

[](#mit-license)

Copyright 2013 Lebedev Konstantin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

Changelog
---------

[](#changelog)

### 0.4.6

[](#046)

- FileAPI up to 2.0.9
- \#12: `onRemoveCompleted` -&gt; `onFileRemoveCompleted`
- \#100: fixed `maxSize` option

### 0.4.5

[](#045)

- \#95: fixed `rotate` method
- \#94: fixed `redraw` method

### 0.4.4

[](#044)

- \#93: `files` option and userpic
- \#90: fixed rotate + imageAutoOrientation

### 0.4.3

[](#043)

- \#84: fixed modal.js
- \#82: clear(all: true)
- \#61: always parse result (dataType === 'json')

### 0.4.2

[](#042)

- \#73: git -&gt; gif (fixed typo)

### 0.4.1

[](#041)

- \#67: `resize` method
- \#63: `remove` method
- - console.log
- `modal` close

### 0.4.0

[](#040)

- \#57: + `onBeforeUpload` event
- support `disabled` dom-attribute
- \#34: fixed `imageTransform`
- - FileAPI v2.0.3
- \#35: + `imageOriginal` option

### 0.3.1

[](#031)

- fixed `crop` method
- - `onFilePrepare` event

### 0.3.0

[](#030)

- - QUnit tests
- - `onFileRemove` and `onRemoveCompleted` events
- - `abort(text)` method
- - `remove(file)` method
- fixed `serialize()` method

### 0.2.0

[](#020)

- enhancement `ui event` in onSelect
- - `maxFiles` option support
- fixed `onFileUpload` &amp; `onFileProgress` events
- - \#9: Preview with aspect ratio keeping support (optional)

### 0.1.4

[](#014)

- - `headers:Object`
- - `queue()`; \* `clear()`;
- `clearOnComplete: false`
- - `resetOnSelect` -&gt; `clearOnSelect`

### 0.1.1

[](#011)

- - `resetOnSelect` option, default `!multiple`
- fix $.fn.cropper reinit

### 0.1.0

[](#010)

- Inital commit

[![Bitdeli Badge](https://camo.githubusercontent.com/152477d2da4922f04ab8435545c1062326a3178d956ade353065075b0f9e10ff/68747470733a2f2f64327765637a68766c38323376302e636c6f756466726f6e742e6e65742f5275626158612f6a71756572792e66696c656170692f7472656e642e706e67)](https://bitdeli.com/free "Bitdeli Badge")

###  Health Score

44

—

FairBetter than 92% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity54

Moderate usage in the ecosystem

Community38

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 87.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~159 days

Total

3

Last Release

3902d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d5a3975c24aa27d0046b97f8111b3f7f8b05451e79547d348703788a57ee89de?d=identicon)[lembdev](/maintainers/lembdev)

![](https://www.gravatar.com/avatar/8c8b9e8a310fff3541de920b0d9d84fc95fb67afe3845ffa0a12fb38fd50d49b?d=identicon)[RubaXa](/maintainers/RubaXa)

---

Top Contributors

[![RubaXa](https://avatars.githubusercontent.com/u/1109562?v=4)](https://github.com/RubaXa "RubaXa (143 commits)")[![Singrana](https://avatars.githubusercontent.com/u/4208498?v=4)](https://github.com/Singrana "Singrana (4 commits)")[![termi](https://avatars.githubusercontent.com/u/973643?v=4)](https://github.com/termi "termi (4 commits)")[![kztime](https://avatars.githubusercontent.com/u/3713584?v=4)](https://github.com/kztime "kztime (3 commits)")[![korzhyk](https://avatars.githubusercontent.com/u/1100134?v=4)](https://github.com/korzhyk "korzhyk (3 commits)")[![msurguy](https://avatars.githubusercontent.com/u/585833?v=4)](https://github.com/msurguy "msurguy (2 commits)")[![utkr98jais](https://avatars.githubusercontent.com/u/72144390?v=4)](https://github.com/utkr98jais "utkr98jais (1 commits)")[![feedbee](https://avatars.githubusercontent.com/u/1769193?v=4)](https://github.com/feedbee "feedbee (1 commits)")[![PeterDaveHello](https://avatars.githubusercontent.com/u/3691490?v=4)](https://github.com/PeterDaveHello "PeterDaveHello (1 commits)")[![Rosseyn](https://avatars.githubusercontent.com/u/309113?v=4)](https://github.com/Rosseyn "Rosseyn (1 commits)")[![bitdeli-chef](https://avatars.githubusercontent.com/u/3092978?v=4)](https://github.com/bitdeli-chef "bitdeli-chef (1 commits)")

---

Tags

jqueryuploadfile-uploadfileapimultiupload

### Embed Badge

![Health badge](/badges/rubaxa-fileapi/health.svg)

```
[![Health](https://phpackages.com/badges/rubaxa-fileapi/health.svg)](https://phpackages.com/packages/rubaxa-fileapi)
```

###  Alternatives

[kartik-v/bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with features for file preview for many file types, multiple selection, ajax uploads, and more.

5.4k7.9M13](/packages/kartik-v-bootstrap-fileinput)[kartik-v/yii2-widget-fileinput

An enhanced FileInput widget for Bootstrap 3.x, 4.x &amp; 5.x with file preview, multiple selection, and more features (sub repo split from yii2-widgets)

2286.8M95](/packages/kartik-v-yii2-widget-fileinput)[flowjs/flow-php-server

PHP library for handling chunk uploads. Works with flow.js html5 file uploads.

2451.6M15](/packages/flowjs-flow-php-server)[vova07/yii2-fileapi-widget

The FileAPI widget for Yii2 framework.

4765.5k9](/packages/vova07-yii2-fileapi-widget)[coffeecode/uploader

It is a easy PHP upload manager for images, files and media in your application

17149.7k3](/packages/coffeecode-uploader)[iphp/filestore-bundle

Upload files for doctrine entities in symfony 2 project

50143.2k2](/packages/iphp-filestore-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)