{"main":["upload.js","upload.css"],"options":[{"name":"action","type":"string","description":"Where to submit uploads"},{"name":"label","type":"string","default":"'Drag and drop files or click to select'","description":"Drop target text"},{"name":"leave","type":"string","default":"'You have uploads pending, are you sure you want to leave this page?'","description":"Before leave message"},{"name":"maxQueue","type":"int","default":"2","description":"Number of files to simultaneously upload"},{"name":"maxSize","type":"int","default":"5242880","description":"Max file size allowed"},{"name":"postData","type":"object","description":"Extra data to post with upload"},{"name":"postKey","type":"string","default":"'file'","description":"Key to upload file as"}],"events":[{"name":"complete","description":"All uploads are complete"},{"name":"filecomplete","description":"Specific upload complete"},{"name":"fileerror","description":"Specific upload error"},{"name":"filestart","description":"Specific upload starting"},{"name":"fileprogress","description":"Specific upload progress"},{"name":"start","description":"Uploads starting"}],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.upload(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").upload(\"destroy\");"]}],"name":"Upload","type":"widget","description":"A jQuery plugin for simple drag and drop uploads.","dependencies":["core.js"],"css":[{"name":".fs-upload-element","type":"element","description":"Target elmement"},{"name":".fs-upload","type":"element","description":"Base widget class"},{"name":".fs-upload.fs-upload-dropping","type":"modifier","description":"Indicates dropping state"},{"name":".fs-upload-input","type":"element","description":"Masked Input"},{"name":".fs-upload-target","type":"element","description":"Drop target"}],"use":"### Basic\n\nUpload will create a simple 'drop zone' for file uploads:\n\n```javascript\n$(\".target\").upload({\n\taction: \"upload.php\"\n});\n```\n\n```markup\n<div class=\"target\"></div>\n```\n\n### Uploads\n\nUpload does not store or manipulate uploaded files on the server, it simply facilitates the asynchronous upload process from the front end.","demo":"<style>\r\n\t.filelists { margin: 20px 0; }\r\n\t.filelists h5 { margin: 10px 0 0; }\r\n\t.filelist { margin: 0; padding: 10px 0; }\r\n\t.filelist li { background: #fff; border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 5px; }\r\n\t.filelist li:before { display: none; }\r\n\t.filelist li .file { color: #333; }\r\n\t.filelist li .progress { color: #666; float: right; font-size: 10px; text-transform: uppercase; }\r\n\t.filelist li .delete { color: red; cursor: pointer; float: right; font-size: 10px; text-transform: uppercase; }\r\n\t.filelist li.complete .progress { color: green; }\r\n\t.filelist li.error .progress { color: red; }\r\n</style>\r\n\r\n<script>\r\n\tvar $filequeue,\r\n\t\t$filelist;\r\n\r\n\t$(document).ready(function() {\r\n\t\t$filequeue = $(\".filelist.queue\");\r\n\t\t$filelist = $(\".filelist.complete\");\r\n\r\n\t\t$(\".upload\").upload({\r\n\t\t\tmaxSize: 1048576\r\n\t\t}).on(\"start.upload\", onStart)\r\n\t\t  .on(\"complete.upload\", onComplete)\r\n\t\t  .on(\"filestart.upload\", onFileStart)\r\n\t\t  .on(\"fileprogress.upload\", onFileProgress)\r\n\t\t  .on(\"filecomplete.upload\", onFileComplete)\r\n\t\t  .on(\"fileerror.upload\", onFileError);\r\n\t});\r\n\r\n\tfunction onStart(e, files) {\r\n\t\tconsole.log(\"Start\");\r\n\t\tvar html = '';\r\n\t\tfor (var i = 0; i < files.length; i++) {\r\n\t\t\thtml += '<li data-index=\"' + files[i].index + '\"><span class=\"file\">' + files[i].name + '</span><span class=\"progress\">Queued</span></li>';\r\n\t\t}\r\n\t\t$filequeue.append(html);\r\n\t}\r\n\r\n\tfunction onComplete(e) {\r\n\t\tconsole.log(\"Complete\");\r\n\t\t// All done!\r\n\t}\r\n\r\n\tfunction onFileStart(e, file) {\r\n\t\tconsole.log(\"File Start\");\r\n\t\t$filequeue.find(\"li[data-index=\" + file.index + \"]\")\r\n\t\t\t\t  .find(\".progress\").text(\"0%\");\r\n\t}\r\n\r\n\tfunction onFileProgress(e, file, percent) {\r\n\t\tconsole.log(\"File Progress\");\r\n\t\t$filequeue.find(\"li[data-index=\" + file.index + \"]\")\r\n\t\t\t\t  .find(\".progress\").text(percent + \"%\");\r\n\t}\r\n\r\n\tfunction onFileComplete(e, file, response) {\r\n\t\tconsole.log(\"File Complete\");\r\n\t\tif (response.trim() === \"\" || response.toLowerCase().indexOf(\"error\") > -1) {\r\n\t\t\t$filequeue.find(\"li[data-index=\" + file.index + \"]\").addClass(\"error\")\r\n\t\t\t\t\t  .find(\".progress\").text(response.trim());\r\n\t\t} else {\r\n\t\t\tvar $target = $filequeue.find(\"li[data-index=\" + file.index + \"]\");\r\n\t\t\t$target.find(\".file\").text(file.name);\r\n\t\t\t$target.find(\".progress\").remove();\r\n\t\t\t$target.appendTo($filelist);\r\n\t\t}\r\n\t}\r\n\r\n\tfunction onFileError(e, file, error) {\r\n\t\tconsole.log(\"File Error\");\r\n\t\t$filequeue.find(\"li[data-index=\" + file.index + \"]\").addClass(\"error\")\r\n\t\t\t\t  .find(\".progress\").text(\"Error: \" + error);\r\n\t}\r\n</script>\r\n\r\n<h4>Basic</h4>\r\n<form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n\t<div class=\"upload\" data-upload-options='{\"action\":\"../extra/upload-target.php\"}'></div>\r\n\r\n\t<div class=\"filelists\">\r\n\t\t<h5>Complete</h5>\r\n\t\t<ol class=\"filelist complete\">\r\n\t\t</ol>\r\n\t\t<h5>Queued</h5>\r\n\t\t<ol class=\"filelist queue\">\r\n\t\t</ol>\r\n\t</div>\r\n</form>"}