{"id":25272865,"url":"https://github.com/rubaxa/jquery.fileapi","last_synced_at":"2025-05-15T08:09:13.354Z","repository":{"id":9528116,"uuid":"11428741","full_name":"RubaXa/jquery.fileapi","owner":"RubaXa","description":"jQuery.FileAPI — jquery plugin for FileAPI (multiupload, image upload, crop, resize and etc.)","archived":false,"fork":false,"pushed_at":"2020-10-01T15:49:34.000Z","size":1664,"stargazers_count":854,"open_issues_count":11,"forks_count":193,"subscribers_count":65,"default_branch":"master","last_synced_at":"2025-03-27T11:01:37.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://rubaxa.github.io/jquery.fileapi/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RubaXa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-15T17:10:27.000Z","updated_at":"2025-02-04T08:48:01.000Z","dependencies_parsed_at":"2022-09-11T06:51:45.394Z","dependency_job_id":null,"html_url":"https://github.com/RubaXa/jquery.fileapi","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubaXa%2Fjquery.fileapi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubaXa%2Fjquery.fileapi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubaXa%2Fjquery.fileapi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubaXa%2Fjquery.fileapi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RubaXa","download_url":"https://codeload.github.com/RubaXa/jquery.fileapi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595327,"owners_count":20963943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-12T13:28:24.968Z","updated_at":"2025-04-10T06:19:59.384Z","avatar_url":"https://github.com/RubaXa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### WARNING: This plugin is not maintained\nIf you have a desire to continue to develop and support, email me, with pleasure I will give access to the repository.\n\n---\n\n### ВНИМАНИЕ: Этот плагин больше не поддерживается\nЕсли у вас есть желание продолжить разработку и поддержку, напишите мне, с удовольствием предоставлю весь необходимый доступ.\n\n---\n\n\n# $.fn.fileapi\njQuery plugin for [FileAPI](https://github.com/mailru/FileAPI/) (multiupload, image upload, crop, resize and etc.)\n\n\n## Install\n```html\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n\twindow.FileAPI = {\n\t\t  debug: false // debug mode\n\t\t, staticPath: '/js/jquery.fileapi/FileAPI/' // path to *.swf\n\t};\n\u003c/script\u003e\n\u003cscript src=\"/js/jquery.fileapi/FileAPI/FileAPI.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/jquery.fileapi/FileAPI/FileAPI.exif.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/jquery.fileapi/jquery.fileapi.min.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n\n## Example\n```html\n\u003cdiv id=\"uploader\"\u003e\n\t\u003cdiv class=\"js-fileapi-wrapper\"\u003e\n\t\t\u003cinput type=\"file\" name=\"files[]\" /\u003e\n\t\u003c/div\u003e\n\t\u003cdiv data-fileapi=\"active.show\" class=\"progress\"\u003e\n\t\t\u003cdiv data-fileapi=\"progress\" class=\"progress__bar\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n\tjQuery(function ($){\n\t\t$('#uploader').fileapi({\n\t\t\turl: './ctrl.php',\n\t\t\tautoUpload: true,\n\t\t\taccept: 'image/*',\n\t\t\tmultiple: true,\n\t\t\tmaxSize: FileAPI.MB*10 // max file size\n\t\t});\n\t});\n\u003c/script\u003e\n```\n\n\n---\n\n\n## Options\n\n### url`:String`\nURL to which the request is sent.\u003cbr/\u003e\nIf `undefined` or empty, it is set to the action property of the file upload form if available.\n\n\n### autoUpload`:Boolean`\nTo enable automatic uploads, set this option to `true`.\n\n\n### data`:Object`\nAdditional form data to be sent along with the file uploads can be set using this option.\n\n\n### headers`:Object`\nAdditional request headers.\n\n\n### multiple`:Boolean`\nIt specifies that multiple files can be selected at once, default `true`.\n\n\n### accept`:String`\nIf the value of the type attribute is file, this attribute indicates the types of files that the server accepts;\notherwise it is ignored. The value must be a comma-separated list of unique content type specifiers: `image/*`, `audio/*`, `video/*`, etc.\n\n\n### duplicate`:Boolean`\nThe ability to upload duplicates, default `false`.\n\n\n### paramName`:String`\nThe parameter name for the file form data (the request argument name).\u003cbr/\u003e\nIf `undefined` or empty, the name property of the file input field is used, or `files[]` if the file input name property is also empty.\n\n\n### dataType`:String`\nThe type of data that is expected back from the server, default `json`.\n\n\n### chunkSize`:Number`\nChunk size in bytes, eg: `.5 * FileAPI.MB`.\n\n\n### chunkUploadRetry`:Number`\nNumber of retries during upload chunks.\n\n\n### maxSize`:Number`\nThe maximum allowed file size in bytes, by default unlimited.\n\n\n### maxFiles`:Number`\nThis option limits the number of files that are allowed to be uploaded using this plugin.\n\n\n### imageSize`:Object`\nAllowable size of uploaded images, eg: `{ minWidth: 320, minHeight: 240, maxWidth: 3840, maxHeight: 2160 }`.\n\n\n### sortFn`:Function`\nSort function of selected files.\n\n\n### filterFn`:Function`\nFilter function of selected files, eg: `function (file, info){ return /^image/.test(file.type) \u0026\u0026 info.width \u003e 320 }`.\n\n\n### imageTransform`:Object`\nRules of changes the original image on the client (see [details](https://github.com/mailru/FileAPI#imagetransformobject)).\n```js\nimageTransform: {\n\t// resize by max side\n\tmaxWidth: 800,\n\tmaxHeight: 600\n}\n```\n\n\n### imageOriginal`:Boolean`\nSent to the server the original image or not, if defined imageTransform option.\n\n\n### elements`:Object`\n```js\n// Default options\nelements: {\n\t// Controls\n\tctrl: {\n\t\tupload: '[data-fileapi=\"ctrl.upload\"]',\n\t\treset: '[data-fileapi=\"ctrl.reset\"]',\n\t\tabort: '[data-fileapi=\"ctrl.abort\"]'\n\t},\n\t// Display element depending on files\n\tempty: {\n\t\tshow: '[data-fileapi=\"empty.show\"]',\n\t\thide: '[data-fileapi=\"empty.hide\"]'\n\t},\n\t// Display element depending on queue state\n\temptyQueue: {\n\t\tshow: '[data-fileapi=\"emptyQueue.show\"]',\n\t\thide: '[data-fileapi=\"emptyQueue.hide\"]'\n\t},\n\t// Display element depending on upload state\n\tactive: {\n\t\tshow: '[data-fileapi=\"active.show\"]',\n\t\thide: '[data-fileapi=\"active.hide\"]'\n\t},\n\t// Preview file (single upload)\n\tpreview: {\n\t\tel: 0, // css selector\n\t\twidth: 0,\n\t\theight: 0,\n\t\tkeepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally\n\t},\n\t// Total size of queue\n\tsize: '[data-fileapi=\"size\"]',\n\t// Selected file name\n\tname: '[data-fileapi=\"name\"]',\n\t// Progress bar total\n\tprogress: '[data-fileapi=\"progress\"]',\n\t// Filelist options\n\tfile: {\n\t\t// Template\n\t\ttpl: '[data-fileapi=\"file.tpl\"]',\n\t\t// Progress bar\n\t\tprogress: '[data-fileapi=\"file.progress\"]',\n\t\t// Display element depending on upload state\n\t\tactive: {\n\t\t\tshow: '[data-fileapi=\"active.show\"]',\n\t\t\thide: '[data-fileapi=\"active.hide\"]'\n\t\t},\n\t\t// Preview file or icon\n\t\tpreview: {\n\t\t\tel: 0, // css selector\n\t\t\tget: 0, // eg: function($el, file){ $el.append('\u003ci class=\"icon icon_'+file.name.split('.').pop()+'\"\u003e\u003c/i\u003e'); }\n\t\t\twidth: 0,\n\t\t\theight: 0,\n\t\t\tkeepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally\n\t\t}\n\t},\n\t// Drag and drop\n\tdnd: {\n\t\t// DropZone: selector or element\n\t\tel: '[data-fileapi=\"dnd\"]',\n\t\t// Hover class\n\t\thover: 'dnd_hover'\n\t}\n}\n```\n\n---\n\n## Events\n### onSelect`:Function`(evt`:$.Event`, data`:FilesObject`)\nRetrieve file List, takes two arguments.\n\n```js\n$('...').fileapi({\n\tonSelect: function (evt, data){\n\t\tdata.all; // All files\n\t\tdata.files; // Correct files\n\t\tif( data.other.length ){\n\t\t\t// errors\n\t\t\tvar errors = data.other[0].errors;\n\t\t\tif( errors ){\n\t\t\t\terrors.maxSize; // File size exceeds the maximum size `@see maxSize`\n\t\t\t\terrors.maxFiles; // Number of files selected exceeds the maximum `@see maxFiles`\n\t\t\t\terrors.minWidth; // Width of the image is smaller than the specified `@see imageSize`\n\t\t\t\terrors.minHeight;\n\t\t\t\terrors.maxWidth; // Width of the image greater than the specified `@see imageSize`\n\t\t\t\terrors.maxHeight;\n\t\t\t}\n\t\t}\n\t}\n});\n```\n\n### onBeforeUpload`:Function`(evt`:$.Event`, uiEvt`:Object`)\nBefore start uploading.\n```js\nfunction (evt, uiEvt){\n\tvar files = uiEvt.files;\n\tvar widget = uiEvt.widget;\n\tif (files.length \u003e 1000) {\n\t   return false; // prevent uploading\n\t}\n}\n```\n\n### onUpload`:Function`(evt`:$.Event`, uiEvt`:Object`)\nStart uploading.\n```js\nfunction (evt, uiEvt){\n\t// Base properties\n\tvar file = uiEvt.file;\n\tvar files = uiEvt.files;\n\tvar widget = uiEvt.widget;\n\tvar xhr = uiEvt.xhr;\n}\n```\n\n### onFilePrepare`:Function`(evt`:$.Event`, uiEvt`:Object`)\nPreparation of data before uploading.\n\n```js\nfunction (evt, uiEvt){\n\tvar file = uiEvt.file;\n\tuiEvt.options.data.fileType = file.type;\n}\n```\n\n### onFileUpload`:Function`(evt`:$.Event`, uiEvt`:Object`)\nStart upload the same file.\n\n### onProgress`:Function`(evt`:$.Event`, uiEvt`:Object`)\nCommon uploading progress.\n```js\nfunction (evt, uiEvt){\n\tvar part = uiEvt.loaded / uiEvt.total;\n}\n```\n\n### onFileProgress`:Function`(evt`:$.Event`, uiEvt`:Object`)\nProgress upload the same file.\n```js\nfunction (evt, uiEvt){\n\tvar file = uiEvt.file;\n\tvar part = uiEvt.loaded / uiEvt.total;\n}\n```\n\n### onComplete`:Function`(evt`:$.Event`, uiEvt`:Object`)\nCompletion of the entire uploading.\n\n### onFileComplete`:Function`(evt`:$.Event`, uiEvt`:Object`)\nCompletion of uploading the file.\n```js\nfunction (evt, uiEvt){\n\tvar error = uiEvt.error;\n\tvar result = uiEvt.result; // server response\n}\n```\n\n### onDrop`:Function`(evt`:$.Event`, data`:FilesObject`)\nRetrieve file List, takes two arguments.\n\n### onDropHover`:Function`(evt`:$.Event`, uiEvt`:Object`)\n```js\n$('#box').fileapi({\n\tonDropHover: function (evt, uiEvt){\n\t\t$(this).toggleClass('dnd_hover', uiEvt.state);\n\t}\n});\n```\n\n### onFileRemove(evt`:$.Event`, file`:File`)\nRemoving a file from the queue\n```js\nfunction (evt, file){\n\tif( !confirm('Remove \"'+file.name+'\"?') ){\n\t\treturn false;\n\t}\n}\n```\n\n### onFileRemoveCompleted(evt`:$.Event`, file`:File`)\nRemoving a file from the queue\n```js\nfunction (evt, file){\n\t// Send ajax-request\n\t$.post('/remove-ctrl.php', { uid: FileAPI.uid(file) });\n}\n```\n\n\n## Cropper\nBased on [Jсrop](http://deepliquid.com/content/Jcrop.html).\n\n```html\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003ewindow.FileAPI = { /* options */ };\u003c/script\u003e\n\u003cscript src=\"/js/jquery.fileapi/FileAPI/FileAPI.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/jquery.fileapi/jquery.fileapi.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/jquery.fileapi/jcrop/jquery.Jcrop.min.js\"\u003e\u003c/script\u003e\n\u003clink href=\"/js/jquery.fileapi/jcrop/jquery.Jcrop.min.css\" rel=\"stylesheet\" type=\"text/css\"/\u003e\n```\n\nUsage:\n```js\n$('#userpic').fileapi({\n\turl: '...',\n\taccept: 'image/*',\n\tonSelect: function (imageFile){\n\t\t$('#userpic-upload-btn')\n\t\t\t.unbind('.fileapi')\n\t\t\t.bind('click.fileapi', function (){\n\t\t\t\t$('#userpic').fileapi('upload');\n\t\t\t})\n\t\t;\n\n\t\t$('#image-preview').cropper({\n\t\t\t  file: imageFile\n\t\t\t, bgColor: '#fff'\n\t\t\t, maxSize: [320, 240] // viewport max size\n\t\t\t, minSize: [100, 100] // crop min size\n\t\t\t, aspectRatio: 1      // optional, aspect ratio: 0 - disable, \u003e0 - fixed, remove this option: autocalculation from minSize\n\t\t\t, onSelect: function (coords){\n\t\t\t\t$('#userpic').fileapi('crop', imageFile, coords);\n\t\t\t}\n\t\t});\n\t}\n});\n```\n\n---\n\n\n## Customization\n\n```js\n$('#upload').fileapi({\n\tmultiple: true,\n\n\t// Restores the list of files uploaded earlier *** IE \u003c 9 — NOT SUPPORTED ***\n\tfiles: [{\n\t\tsrc: \"http://path/to/filename.png\",\n\t\ttype: \"image/png\",\n\t\tname: \"filename.png\",\n\t\tsize: 31409,\n\t\tdata: { id: 999, token: \"...\" }\n\t}],\n\n\t// Remove a file from the upload queue\n\tonFileRemove: function (evt, file){\n\t\tif( !confirm(\"Are you sure?\") ){\n\t\t\t// Cancel remove\n\t\t\tevt.preventDefault();\n\t\t}\n\t},\n\n\tonFileComplete: function (evt, uiEvt){\n\t\tvar file = uiEvt.file;\n\t\tvar json = uiEvt.result;\n\n\t\tfile.data = {\n\t\t\tid: json.id,\n\t\t\ttoken: json.token\n\t\t};\n\t},\n\n\tonFileRemoveCompleted: function (evt, file){\n\t\tevt.preventDefault();\n\n\t\tfile.$el\n\t\t\t.attr('disabled', true)\n\t\t\t.addClass('my_disabled')\n\t\t;\n\n\t\tnew ModalConfirm('Delete \"'+file.name+'\"?')\n\t\t\t.then(function (){\n\t\t\t\t$.post('/api/remove', file.data);\n\n\t\t\t\t$('#upload').fileapi(\"remove\", file);\n\t\t\t\t// or so\n\t\t\t\tevt.widget.remove(file);\n\t\t\t}, function (){\n\t\t\t\tfile.$el\n\t\t\t\t\t.attr('disabled', false)\n\t\t\t\t\t.removeClass('my_disabled')\n\t\t\t\t;\n\t\t\t})\n\t\t;\n\t}\n\n})\n```\n\n\n---\n\n## Using with Bootstrap\n\nYou 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:\n\n```css\n#id-of-uploader .btn {\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tposition: relative;\n\toverflow: hidden;\n}\n\n#id-of-uploader .btn input {\n\ttop: -10px;\n\tright: -40px;\n\tz-index: 2;\n\tposition: absolute;\n\tcursor: pointer;\n\topacity: 0;\n\tfilter: alpha(opacity=0);\n\tfont-size: 50px;\n}\n```\n\n\n---\n\n\n## MIT LICENSE\nCopyright 2013 Lebedev Konstantin \u003cibnRubaXa@gmail.com\u003e\nhttp://rubaxa.github.io/jquery.fileapi/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n\n---\n\n\n## Changelog\n\n### 0.4.6\n * FileAPI up to 2.0.9\n * #12: `onRemoveCompleted` -\u003e `onFileRemoveCompleted`\n * #100: fixed `maxSize` option\n\n### 0.4.5\n * #95: fixed `rotate` method\n * #94: fixed `redraw` method\n\n### 0.4.4\n * #93: `files` option and userpic\n * #90: fixed rotate + imageAutoOrientation\n\n### 0.4.3\n * #84: fixed modal.js\n * #82: clear(all: true)\n * #61: always parse result (dataType === 'json')\n\n### 0.4.2\n * #73: git -\u003e gif (fixed typo)\n\n### 0.4.1\n * #67: `resize` method\n * #63: `remove` method\n * - console.log\n * `modal` close\n\n### 0.4.0\n* #57: + `onBeforeUpload` event\n* support `disabled` dom-attribute\n* #34: fixed `imageTransform`\n* + FileAPI v2.0.3\n* #35: + `imageOriginal` option\n\n### 0.3.1\n * fixed `crop` method\n * + `onFilePrepare` event\n\n### 0.3.0\n * + QUnit tests\n * + `onFileRemove` and `onRemoveCompleted` events\n * + `abort(text)` method\n * + `remove(file)` method\n * fixed `serialize()` method\n\n### 0.2.0\n * enhancement `ui event` in onSelect\n * + `maxFiles` option support\n * fixed `onFileUpload` \u0026 `onFileProgress` events\n * + #9: Preview with aspect ratio keeping support (optional)\n\n### 0.1.4\n * + `headers:Object`\n * + `queue()`; * `clear()`;\n * `clearOnComplete: false`\n * * `resetOnSelect` -\u003e `clearOnSelect`\n\n### 0.1.1\n * + `resetOnSelect` option, default `!multiple`\n * fix $.fn.cropper reinit\n\n\n### 0.1.0\n * Inital commit\n\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/RubaXa/jquery.fileapi/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubaxa%2Fjquery.fileapi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubaxa%2Fjquery.fileapi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubaxa%2Fjquery.fileapi/lists"}