{"_id":"jquery-simple-upload","_rev":"9-3f4a7a1810b6337e714d340357e2a667","name":"jquery-simple-upload","description":"Simple yet powerful file upload plugin for jQuery designed to be non-intrusive, backwards-compatible, flexible, and very easy to understand.","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"jquery-simple-upload","version":"1.0.0","description":"Simple yet powerful file upload plugin for jQuery designed to be non-intrusive, backwards-compatible, flexible, and very easy to understand.","main":"simpleUpload.js","directories":{"example":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/michaelcbrook/simpleUpload.js.git"},"keywords":["file","upload","jquery","plugin","simple","ajax","html5","iframe","jquery-plugin","ecosystem:jquery"],"author":{"name":"Michael Brook","email":"michaelcbrook@gmail.com","url":"http://michaelcbrook.com/"},"license":"MIT","bugs":{"url":"https://github.com/michaelcbrook/simpleUpload.js/issues"},"dependencies":{"jquery":">=1.7.0"},"homepage":"http://simpleupload.michaelcbrook.com/","_id":"jquery-simple-upload@1.0.0","dist":{"shasum":"0b89238bf9b35b77b41bfe11840c1b383e97a3bd","tarball":"https://registry.npmjs.org/jquery-simple-upload/-/jquery-simple-upload-1.0.0.tgz","integrity":"sha512-wYJ7gCWV84jxFQ/RGTDqmIQAYcOkNuzf8GPewbKY1rurVzvquuVIUaG82mdLMHKUiKf2nLNNQySh6cuPEo9YGg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoeEmRxma/v5bzomVz8ZUCVddin/QObMj/fSoc9gkl3AiEA8s3vcJx4sNtBlbgS8ivBIaXXI1kjQr/XAodXlVk2Q9Q="}]},"_from":"./","_npmVersion":"1.3.10","_npmUser":{"name":"michaelcbrook","email":"michaelcbrook@gmail.com"},"maintainers":[{"name":"michaelcbrook","email":"michaelcbrook@gmail.com"}]},"1.1.0":{"name":"jquery-simple-upload","version":"1.1.0","description":"Simple yet powerful file upload plugin for jQuery designed to be non-intrusive, backwards-compatible, flexible, and very easy to understand.","main":"simpleUpload.js","directories":{"example":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/michaelcbrook/simpleUpload.js.git"},"keywords":["file","upload","jquery","plugin","simple","ajax","html5","iframe","jquery-plugin","ecosystem:jquery"],"author":{"name":"Michael Brook","email":"michaelcbrook@gmail.com","url":"http://michaelcbrook.com/"},"license":"MIT","bugs":{"url":"https://github.com/michaelcbrook/simpleUpload.js/issues"},"dependencies":{"jquery":">=1.7.0"},"homepage":"http://simpleupload.michaelcbrook.com/","gitHead":"bebb3942478ffd01a630da3e22669eab4d510150","_id":"jquery-simple-upload@1.1.0","_npmVersion":"5.6.0","_nodeVersion":"6.6.0","_npmUser":{"name":"michaelcbrook","email":"michaelcbrook@gmail.com"},"dist":{"integrity":"sha512-BMEq7+c7LWBjfqfh5R5x8oVN9S9/MgBDOp/epKYh3B8EBiwZz1Tl9mJKzBRWXyvDJRLskFf+4mzaV0U9Bao24g==","shasum":"7543263404636b8e2fc92978af70b35ef3fe1541","tarball":"https://registry.npmjs.org/jquery-simple-upload/-/jquery-simple-upload-1.1.0.tgz","fileCount":10,"unpackedSize":75623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa53d4CRA9TVsSAnZWagAAur0P/0BqemnGksB+BVtJmB24\n2nPwE58QJSNvUpT0AwsLR9bMjkKmpBbXp78fUhOTjfkgCVJjWg3gCsh+mWdy\nXkfbbfMwfbZ2aqenHcmynKE5tKqQgL0jJP/k3knW12aoQdC5j/7sk8yO9PuU\nzgzm5EK4cgXLUeBDGraPmpRtJGSUqLVxGqpm2ZsU+sgK7dWddSGslWiKfYKH\nxFY9Bq3B29suxFA0TZYYqOh+CL3mXUMtSJd1V08mnU4UBS/ce5N53WgEWU/O\nPfgVO/j5h3isra7cRiLaJVO6ZOeIjZtP2p66FkfKg/utfpZDtroG3BWlXgEB\nRZCKMF+PBTCxOsaRJIfSrsw6q0UFzamAr0ue0RYpFmxGetWeplsVgvk4DNPs\n0hjW0F9Pl1op93du55df/ewEqH/CvnQMoqnTROth6KYM9qd/JwIllDuXySfF\nbhmLgUvw/2cVRt31ziQsBKTHMLSzXV+iw2ozVxtBe6Q0GLykWwTIuI0fb7EB\nREJFnD1RP4KoAQB6/rt6+lkmEXgor9dwH7K5MaHiUuTnRsguv7gfLPDyMNXO\n6x81UlFjuobY6Vogad/aBQrsZEWr3uj3jffxXucjtUuts47pkrkFP+/7yv+T\nIVsq6hPhBjVnB970yWXWPskIzk0DpLdPQpG2IO5SDYvGkfF8gkuHZu+xx2eo\npThw\r\n=wYBL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDaTjloAQ8kxDRfDMBPO9dUYCzbPwJF9KriRi6i3FXlAIhAM9P0tb1I3HF1K03NQYOOkAlPbNp/XjBQzRmzrI2+JrJ"}]},"maintainers":[{"name":"michaelcbrook","email":"michaelcbrook@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jquery-simple-upload_1.1.0_1525118839054_0.7091532820352131"},"_hasShrinkwrap":false}},"readme":"# simpleUpload.js\nUnlike many JavaScript upload libraries on the interwebs, simpleUpload is an extremely simple yet powerful jQuery file upload plugin designed to be non-intrusive, backwards-compatible, flexible, and very easy to understand.\n\n## Features\n\n- Multiple uploads\n- File type and size filtering\n- HTML5 Ajax upload with fallback to iframe\n- Simultaneous uploads\n- Plays nicely with drag-n-drop\n- Cross-domain uploads\n- Cancellable uploads\n- Client-side hashing for integration with deduplication systems (premium feature only)\n\n## Browser Support\n\nDesktop:\n\n- Google Chrome\n- Firefox 3+\n- IE 6+\n- Safari 4+\n- Opera 10.6+\n\nMobile:\n\n- iOS 6+\n- Android 2.2+\n- Windows Phone 8.1+\n- Opera Mobile 11.50+\n\n*Note: IE8+ and Firefox 3.6+ required for cross-domain uploads*\n\n## Basic Usage\n\n```javascript\n\n$('#file').simpleUpload(\"/ajax/upload.php\", {\n\n\tstart: function(file){\n\t\t//upload started\n\t},\n\tprogress: function(progress){\n\t\t//received progress\n\t},\n\tsuccess: function(data){\n\t\t//upload successful\n\t},\n\terror: function(error){\n\t\t//upload failed\n\t}\n\n});\n\n```\n\n## Example #1: Single File Upload with Progress Bar\n\n#### JavaScript\n\n```javascript\n\n$(document).ready(function(){\n\n\t$('input[type=file]').change(function(){\n\n\t\t$(this).simpleUpload(\"/ajax/upload.php\", {\n\n\t\t\tstart: function(file){\n\t\t\t\t//upload started\n\t\t\t\t$('#filename').html(file.name);\n\t\t\t\t$('#progress').html(\"\");\n\t\t\t\t$('#progressBar').width(0);\n\t\t\t},\n\n\t\t\tprogress: function(progress){\n\t\t\t\t//received progress\n\t\t\t\t$('#progress').html(\"Progress: \" + Math.round(progress) + \"%\");\n\t\t\t\t$('#progressBar').width(progress + \"%\");\n\t\t\t},\n\n\t\t\tsuccess: function(data){\n\t\t\t\t//upload successful\n\t\t\t\t$('#progress').html(\"Success!<br>Data: \" + JSON.stringify(data));\n\t\t\t},\n\n\t\t\terror: function(error){\n\t\t\t\t//upload failed\n\t\t\t\t$('#progress').html(\"Failure!<br>\" + error.name + \": \" + error.message);\n\t\t\t}\n\n\t\t});\n\n\t});\n\n});\n\n```\n\n#### HTML\n\n```html\n\n<div id=\"filename\"></div>\n<div id=\"progress\"></div>\n<div id=\"progressBar\"></div>\n\n<input type=\"file\" name=\"file\">\n\n```\n\n## Example #2: Multiple File Upload\n\n#### JavaScript\n\n```javascript\n\n$(document).ready(function(){\n\n\t$('input[type=file]').change(function(){\n\n\t\t$(this).simpleUpload(\"/ajax/upload.php\", {\n\n\t\t\t/*\n\t\t\t * Each of these callbacks are executed for each file.\n\t\t\t * To add callbacks that are executed only once, see init() and finish().\n\t\t\t *\n\t\t\t * \"this\" is an object that can carry data between callbacks for each file.\n\t\t\t * Data related to the upload is stored in this.upload.\n\t\t\t */\n\n\t\t\tstart: function(file){\n\t\t\t\t//upload started\n\t\t\t\tthis.block = $('<div class=\"block\"></div>');\n\t\t\t\tthis.progressBar = $('<div class=\"progressBar\"></div>');\n\t\t\t\tthis.block.append(this.progressBar);\n\t\t\t\t$('#uploads').append(this.block);\n\t\t\t},\n\n\t\t\tprogress: function(progress){\n\t\t\t\t//received progress\n\t\t\t\tthis.progressBar.width(progress + \"%\");\n\t\t\t},\n\n\t\t\tsuccess: function(data){\n\t\t\t\t//upload successful\n\n\t\t\t\tthis.progressBar.remove();\n\n\t\t\t\t/*\n\t\t\t\t * Just because the success callback is called doesn't mean your\n\t\t\t\t * application logic was successful, so check application success.\n\t\t\t\t *\n\t\t\t\t * Data as returned by the server on...\n\t\t\t\t * success:\t{\"success\":true,\"format\":\"...\"}\n\t\t\t\t * error:\t{\"success\":false,\"error\":{\"code\":1,\"message\":\"...\"}}\n\t\t\t\t */\n\n\t\t\t\tif (data.success) {\n\t\t\t\t\t//now fill the block with the format of the uploaded file\n\t\t\t\t\tvar format = data.format;\n\t\t\t\t\tvar formatDiv = $('<div class=\"format\"></div>').text(format);\n\t\t\t\t\tthis.block.append(formatDiv);\n\t\t\t\t} else {\n\t\t\t\t\t//our application returned an error\n\t\t\t\t\tvar error = data.error.message;\n\t\t\t\t\tvar errorDiv = $('<div class=\"error\"></div>').text(error);\n\t\t\t\t\tthis.block.append(errorDiv);\n\t\t\t\t}\n\n\t\t\t},\n\n\t\t\terror: function(error){\n\t\t\t\t//upload failed\n\t\t\t\tthis.progressBar.remove();\n\t\t\t\tvar error = error.message;\n\t\t\t\tvar errorDiv = $('<div class=\"error\"></div>').text(error);\n\t\t\t\tthis.block.append(errorDiv);\n\t\t\t}\n\n\t\t});\n\n\t});\n\n});\n\n```\n\n#### HTML\n\n```html\n\n<div id=\"uploads\"></div>\n\n<input type=\"file\" name=\"file\" multiple>\n\n```\n\n## Example #3: Cancellable Uploads (with file type & size filtering)\n\n#### JavaScript\n\n```javascript\n\n$(document).ready(function(){\n\n\t$('input[type=file]').change(function(){\n\n\t\t$(this).simpleUpload(\"/ajax/upload.php\", {\n\n\t\t\tallowedExts: [\"jpg\", \"jpeg\", \"jpe\", \"jif\", \"jfif\", \"jfi\", \"png\", \"gif\"],\n\t\t\tallowedTypes: [\"image/pjpeg\", \"image/jpeg\", \"image/png\", \"image/x-png\", \"image/gif\", \"image/x-gif\"],\n\t\t\tmaxFileSize: 5000000, //5MB in bytes\n\n\t\t\tstart: function(file){\n\t\t\t\t//upload started\n\n\t\t\t\tthis.block = $('<div class=\"block\"></div>');\n\t\t\t\tthis.progressBar = $('<div class=\"progressBar\"></div>');\n\t\t\t\tthis.cancelButton = $('<div class=\"cancelButton\">x</div>');\n\n\t\t\t\t/*\n\t\t\t\t * Since \"this\" differs depending on the function in which it is called,\n\t\t\t\t * we need to assign \"this\" to a local variable to be able to access\n\t\t\t\t * this.upload.cancel() inside another function call.\n\t\t\t\t */\n\n\t\t\t\tvar that = this;\n\n\t\t\t\tthis.cancelButton.click(function(){\n\t\t\t\t\tthat.upload.cancel();\n\t\t\t\t\t//now, the cancel callback will be called\n\t\t\t\t});\n\n\t\t\t\tthis.block.append(this.progressBar).append(this.cancelButton);\n\t\t\t\t$('#uploads').append(this.block);\n\n\t\t\t},\n\n\t\t\tprogress: function(progress){\n\t\t\t\t//received progress\n\t\t\t\tthis.progressBar.width(progress + \"%\");\n\t\t\t},\n\n\t\t\tsuccess: function(data){\n\t\t\t\t//upload successful\n\n\t\t\t\tthis.progressBar.remove();\n\t\t\t\tthis.cancelButton.remove();\n\n\t\t\t\tif (data.success) {\n\t\t\t\t\t//now fill the block with the format of the uploaded file\n\t\t\t\t\tvar format = data.format;\n\t\t\t\t\tvar formatDiv = $('<div class=\"format\"></div>').text(format);\n\t\t\t\t\tthis.block.append(formatDiv);\n\t\t\t\t} else {\n\t\t\t\t\t//our application returned an error\n\t\t\t\t\tvar error = data.error.message;\n\t\t\t\t\tvar errorDiv = $('<div class=\"error\"></div>').text(error);\n\t\t\t\t\tthis.block.append(errorDiv);\n\t\t\t\t}\n\n\t\t\t},\n\n\t\t\terror: function(error){\n\t\t\t\t//upload failed\n\t\t\t\tthis.progressBar.remove();\n\t\t\t\tthis.cancelButton.remove();\n\t\t\t\tvar error = error.message;\n\t\t\t\tvar errorDiv = $('<div class=\"error\"></div>').text(error);\n\t\t\t\tthis.block.append(errorDiv);\n\t\t\t},\n\n\t\t\tcancel: function(){\n\t\t\t\t//upload cancelled\n\t\t\t\tthis.block.fadeOut(400, function(){\n\t\t\t\t\t$(this).remove();\n\t\t\t\t});\n\t\t\t}\n\n\t\t});\n\n\t});\n\n});\n\n```\n\n#### HTML\n\n```html\n\n<div id=\"uploads\"></div>\n\n<input type=\"file\" name=\"file\" multiple>\n\n```\n\n# Server-side\n\nNo external scripts required. I have written these examples in PHP, but they can be written in any language.\n\n### Same-domain Upload\n\n```php\n\n<?php\n\n\n\n/*\n * All of your application logic with $_FILES[\"file\"] goes here.\n * It is important that nothing is outputted yet.\n */\n\n\n\n// $output will be converted into JSON\n\nif ($sucess) {\n\t$output = array(\"success\" => true, \"message\" => \"Success!\");\n} else {\n\t$output = array(\"success\" => false, \"error\" => \"Failure!\");\n}\n\n\n\nif (($iframeId = (int)$_GET[\"_iframeUpload\"]) > 0) { //old browser...\n\n\theader(\"Content-Type: text/html; charset=utf-8\");\n\n?>\n<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n<script type=\"text/javascript\">\n\nvar data = {\n\tid: <?php echo $iframeId; ?>,\n\ttype: \"json\",\n\tdata: <?php echo json_encode($output); ?>\n};\n\nparent.simpleUpload.iframeCallback(data);\n\n</script>\n</body>\n</html>\n<?php\n\n} else { //new browser...\n\n\theader(\"Content-Type: application/json; charset=utf-8\");\n\techo json_encode($output);\n\n}\n\n?>\n\n```\n\n### Cross-domain Upload\n\n```php\n\n<?php\n\n$remoteOrigin = \"http://www.remote-domain.com\"; //change to the origin of your webpage\n\n\n\n/* FOR AJAX CORS REQUESTS */\n\nif ($_SERVER[\"HTTP_ORIGIN\"]===$remoteOrigin) {\n\n\theader(\"Access-Control-Allow-Origin: \" . $_SERVER[\"HTTP_ORIGIN\"]);\n\n\t/* Uncomment to allow cookies across domains */\n\t//header(\"Access-Control-Allow-Credentials: true\");\n\n\t/* Uncomment to improve performance after testing */\n\t//header(\"Access-Control-Max-Age: 86400\"); // cache for 1 day\n\n}\n\nif ($_SERVER[\"REQUEST_METHOD\"]===\"OPTIONS\") {\n\n\tif (isset($_SERVER[\"HTTP_ACCESS_CONTROL_REQUEST_METHOD\"]))\n\t\theader(\"Access-Control-Allow-Methods: GET, POST, OPTIONS\");\n\n\tif (isset($_SERVER[\"HTTP_ACCESS_CONTROL_REQUEST_HEADERS\"]))\n\t\theader(\"Access-Control-Allow-Headers: \" . $_SERVER[\"HTTP_ACCESS_CONTROL_REQUEST_HEADERS\"]);\n\n\texit(0);\n\n}\n\n/* END AJAX CORS CONFIGURATION */\n\n\n\n/*\n * All of your application logic with $_FILES[\"file\"] goes here.\n * It is important that nothing is outputted yet.\n */\n\n\n\n// $output will be converted into JSON\n\nif ($sucess) {\n\t$output = array(\"success\" => true, \"message\" => \"Success!\");\n} else {\n\t$output = array(\"success\" => false, \"error\" => \"Failure!\");\n}\n\n\n\nif (($iframeId = (int)$_GET[\"_iframeUpload\"]) > 0) { //old browser...\n\n\theader(\"Content-Type: text/html; charset=utf-8\");\n\n?>\n<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n<script type=\"text/javascript\">\n\nvar data = {\n\tnamespace: \"simpleUpload\",\n\tid: <?php echo $iframeId; ?>,\n\ttype: \"json\",\n\tdata: <?php echo json_encode($output); ?>,\n\txDomain: \"<?php echo $remoteOrigin; ?>\"\n};\n\ntry {\n\tparent.simpleUpload.iframeCallback(data);\n} catch(e) {\n\tparent.postMessage(JSON.stringify(data), data.xDomain);\n}\n\n</script>\n</body>\n</html>\n<?php\n\n} else { //new browser...\n\n\theader(\"Content-Type: application/json; charset=utf-8\");\n\techo json_encode($output);\n\n}\n\n?>\n\n```\n\nI created simpleUpload.js because I could not find a solution for uploading files that was simple, efficient, non-intrusive, and backwards-compatible. Now it exists.\n\n#### simpleUpload.js is free to use under the MIT License\n\n#### Full documentation and examples can be found here: http://simpleupload.michaelcbrook.com/\n","maintainers":[{"name":"michaelcbrook","email":"michaelcbrook@gmail.com"}],"time":{"modified":"2022-06-19T05:12:08.722Z","created":"2015-03-08T09:08:45.813Z","1.0.0":"2015-03-08T09:08:47.901Z","1.1.0":"2018-04-30T20:07:19.103Z"},"readmeFilename":"README.md","homepage":"http://simpleupload.michaelcbrook.com/","keywords":["file","upload","jquery","plugin","simple","ajax","html5","iframe","jquery-plugin","ecosystem:jquery"],"repository":{"type":"git","url":"git+https://github.com/michaelcbrook/simpleUpload.js.git"},"author":{"name":"Michael Brook","email":"michaelcbrook@gmail.com","url":"http://michaelcbrook.com/"},"bugs":{"url":"https://github.com/michaelcbrook/simpleUpload.js/issues"},"license":"MIT","users":{"myang32":true}}