uploadarea/dist/UploadArea.min.js

A simple to use Vanilla JS drag and drop file uploader

"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),UploadArea=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"uploadArea",n=arguments[1];if(_classCallCheck(this,e),this.instanceNumber=++e.instances,this.divId=t,this.options={required:!1,allowDrop:!0,allowMultiple:!0,sendTo:"https://posttestserver.com/post.php",onFilesReceived:function(e){}},this.previousProgressPercentage=0,n&&"object"==(void 0===n?"undefined":_typeof(n)))for(var i in n)({}).hasOwnProperty.call(n,i)&&(this.options[i]=n[i]);this.init()}return _createClass(e,[{key:"init",value:function(){var e=document.getElementById(this.divId);e&&(this.initUploadArea(e),this.initFileInput(),this.uploadArea.appendChild(this.fileInput))}},{key:"initUploadArea",value:function(e){var t=this;this.uploadArea=e,this.uploadArea.addEventListener("dragover",function(e){t.ondragover(e)}),this.uploadArea.addEventListener("drop",function(e){t.ondrop(e)}),this.uploadArea.addEventListener("click",function(e){t.fileInput.click()}),this.uploadArea.style.cursor="pointer"}},{key:"initFileInput",value:function(){var e=this;this.fileInput=document.createElement("input"),this.fileInput.type="file",this.fileInput.style.display="none",this.fileInput.id="uploadAreaFileInput"+this.instanceNumber,this.options.required&&this.fileInput.setAttribute("required",""),this.options.allowMultiple&&this.fileInput.setAttribute("multiple",""),this.fileInput.addEventListener("change",function(t){e.handleFiles(e.fileInput.files),e.fileInput.value=null})}},{key:"ondragover",value:function(e){e.preventDefault()}},{key:"handleFiles",value:function(e){if(!Array.isArray(e)){var t=[],n=!0,i=!1,o=void 0;try{for(var r,l=e[Symbol.iterator]();!(n=(r=l.next()).done);n=!0){var a=r.value;t.push(a)}}catch(e){i=!0,o=e}finally{try{!n&&l.return&&l.return()}finally{if(i)throw o}}e=t}this.options.onFilesReceived(e),this.options.upload?this.options.upload(e):this.upload(e)}},{key:"ondrop",value:function(e){if(this.options.allowDrop){e.preventDefault();var t=e.dataTransfer;if(t.items){var n=[];if(this.options.allowMultiple){var i=!0,o=!1,r=void 0;try{for(var l,a=t.items[Symbol.iterator]();!(i=(l=a.next()).done);i=!0){var s=l.value;if("file"==s.kind){var u=s.getAsFile();n.push(u)}}}catch(e){o=!0,r=e}finally{try{!i&&a.return&&a.return()}finally{if(o)throw r}}}else t.items.length>0&&n.push(t.items[0].getAsFile());this.handleFiles(n)}}}},{key:"onComplete",value:function(e){this.options.complete&&this.options.complete(e)}},{key:"onError",value:function(e){this.options.error&&this.options.error(e)}},{key:"upload",value:function(e){var t=this;if(e&&e.length>0){var n=new FormData,i=!0,o=!1,r=void 0;try{for(var l,a=e[Symbol.iterator]();!(i=(l=a.next()).done);i=!0){var s=l.value;n.append(s.name,s)}}catch(e){o=!0,r=e}finally{try{!i&&a.return&&a.return()}finally{if(o)throw r}}var u=new XMLHttpRequest;u.open("POST",this.options.sendTo,!0),u.upload.onprogress=function(e){t.options.progress&&t.options.progress(e)},u.onload=function(){200==u.status?t.onComplete(u.responseText):t.onError(u.responseText)},u.send(n)}}}],[{key:"hideElement",value:function(e){var t=document.getElementById(e);t&&(t.style.display="none")}},{key:"showElement",value:function(e){var t=document.getElementById(e);t&&(t.style.display="block")}}]),e}();UploadArea.instances=0;