Launch Week Day 3: Introducing Organization Notifications in Socket.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

vue2-dropzone

Package Overview
Dependencies
Maintainers
2
Versions
52
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-dropzone - npm Package Compare versions

Comparing version
2.3.6
 to
3.0.0
+98
dist/vue2Dropzone.css
@import url('~dropzone/dist/dropzone.css');
.vue-dropzone {
border: 2px solid #E5E5E5;
font-family: 'Arial', sans-serif;
letter-spacing: 0.2px;
color: #777;
transition: background-color 0.2s linear;
}
.vue-dropzone:hover {
background-color: #F6F6F6;
}
.vue-dropzone i {
color: #CCC;
}
.vue-dropzone .dz-preview .dz-image {
border-radius: 0;
width: 100%;
height: 100%;
}
.vue-dropzone .dz-preview .dz-image img:not([src]) {
width: 200px;
height: 200px;
}
.vue-dropzone .dz-preview .dz-image:hover img {
transform: none;
-webkit-filter: none;
}
.vue-dropzone .dz-preview .dz-details {
bottom: 0;
top: 0;
color: white;
background-color: rgba(33, 150, 243, 0.8);
transition: opacity .2s linear;
text-align: left;
}
.vue-dropzone .dz-preview .dz-details .dz-filename {
overflow: hidden;
}
.vue-dropzone .dz-preview .dz-details .dz-filename span,
.vue-dropzone .dz-preview .dz-details .dz-size span {
background-color: transparent;
}
.vue-dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: none;
}
.vue-dropzone .dz-preview .dz-details .dz-filename:hover span {
background-color: transparent;
border: none;
}
.vue-dropzone .dz-preview .dz-progress .dz-upload {
background: #cccccc;
}
.vue-dropzone .dz-preview .dz-remove {
position: absolute;
z-index: 30;
color: white;
margin-left: 15px;
padding: 10px;
top: inherit;
bottom: 15px;
border: 2px white solid;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 1.1px;
opacity: 0;
}
.vue-dropzone .dz-preview:hover .dz-remove {
opacity: 1;
}
.vue-dropzone .dz-preview .dz-success-mark,
.vue-dropzone .dz-preview .dz-error-mark {
margin-left: auto;
margin-top: auto;
width: 100%;
top: 35%;
left: 0;
}
.vue-dropzone .dz-preview .dz-success-mark svg,
.vue-dropzone .dz-preview .dz-error-mark svg {
margin-left: auto;
margin-right: auto;
}
.vue-dropzone .dz-preview .dz-error-message {
top: calc(15%);
margin-left: auto;
margin-right: auto;
left: 0;
width: 100%;
}
.vue-dropzone .dz-preview .dz-error-message:after {
bottom: -6px;
top: initial;
border-top: 6px solid #a92222;
border-bottom: none;
} 
+2
dist/vue2Dropzone.js
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):e.vue2Dropzone=o()}(this,function(){"use strict";var e={getSignedURL:function(e,o){e.name,e.type;return new Promise(function(e,n){var t=new XMLHttpRequest;t.open("POST",o),t.onload=function(){200==t.status?e(JSON.parse(t.response)):n(t.statusText)},t.onerror=function(e){console.error("Network Error : Could not send request to AWS (Maybe CORS errors)"),n(e)},t.send()})},sendFile:function(e,o){var n=new FormData;return this.getSignedURL(e,o).then(function(o){var t=o.signature;return Object.keys(t).forEach(function(o){"key"==o?n.append("key",e.name):"Content-Type"==o?n.append("Content-Type",e.type):n.append(o,t[o])}),n.append("file",e),new Promise(function(e,t){var i=new XMLHttpRequest;i.open("POST",o.postEndpoint),i.onload=function(){if(201==i.status){var o=(n=(new window.DOMParser).parseFromString(i.response,"text/xml")).firstChild.children[0].innerHTML;e({success:!0,message:o})}else{var n=(new window.DOMParser).parseFromString(i.response,"text/xml"),r=n.firstChild.children[0].innerHTML;t({success:!1,message:r+". Request is marked as resolved when returns as status 201"})}},i.onerror=function(e){var o=(new window.DOMParser).parseFromString(i.response,"text/xml").firstChild.children[1].innerHTML;t({success:!1,message:o})},i.send(n)})}).catch(function(e){return e})}};return{render:function(){var e=this,o=e.$createElement;return(e._self._c||o)("div",{ref:"dropzoneElement",class:{"vue-dropzone dropzone":e.includeStyling},attrs:{id:e.id}})},staticRenderFns:[],props:{id:{type:String,required:!0},options:{type:Object,required:!0},includeStyling:{type:Boolean,default:!0,required:!1},awss3:{type:Object,required:!1,default:null},destroyDropzone:{type:Boolean,default:!0,required:!1}},data:function(){return{isS3:!1,wasQueueAutoProcess:!0}},computed:{dropzoneSettings:function(){var e={thumbnailWidth:200,thumbnailHeight:200};return Object.keys(this.options).forEach(function(o){e[o]=this.options[o]},this),null!==this.awss3&&(e.autoProcessQueue=!1,this.isS3=!0,void 0!==this.options.autoProcessQueue&&(this.wasQueueAutoProcess=this.options.autoProcessQueue)),e}},methods:{manuallyAddFile:function(e,o){var n=this;e.manuallyAdded=!0,this.dropzone.emit("addedfile",e),this.dropzone.emit("thumbnail",e,o);for(var t=e.previewElement.querySelectorAll("[data-dz-thumbnail]"),i=0;i<t.length;i++)t[i].style.width=n.dropzoneSettings.thumbnailWidth+"px",t[i].style.height=n.dropzoneSettings.thumbnailHeight+"px",t[i].style["object-fit"]="contain";this.dropzone.emit("complete",e),this.dropzone.options.maxFiles&&this.dropzone.options.maxFiles--,this.dropzone.files.push(e),this.$emit("vdropzone-file-added-manually",e)},setOption:function(e,o){this.dropzone.options[e]=o},removeAllFiles:function(e){this.dropzone.removeAllFiles(e)},processQueue:function(){var e=this,o=this.dropzone;this.isS3&&!this.wasQueueAutoProcess?this.getQueuedFiles().forEach(function(o){e.getSignedAndUploadToS3(o)}):this.dropzone.processQueue(),this.dropzone.on("success",function(){o.options.autoProcessQueue=!0}),this.dropzone.on("queuecomplete",function(){o.options.autoProcessQueue=!1})},init:function(){return this.dropzone.init()},destroy:function(){return this.dropzone.destroy()},updateTotalUploadProgress:function(){return this.dropzone.updateTotalUploadProgress()},getFallbackForm:function(){return this.dropzone.getFallbackForm()},getExistingFallback:function(){return this.dropzone.getExistingFallback()},setupEventListeners:function(){return this.dropzone.setupEventListeners()},removeEventListeners:function(){return this.dropzone.removeEventListeners()},disable:function(){return this.dropzone.disable()},enable:function(){return this.dropzone.enable()},filesize:function(e){return this.dropzone.filesize(e)},accept:function(e,o){return this.dropzone.accept(e,o)},addFile:function(e){return this.dropzone.addFile(e)},removeFile:function(e){this.dropzone.removeFile(e)},getAcceptedFiles:function(){return this.dropzone.getAcceptedFiles()},getRejectedFiles:function(){return this.dropzone.getRejectedFiles()},getFilesWithStatus:function(){return this.dropzone.getFilesWithStatus()},getQueuedFiles:function(){return this.dropzone.getQueuedFiles()},getUploadingFiles:function(){return this.dropzone.getUploadingFiles()},getAddedFiles:function(){return this.dropzone.getAddedFiles()},getActiveFiles:function(){return this.dropzone.getActiveFiles()},getSignedAndUploadToS3:function(o){var n=this;e.sendFile(o,this.awss3.signingURL).then(function(e){e.success?(o.s3ObjectLocation=e.message,setTimeout(function(){return n.dropzone.processFile(o)}),n.$emit("vdropzone-s3-upload-success",e.message)):"undefined"!=typeof message?n.$emit("vdropzone-s3-upload-error",e.message):n.$emit("vdropzone-s3-upload-error","Network Error : Could not send request to AWS. (Maybe CORS error)")}).catch(function(e){alert(e)})},setAWSSigningURL:function(e){this.isS3&&(this.awss3.signingURL=e)}},mounted:function(){if(!this.$isServer||!this.hasBeenMounted){this.hasBeenMounted=!0;var e=require("dropzone");e.autoDiscover=!1,this.dropzone=new e(this.$refs.dropzoneElement,this.dropzoneSettings);var o=this;this.dropzone.on("thumbnail",function(e,n){o.$emit("vdropzone-thumbnail",e,n)}),this.dropzone.on("addedfile",function(e){o.duplicateCheck&&this.files.length&&this.files.forEach(function(n){n.name===e.name&&(this.removeFile(e),o.$emit("duplicate-file",e))},this),o.$emit("vdropzone-file-added",e),o.isS3&&o.wasQueueAutoProcess&&o.getSignedAndUploadToS3(e)}),this.dropzone.on("addedfiles",function(e){o.$emit("vdropzone-files-added",e)}),this.dropzone.on("removedfile",function(e){o.$emit("vdropzone-removed-file",e),e.manuallyAdded&&o.dropzone.options.maxFiles++}),this.dropzone.on("success",function(e,n){o.$emit("vdropzone-success",e,n),o.isS3&&o.wasQueueAutoProcess&&o.setOption("autoProcessQueue",!1)}),this.dropzone.on("successmultiple",function(e,n){o.$emit("vdropzone-success-multiple",e,n)}),this.dropzone.on("error",function(e,n,t){o.$emit("vdropzone-error",e,n,t)}),this.dropzone.on("errormultiple",function(e,n,t){o.$emit("vdropzone-error-multiple",e,n,t)}),this.dropzone.on("sending",function(e,n,t){o.isS3&&t.append("s3ObjectLocation",e.s3ObjectLocation),o.$emit("vdropzone-sending",e,n,t)}),this.dropzone.on("sendingmultiple",function(e,n,t){o.$emit("vdropzone-sending-multiple",e,n,t)}),this.dropzone.on("complete",function(e){o.$emit("vdropzone-complete",e)}),this.dropzone.on("completemultiple",function(e){o.$emit("vdropzone-complete-multiple",e)}),this.dropzone.on("canceled",function(e){o.$emit("vdropzone-canceled",e)}),this.dropzone.on("canceledmultiple",function(e){o.$emit("vdropzone-canceled-multiple",e)}),this.dropzone.on("maxfilesreached",function(e){o.$emit("vdropzone-max-files-reached",e)}),this.dropzone.on("maxfilesexceeded",function(e){o.$emit("vdropzone-max-files-exceeded",e)}),this.dropzone.on("processing",function(e){o.$emit("vdropzone-processing",e)}),this.dropzone.on("processing",function(e){o.$emit("vdropzone-processing",e)}),this.dropzone.on("processingmultiple",function(e){o.$emit("vdropzone-processing-multiple",e)}),this.dropzone.on("uploadprogress",function(e,n,t){o.$emit("vdropzone-upload-progress",e,n,t)}),this.dropzone.on("totaluploadprogress",function(e,n,t){o.$emit("vdropzone-total-upload-progress",e,n,t)}),this.dropzone.on("reset",function(){o.$emit("vdropzone-reset")}),this.dropzone.on("queuecomplete",function(){o.$emit("vdropzone-queuecomplete")}),this.dropzone.on("drop",function(e){o.$emit("vdropzone-drop",e)}),this.dropzone.on("dragstart",function(e){o.$emit("vdropzone-drag-start",e)}),this.dropzone.on("dragend",function(e){o.$emit("vdropzone-drag-end",e)}),this.dropzone.on("dragenter",function(e){o.$emit("vdropzone-drag-enter",e)}),this.dropzone.on("dragover",function(e){o.$emit("vdropzone-drag-over",e)}),this.dropzone.on("dragleave",function(e){o.$emit("vdropzone-drag-leave",e)}),o.$emit("vdropzone-mounted")}},beforeDestroy:function(){this.destroyDropzone&&this.dropzone.destroy()}}});
//# sourceMappingURL=vue2Dropzone.js.map 
+1
dist/vue2Dropzone.js.map
{"version":3,"file":"vue2Dropzone.js","sources":["../src/services/urlsigner.js","../src/components/vue-dropzone.vue"],"sourcesContent":["export default {\r\n getSignedURL(file, endpoint) {\r\n let payload = {\r\n filePath: file.name,\r\n contentType: file.type\r\n }\r\n\r\n return new Promise((resolve, reject) => {\r\n let request = new XMLHttpRequest();\r\n request.open(\"POST\", endpoint);\r\n request.onload = function () {\r\n if (request.status == 200) {\r\n resolve(JSON.parse(request.response));\r\n } else {\r\n reject((request.statusText));\r\n }\r\n };\r\n request.onerror = function (err) {\r\n console.error(\"Network Error : Could not send request to AWS (Maybe CORS errors)\");\r\n reject(err)\r\n };\r\n request.send();\r\n });\r\n },\r\n sendFile(file, endpoint) {\r\n var fd = new FormData();\r\n return this.getSignedURL(file, endpoint)\r\n .then((response) => {\r\n let signature = response.signature;\r\n Object.keys(signature).forEach(function (key) {\r\n if (key == 'key') {\r\n fd.append('key', file.name);\r\n } else if (key == 'Content-Type') {\r\n fd.append(\"Content-Type\", file.type);\r\n } else {\r\n fd.append(key, signature[key]);\r\n }\r\n });\r\n fd.append('file', file);\r\n return new Promise((resolve, reject) => {\r\n let request = new XMLHttpRequest();\r\n request.open('POST', response.postEndpoint);\r\n request.onload = function () {\r\n if (request.status == 201) {\r\n var s3Error = (new window.DOMParser()).parseFromString(request.response, \"text/xml\");\r\n var successMsg = s3Error.firstChild.children[0].innerHTML;\r\n resolve({\r\n 'success': true,\r\n 'message': successMsg\r\n })\r\n } else {\r\n var s3Error = (new window.DOMParser()).parseFromString(request.response, \"text/xml\");\r\n var errMsg = s3Error.firstChild.children[0].innerHTML;\r\n reject({\r\n 'success': false,\r\n 'message': errMsg + \". Request is marked as resolved when returns as status 201\"\r\n })\r\n }\r\n };\r\n request.onerror = function (err) {\r\n var s3Error = (new window.DOMParser()).parseFromString(request.response, \"text/xml\");\r\n var errMsg = s3Error.firstChild.children[1].innerHTML;\r\n reject({\r\n 'success': false,\r\n 'message': errMsg\r\n })\r\n };\r\n request.send(fd);\r\n });\r\n })\r\n .catch((error) => {\r\n return error;\r\n });\r\n }\r\n}\r\n","<template>\r\n <div v-bind:class=\"{ 'vue-dropzone dropzone': includeStyling }\" :id=\"id\" ref=\"dropzoneElement\">\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport awsEndpoint from '../services/urlsigner'\r\nexport default {\r\n props: {\r\n id: {\r\n type: String,\r\n required: true\r\n },\r\n options: {\r\n type: Object,\r\n required: true\r\n },\r\n includeStyling: {\r\n type: Boolean,\r\n default: true,\r\n required: false\r\n },\r\n awss3: {\r\n type: Object,\r\n required: false,\r\n default: null\r\n },\r\n destroyDropzone: {\r\n type: Boolean,\r\n default: true,\r\n required: false\r\n }\r\n },\r\n data() {\r\n return {\r\n isS3: false,\r\n wasQueueAutoProcess: true,\r\n }\r\n },\r\n computed: {\r\n dropzoneSettings() {\r\n let defaultValues = {\r\n thumbnailWidth: 200,\r\n thumbnailHeight: 200\r\n }\r\n Object.keys(this.options).forEach(function(key) {\r\n defaultValues[key] = this.options[key]\r\n }, this)\r\n if (this.awss3 !== null) {\r\n defaultValues['autoProcessQueue'] = false;\r\n this.isS3 = true;\r\n if (this.options.autoProcessQueue !== undefined)\r\n this.wasQueueAutoProcess = this.options.autoProcessQueue;\r\n }\r\n return defaultValues\r\n }\r\n },\r\n methods: {\r\n manuallyAddFile: function(file, fileUrl) {\r\n file.manuallyAdded = true;\r\n this.dropzone.emit(\"addedfile\", file);\r\n this.dropzone.emit(\"thumbnail\", file, fileUrl);\r\n\r\n var thumbnails = file.previewElement.querySelectorAll('[data-dz-thumbnail]');\r\n for (var i = 0; i < thumbnails.length; i++) {\r\n thumbnails[i].style.width = this.dropzoneSettings.thumbnailWidth + 'px';\r\n thumbnails[i].style.height = this.dropzoneSettings.thumbnailHeight + 'px';\r\n thumbnails[i].style['object-fit'] = 'contain';\r\n }\r\n this.dropzone.emit(\"complete\", file)\r\n if (this.dropzone.options.maxFiles) this.dropzone.options.maxFiles--\r\n this.dropzone.files.push(file)\r\n this.$emit('vdropzone-file-added-manually', file)\r\n },\r\n setOption: function(option, value) {\r\n this.dropzone.options[option] = value\r\n },\r\n removeAllFiles: function(bool) {\r\n this.dropzone.removeAllFiles(bool)\r\n },\r\n processQueue: function() {\r\n let dropzoneEle = this.dropzone;\r\n if (this.isS3 && !this.wasQueueAutoProcess) {\r\n this.getQueuedFiles().forEach((file) => {\r\n this.getSignedAndUploadToS3(file);\r\n });\r\n } else {\r\n this.dropzone.processQueue();\r\n }\r\n this.dropzone.on(\"success\", function() {\r\n dropzoneEle.options.autoProcessQueue = true\r\n });\r\n this.dropzone.on('queuecomplete', function() {\r\n dropzoneEle.options.autoProcessQueue = false\r\n })\r\n },\r\n init: function() {\r\n return this.dropzone.init();\r\n },\r\n destroy: function() {\r\n return this.dropzone.destroy();\r\n },\r\n updateTotalUploadProgress: function() {\r\n return this.dropzone.updateTotalUploadProgress();\r\n },\r\n getFallbackForm: function() {\r\n return this.dropzone.getFallbackForm();\r\n },\r\n getExistingFallback: function() {\r\n return this.dropzone.getExistingFallback();\r\n },\r\n setupEventListeners: function() {\r\n return this.dropzone.setupEventListeners();\r\n },\r\n removeEventListeners: function() {\r\n return this.dropzone.removeEventListeners();\r\n },\r\n disable: function() {\r\n return this.dropzone.disable();\r\n },\r\n enable: function() {\r\n return this.dropzone.enable();\r\n },\r\n filesize: function(size) {\r\n return this.dropzone.filesize(size);\r\n },\r\n accept: function(file, done) {\r\n return this.dropzone.accept(file, done);\r\n },\r\n addFile: function(file) {\r\n return this.dropzone.addFile(file);\r\n },\r\n removeFile: function(file) {\r\n this.dropzone.removeFile(file)\r\n },\r\n getAcceptedFiles: function() {\r\n return this.dropzone.getAcceptedFiles()\r\n },\r\n getRejectedFiles: function() {\r\n return this.dropzone.getRejectedFiles()\r\n },\r\n getFilesWithStatus: function() {\r\n return this.dropzone.getFilesWithStatus()\r\n },\r\n getQueuedFiles: function() {\r\n return this.dropzone.getQueuedFiles()\r\n },\r\n getUploadingFiles: function() {\r\n return this.dropzone.getUploadingFiles()\r\n },\r\n getAddedFiles: function() {\r\n return this.dropzone.getAddedFiles()\r\n },\r\n getActiveFiles: function() {\r\n return this.dropzone.getActiveFiles()\r\n },\r\n getSignedAndUploadToS3(file) {\r\n awsEndpoint.sendFile(file, this.awss3.signingURL)\r\n .then((response) => {\r\n if (response.success) {\r\n file.s3ObjectLocation = response.message\r\n setTimeout(() => this.dropzone.processFile(file))\r\n this.$emit('vdropzone-s3-upload-success', response.message);\r\n } else {\r\n if ('undefined' !== typeof message) {\r\n this.$emit('vdropzone-s3-upload-error', response.message);\r\n } else {\r\n this.$emit('vdropzone-s3-upload-error', \"Network Error : Could not send request to AWS. (Maybe CORS error)\");\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n alert(error);\r\n });\r\n },\r\n setAWSSigningURL(location) {\r\n if (this.isS3) {\r\n this.awss3.signingURL = location;\r\n }\r\n }\r\n },\r\n mounted() {\r\n if (this.$isServer && this.hasBeenMounted) {\r\n return\r\n }\r\n this.hasBeenMounted = true\r\n let Dropzone = require('dropzone') //eslint-disable-line\r\n Dropzone.autoDiscover = false\r\n this.dropzone = new Dropzone(this.$refs.dropzoneElement, this.dropzoneSettings)\r\n let vm = this\r\n\r\n this.dropzone.on('thumbnail', function(file, dataUrl) {\r\n vm.$emit('vdropzone-thumbnail', file, dataUrl)\r\n })\r\n\r\n this.dropzone.on('addedfile', function(file) {\r\n if (vm.duplicateCheck) {\r\n if (this.files.length) {\r\n this.files.forEach(function(dzfile) {\r\n if (dzfile.name === file.name) {\r\n this.removeFile(file)\r\n vm.$emit('duplicate-file', file)\r\n }\r\n }, this)\r\n }\r\n }\r\n vm.$emit('vdropzone-file-added', file)\r\n if (vm.isS3 && vm.wasQueueAutoProcess) {\r\n vm.getSignedAndUploadToS3(file);\r\n }\r\n })\r\n\r\n this.dropzone.on('addedfiles', function(files) {\r\n vm.$emit('vdropzone-files-added', files)\r\n })\r\n\r\n this.dropzone.on('removedfile', function(file) {\r\n vm.$emit('vdropzone-removed-file', file)\r\n if (file.manuallyAdded) vm.dropzone.options.maxFiles++\r\n })\r\n\r\n this.dropzone.on('success', function(file, response) {\r\n vm.$emit('vdropzone-success', file, response)\r\n if (vm.isS3 && vm.wasQueueAutoProcess) {\r\n vm.setOption('autoProcessQueue', false);\r\n }\r\n })\r\n\r\n this.dropzone.on('successmultiple', function(file, response) {\r\n vm.$emit('vdropzone-success-multiple', file, response)\r\n })\r\n\r\n this.dropzone.on('error', function(file, message, xhr) {\r\n vm.$emit('vdropzone-error', file, message, xhr)\r\n })\r\n\r\n this.dropzone.on('errormultiple', function(files, message, xhr) {\r\n vm.$emit('vdropzone-error-multiple', files, message, xhr)\r\n })\r\n\r\n this.dropzone.on('sending', function(file, xhr, formData) {\r\n if (vm.isS3)\r\n formData.append('s3ObjectLocation', file.s3ObjectLocation);\r\n vm.$emit('vdropzone-sending', file, xhr, formData)\r\n })\r\n\r\n this.dropzone.on('sendingmultiple', function(file, xhr, formData) {\r\n vm.$emit('vdropzone-sending-multiple', file, xhr, formData)\r\n })\r\n\r\n this.dropzone.on('complete', function(file) {\r\n vm.$emit('vdropzone-complete', file)\r\n })\r\n\r\n this.dropzone.on('completemultiple', function(files) {\r\n vm.$emit('vdropzone-complete-multiple', files)\r\n })\r\n\r\n this.dropzone.on('canceled', function(file) {\r\n vm.$emit('vdropzone-canceled', file)\r\n })\r\n\r\n this.dropzone.on('canceledmultiple', function(files) {\r\n vm.$emit('vdropzone-canceled-multiple', files)\r\n })\r\n\r\n this.dropzone.on('maxfilesreached', function(files) {\r\n vm.$emit('vdropzone-max-files-reached', files)\r\n })\r\n\r\n this.dropzone.on('maxfilesexceeded', function(file) {\r\n vm.$emit('vdropzone-max-files-exceeded', file)\r\n })\r\n\r\n this.dropzone.on('processing', function(file) {\r\n vm.$emit('vdropzone-processing', file)\r\n })\r\n\r\n this.dropzone.on('processing', function(file) {\r\n vm.$emit('vdropzone-processing', file)\r\n })\r\n\r\n this.dropzone.on('processingmultiple', function(files) {\r\n vm.$emit('vdropzone-processing-multiple', files)\r\n })\r\n\r\n this.dropzone.on('uploadprogress', function(file, progress, bytesSent) {\r\n vm.$emit('vdropzone-upload-progress', file, progress, bytesSent)\r\n })\r\n\r\n this.dropzone.on('totaluploadprogress', function(totaluploadprogress, totalBytes, totalBytesSent) {\r\n vm.$emit('vdropzone-total-upload-progress', totaluploadprogress, totalBytes, totalBytesSent)\r\n })\r\n\r\n this.dropzone.on('reset', function() {\r\n vm.$emit('vdropzone-reset')\r\n })\r\n\r\n this.dropzone.on('queuecomplete', function() {\r\n vm.$emit('vdropzone-queuecomplete')\r\n })\r\n\r\n this.dropzone.on('drop', function(event) {\r\n vm.$emit('vdropzone-drop', event)\r\n })\r\n\r\n this.dropzone.on('dragstart', function(event) {\r\n vm.$emit('vdropzone-drag-start', event)\r\n })\r\n\r\n this.dropzone.on('dragend', function(event) {\r\n vm.$emit('vdropzone-drag-end', event)\r\n })\r\n\r\n this.dropzone.on('dragenter', function(event) {\r\n vm.$emit('vdropzone-drag-enter', event)\r\n })\r\n\r\n this.dropzone.on('dragover', function(event) {\r\n vm.$emit('vdropzone-drag-over', event)\r\n })\r\n\r\n this.dropzone.on('dragleave', function(event) {\r\n vm.$emit('vdropzone-drag-leave', event)\r\n })\r\n\r\n vm.$emit('vdropzone-mounted')\r\n },\r\n beforeDestroy() {\r\n if (this.destroyDropzone) this.dropzone.destroy()\r\n }\r\n}\r\n\r\n</script>\r\n\r\n<style lang=\"less\">\r\n @import url('~dropzone/dist/dropzone.css');\r\n\r\n .vue-dropzone {\r\n border: 2px solid #E5E5E5;\r\n font-family: 'Arial', sans-serif;\r\n letter-spacing: 0.2px;\r\n color: #777;\r\n transition: background-color .2s linear;\r\n\r\n &:hover {\r\n background-color: #F6F6F6;\r\n }\r\n\r\n i {\r\n color: #CCC;\r\n }\r\n\r\n .dz-preview {\r\n\r\n .dz-image {\r\n border-radius: 0;\r\n width: 100%;\r\n height: 100%;\r\n img:not([src]) {\r\n width: 200px;\r\n height: 200px;\r\n }\r\n &:hover {\r\n img {\r\n transform: none;\r\n -webkit-filter: none;\r\n }\r\n }\r\n }\r\n\r\n .dz-details {\r\n bottom: 0;\r\n top: 0;\r\n color: white;\r\n background-color: rgba(33, 150, 243, 0.8);\r\n transition: opacity .2s linear;\r\n text-align: left;\r\n .dz-filename {\r\n overflow: hidden;\r\n }\r\n .dz-filename span,\r\n .dz-size span {\r\n background-color: transparent;\r\n }\r\n .dz-filename:not(:hover) span {\r\n border: none;\r\n }\r\n .dz-filename:hover span {\r\n background-color: transparent;\r\n border: none;\r\n }\r\n }\r\n\r\n .dz-progress .dz-upload {\r\n background: #cccccc;\r\n }\r\n\r\n .dz-remove {\r\n position: absolute;\r\n z-index: 30;\r\n color: white;\r\n margin-left: 15px;\r\n padding: 10px;\r\n top: inherit;\r\n bottom: 15px;\r\n border: 2px white solid;\r\n text-decoration: none;\r\n text-transform: uppercase;\r\n font-size: 0.8rem;\r\n font-weight: 800;\r\n letter-spacing: 1.1px;\r\n opacity: 0;\r\n }\r\n\r\n &:hover {\r\n .dz-remove {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .dz-success-mark,\r\n .dz-error-mark {\r\n margin-left: auto;\r\n margin-top: auto;\r\n width: 100%;\r\n top: 35%;\r\n left: 0;\r\n svg {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n .dz-error-message {\r\n top: calc(15%);\r\n margin-left: auto;\r\n margin-right: auto;\r\n left: 0;\r\n width: 100%;\r\n &:after {\r\n bottom: -6px;\r\n top: initial;\r\n border-top: 6px solid #a92222;\r\n border-bottom: none;\r\n }\r\n }\r\n }\r\n }\r\n</style>\r\n"],"names":["getSignedURL","file","endpoint","name","type","Promise","resolve","reject","let","request","XMLHttpRequest","open","onload","status","JSON","parse","response","onerror","err","console","error","send","sendFile","fd","FormData","this","then","signature","Object","keys","forEach","key","append","postEndpoint","successMsg","s3Error","window","DOMParser","parseFromString","firstChild","children","innerHTML","success","message","errMsg","catch","render","props","id","String","required","options","includeStyling","Boolean","default","awss3","destroyDropzone","data","isS3","wasQueueAutoProcess","computed","dropzoneSettings","defaultValues","thumbnailWidth","thumbnailHeight","undefined","autoProcessQueue","methods","manuallyAddFile","fileUrl","manuallyAdded","dropzone","emit","thumbnails","previewElement","querySelectorAll","i","length","style","width","height","maxFiles","files","push","$emit","setOption","option","value","removeAllFiles","bool","processQueue","dropzoneEle","getQueuedFiles","getSignedAndUploadToS3","on","init","destroy","updateTotalUploadProgress","getFallbackForm","getExistingFallback","setupEventListeners","removeEventListeners","disable","enable","filesize","size","accept","done","addFile","removeFile","getAcceptedFiles","getRejectedFiles","getFilesWithStatus","getUploadingFiles","getAddedFiles","getActiveFiles","awsEndpoint","signingURL","s3ObjectLocation","setTimeout","processFile","alert","setAWSSigningURL","location","mounted","$isServer","hasBeenMounted","Dropzone","require","autoDiscover","$refs","dropzoneElement","vm","dataUrl","duplicateCheck","dzfile","xhr","formData","progress","bytesSent","totaluploadprogress","totalBytes","totalBytesSent","event","beforeDestroy"],"mappings":"wLAAA,OACEA,sBAAaC,EAAMC,GAELD,EAAKE,KACFF,EAAKG,KAGpB,OAAO,IAAIC,QAAQ,SAACC,EAASC,GAC3BC,IAAIC,EAAU,IAAIC,eAClBD,EAAQE,KAAK,OAAQT,GACrBO,EAAQG,OAAS,WACO,KAAlBH,EAAQI,OACVP,EAAQQ,KAAKC,MAAMN,EAAQO,WAE3BT,EAAQE,EAAkB,aAG9BA,EAAQQ,QAAU,SAAUC,GAC1BC,QAAQC,MAAM,qEACdb,EAAOW,IAETT,EAAQY,UAGZC,kBAASrB,EAAMC,GACb,IAAIqB,EAAK,IAAIC,SACb,OAAOC,KAAKzB,aAAaC,EAAMC,GAC5BwB,KAAK,SAACV,GACLR,IAAImB,EAAYX,EAASW,UAWzB,OAVAC,OAAOC,KAAKF,GAAWG,QAAQ,SAAUC,GAC5B,OAAPA,EACFR,EAAGS,OAAO,MAAO/B,EAAKE,MACN,gBAAP4B,EACTR,EAAGS,OAAO,eAAgB/B,EAAKG,MAE/BmB,EAAGS,OAAOD,EAAKJ,EAAUI,MAG7BR,EAAGS,OAAO,OAAQ/B,GACX,IAAII,QAAQ,SAACC,EAASC,GAC3BC,IAAIC,EAAU,IAAIC,eAClBD,EAAQE,KAAK,OAAQK,EAASiB,cAC9BxB,EAAQG,OAAS,WACf,GAAsB,KAAlBH,EAAQI,OAAe,CACzB,IACIqB,GADAC,GAAU,IAAKC,OAAOC,WAAaC,gBAAgB7B,EAAQO,SAAU,aAChDuB,WAAWC,SAAS,GAAGC,UAChDnC,GACEoC,SAAW,EACXC,QAAWT,QAER,CACL,IAAIC,GAAU,IAAKC,OAAOC,WAAaC,gBAAgB7B,EAAQO,SAAU,YACrE4B,EAAST,EAAQI,WAAWC,SAAS,GAAGC,UAC5ClC,GACEmC,SAAW,EACXC,QAAWC,EAAS,iEAI1BnC,EAAQQ,QAAU,SAAUC,GAC1B,IACI0B,GADU,IAAKR,OAAOC,WAAaC,gBAAgB7B,EAAQO,SAAU,YACpDuB,WAAWC,SAAS,GAAGC,UAC5ClC,GACEmC,SAAW,EACXC,QAAWC,KAGfnC,EAAQY,KAAKE,OAGhBsB,MAAM,SAACzB,GACN,OAAOA,aChEC0B,0LACdC,OACEC,IACE5C,KAAM6C,OACNC,UAAU,GAEZC,SACE/C,KAAMwB,OACNsB,UAAU,GAEZE,gBACEhD,KAAMiD,QACNC,SAAS,EACTJ,UAAU,GAEZK,OACEnD,KAAMwB,OACNsB,UAAU,EACVI,QAAS,MAEXE,iBACEpD,KAAMiD,QACNC,SAAS,EACTJ,UAAU,IAGdO,gBACE,OACEC,MAAM,EACNC,qBAAqB,IAGzBC,UACEC,4BACErD,IAAIsD,GACFC,eAAgB,IAChBC,gBAAiB,KAWnB,OATApC,OAAOC,KAAKJ,KAAK0B,SAASrB,QAAQ,SAASC,GACzC+B,EAAc/B,GAAON,KAAK0B,QAAQpB,IACjCN,MACgB,OAAfA,KAAK8B,QACPO,EAAgC,kBAAI,EACpCrC,KAAKiC,MAAO,OAC0BO,IAAlCxC,KAAK0B,QAAQe,mBACfzC,KAAKkC,oBAAsBlC,KAAK0B,QAAQe,mBAErCJ,IAGXK,SACEC,gBAAiB,SAASnE,EAAMoE,cAC9BpE,EAAKqE,eAAgB,EACrB7C,KAAK8C,SAASC,KAAK,YAAavE,GAChCwB,KAAK8C,SAASC,KAAK,YAAavE,EAAMoE,GAGtC,IAAK,IADDI,EAAaxE,EAAKyE,eAAeC,iBAAiB,uBAC7CC,EAAI,EAAGA,EAAIH,EAAWI,OAAQD,IACrCH,EAAWG,GAAGE,MAAMC,MAAQtD,EAAKoC,iBAAiBE,eAAiB,KACnEU,EAAWG,GAAGE,MAAME,OAASvD,EAAKoC,iBAAiBG,gBAAkB,KACrES,EAAWG,GAAGE,MAAM,cAAgB,UAEtCrD,KAAK8C,SAASC,KAAK,WAAYvE,GAC3BwB,KAAK8C,SAASpB,QAAQ8B,UAAUxD,KAAK8C,SAASpB,QAAQ8B,WAC1DxD,KAAK8C,SAASW,MAAMC,KAAKlF,GACzBwB,KAAK2D,MAAM,gCAAiCnF,IAE9CoF,UAAW,SAASC,EAAQC,GAC1B9D,KAAK8C,SAASpB,QAAQmC,GAAUC,GAElCC,eAAgB,SAASC,GACvBhE,KAAK8C,SAASiB,eAAeC,IAE/BC,aAAc,sBACRC,EAAclE,KAAK8C,SACnB9C,KAAKiC,OAASjC,KAAKkC,oBACrBlC,KAAKmE,iBAAiB9D,QAAQ,SAAC7B,GAC7BwB,EAAKoE,uBAAuB5F,KAG9BwB,KAAK8C,SAASmB,eAEhBjE,KAAK8C,SAASuB,GAAG,UAAW,WAC1BH,EAAYxC,QAAQe,kBAAmB,IAEzCzC,KAAK8C,SAASuB,GAAG,gBAAiB,WAChCH,EAAYxC,QAAQe,kBAAmB,KAG3C6B,KAAM,WACJ,OAAOtE,KAAK8C,SAASwB,QAEvBC,QAAS,WACP,OAAOvE,KAAK8C,SAASyB,WAEvBC,0BAA2B,WACzB,OAAOxE,KAAK8C,SAAS0B,6BAEvBC,gBAAiB,WACf,OAAOzE,KAAK8C,SAAS2B,mBAEvBC,oBAAqB,WACnB,OAAO1E,KAAK8C,SAAS4B,uBAEvBC,oBAAqB,WACnB,OAAO3E,KAAK8C,SAAS6B,uBAEvBC,qBAAsB,WACpB,OAAO5E,KAAK8C,SAAS8B,wBAEvBC,QAAS,WACP,OAAO7E,KAAK8C,SAAS+B,WAEvBC,OAAQ,WACN,OAAO9E,KAAK8C,SAASgC,UAEvBC,SAAU,SAASC,GACjB,OAAOhF,KAAK8C,SAASiC,SAASC,IAEhCC,OAAQ,SAASzG,EAAM0G,GACrB,OAAOlF,KAAK8C,SAASmC,OAAOzG,EAAM0G,IAEpCC,QAAS,SAAS3G,GAChB,OAAOwB,KAAK8C,SAASqC,QAAQ3G,IAE/B4G,WAAY,SAAS5G,GACnBwB,KAAK8C,SAASsC,WAAW5G,IAE3B6G,iBAAkB,WAChB,OAAOrF,KAAK8C,SAASuC,oBAEvBC,iBAAkB,WAChB,OAAOtF,KAAK8C,SAASwC,oBAEvBC,mBAAoB,WAClB,OAAOvF,KAAK8C,SAASyC,sBAEvBpB,eAAgB,WACd,OAAOnE,KAAK8C,SAASqB,kBAEvBqB,kBAAmB,WACjB,OAAOxF,KAAK8C,SAAS0C,qBAEvBC,cAAe,WACb,OAAOzF,KAAK8C,SAAS2C,iBAEvBC,eAAgB,WACd,OAAO1F,KAAK8C,SAAS4C,kBAEvBtB,gCAAuB5F,cACrBmH,EAAY9F,SAASrB,EAAMwB,KAAK8B,MAAM8D,YACnC3F,KAAK,SAACV,GACDA,EAAS0B,SACXzC,EAAKqH,iBAAmBtG,EAAS2B,QACjC4E,WAAW,kBAAM9F,EAAK8C,SAASiD,YAAYvH,KAC3CwB,EAAK2D,MAAM,8BAA+BpE,EAAS2B,UAE/C,oBAAuBA,QACzBlB,EAAK2D,MAAM,4BAA6BpE,EAAS2B,SAEjDlB,EAAK2D,MAAM,4BAA6B,uEAI7CvC,MAAM,SAACzB,GACNqG,MAAMrG,MAGZsG,0BAAiBC,GACXlG,KAAKiC,OACPjC,KAAK8B,MAAM8D,WAAaM,KAI9BC,mBACE,IAAInG,KAAKoG,YAAapG,KAAKqG,eAA3B,CAGArG,KAAKqG,gBAAiB,EACtBtH,IAAIuH,EAAWC,QAAQ,YACvBD,EAASE,cAAe,EACxBxG,KAAK8C,SAAW,IAAIwD,EAAStG,KAAKyG,MAAMC,gBAAiB1G,KAAKoC,kBAC9DrD,IAAI4H,EAAK3G,KAETA,KAAK8C,SAASuB,GAAG,YAAa,SAAS7F,EAAMoI,GAC3CD,EAAGhD,MAAM,sBAAuBnF,EAAMoI,KAGxC5G,KAAK8C,SAASuB,GAAG,YAAa,SAAS7F,GACjCmI,EAAGE,gBACD7G,KAAKyD,MAAML,QACbpD,KAAKyD,MAAMpD,QAAQ,SAASyG,GACtBA,EAAOpI,OAASF,EAAKE,OACvBsB,KAAKoF,WAAW5G,GAChBmI,EAAGhD,MAAM,iBAAkBnF,KAE5BwB,MAGP2G,EAAGhD,MAAM,uBAAwBnF,GAC7BmI,EAAG1E,MAAQ0E,EAAGzE,qBAChByE,EAAGvC,uBAAuB5F,KAI9BwB,KAAK8C,SAASuB,GAAG,aAAc,SAASZ,GACtCkD,EAAGhD,MAAM,wBAAyBF,KAGpCzD,KAAK8C,SAASuB,GAAG,cAAe,SAAS7F,GACvCmI,EAAGhD,MAAM,yBAA0BnF,GAC/BA,EAAKqE,eAAe8D,EAAG7D,SAASpB,QAAQ8B,aAG9CxD,KAAK8C,SAASuB,GAAG,UAAW,SAAS7F,EAAMe,GACzCoH,EAAGhD,MAAM,oBAAqBnF,EAAMe,GAChCoH,EAAG1E,MAAQ0E,EAAGzE,qBAChByE,EAAG/C,UAAU,oBAAoB,KAIrC5D,KAAK8C,SAASuB,GAAG,kBAAmB,SAAS7F,EAAMe,GACjDoH,EAAGhD,MAAM,6BAA8BnF,EAAMe,KAG/CS,KAAK8C,SAASuB,GAAG,QAAS,SAAS7F,EAAM0C,EAAS6F,GAChDJ,EAAGhD,MAAM,kBAAmBnF,EAAM0C,EAAS6F,KAG7C/G,KAAK8C,SAASuB,GAAG,gBAAiB,SAASZ,EAAOvC,EAAS6F,GACzDJ,EAAGhD,MAAM,2BAA4BF,EAAOvC,EAAS6F,KAGvD/G,KAAK8C,SAASuB,GAAG,UAAW,SAAS7F,EAAMuI,EAAKC,GAC1CL,EAAG1E,MACL+E,EAASzG,OAAO,mBAAoB/B,EAAKqH,kBAC3Cc,EAAGhD,MAAM,oBAAqBnF,EAAMuI,EAAKC,KAG3ChH,KAAK8C,SAASuB,GAAG,kBAAmB,SAAS7F,EAAMuI,EAAKC,GACtDL,EAAGhD,MAAM,6BAA8BnF,EAAMuI,EAAKC,KAGpDhH,KAAK8C,SAASuB,GAAG,WAAY,SAAS7F,GACpCmI,EAAGhD,MAAM,qBAAsBnF,KAGjCwB,KAAK8C,SAASuB,GAAG,mBAAoB,SAASZ,GAC5CkD,EAAGhD,MAAM,8BAA+BF,KAG1CzD,KAAK8C,SAASuB,GAAG,WAAY,SAAS7F,GACpCmI,EAAGhD,MAAM,qBAAsBnF,KAGjCwB,KAAK8C,SAASuB,GAAG,mBAAoB,SAASZ,GAC5CkD,EAAGhD,MAAM,8BAA+BF,KAG1CzD,KAAK8C,SAASuB,GAAG,kBAAmB,SAASZ,GAC3CkD,EAAGhD,MAAM,8BAA+BF,KAG1CzD,KAAK8C,SAASuB,GAAG,mBAAoB,SAAS7F,GAC5CmI,EAAGhD,MAAM,+BAAgCnF,KAG3CwB,KAAK8C,SAASuB,GAAG,aAAc,SAAS7F,GACtCmI,EAAGhD,MAAM,uBAAwBnF,KAGnCwB,KAAK8C,SAASuB,GAAG,aAAc,SAAS7F,GACtCmI,EAAGhD,MAAM,uBAAwBnF,KAGnCwB,KAAK8C,SAASuB,GAAG,qBAAsB,SAASZ,GAC9CkD,EAAGhD,MAAM,gCAAiCF,KAG5CzD,KAAK8C,SAASuB,GAAG,iBAAkB,SAAS7F,EAAMyI,EAAUC,GAC1DP,EAAGhD,MAAM,4BAA6BnF,EAAMyI,EAAUC,KAGxDlH,KAAK8C,SAASuB,GAAG,sBAAuB,SAAS8C,EAAqBC,EAAYC,GAChFV,EAAGhD,MAAM,kCAAmCwD,EAAqBC,EAAYC,KAG/ErH,KAAK8C,SAASuB,GAAG,QAAS,WACxBsC,EAAGhD,MAAM,qBAGX3D,KAAK8C,SAASuB,GAAG,gBAAiB,WAChCsC,EAAGhD,MAAM,6BAGX3D,KAAK8C,SAASuB,GAAG,OAAQ,SAASiD,GAChCX,EAAGhD,MAAM,iBAAkB2D,KAG7BtH,KAAK8C,SAASuB,GAAG,YAAa,SAASiD,GACrCX,EAAGhD,MAAM,uBAAwB2D,KAGnCtH,KAAK8C,SAASuB,GAAG,UAAW,SAASiD,GACnCX,EAAGhD,MAAM,qBAAsB2D,KAGjCtH,KAAK8C,SAASuB,GAAG,YAAa,SAASiD,GACrCX,EAAGhD,MAAM,uBAAwB2D,KAGnCtH,KAAK8C,SAASuB,GAAG,WAAY,SAASiD,GACpCX,EAAGhD,MAAM,sBAAuB2D,KAGlCtH,KAAK8C,SAASuB,GAAG,YAAa,SAASiD,GACrCX,EAAGhD,MAAM,uBAAwB2D,KAGnCX,EAAGhD,MAAM,uBAEX4D,yBACMvH,KAAK+B,iBAAiB/B,KAAK8C,SAASyB"}
+21
LICENSE
MIT License
Copyright (c) 2017 Ruoyun Wu
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. 
+49
-31
package.json
{
"name": "vue2-dropzone",
"description": "A wrapper around Dropzone.js for Vue 2",
"author": "rowanwins <rowanwins@yahoo.com.au>",
"version": "2.3.6",
"main": "./dist/vue2-dropzone.js",
"author": "rowanwins <@rowanwins>",
"contributors": [
"Vaibhavraj Roham <@vrajroham>",
"Alexander Wennerstrøm <@AlexanderYW>"
],
"version": "3.0.0",
"main": "./dist/vue2Dropzone.js",
"peerDependencies": {
"vue": "^2.4.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"less-loader": "^4.0.5",
"marked": "^0.3.6",
"prismjs": "^1.7.0",
"rimraf": "^2.6.1",
"rollup": "^0.46.0",
"rollup-plugin-buble": "^0.15.0",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^2.0.1",
"rollup-plugin-vue": "^2.4.1",
"sass-loader": "^6.0.6",
"serve": "^6.0.6",
"vue": "^2.4.2",
"vue-loader": "^13.0.4",
"vue-router": "^2.7.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.7.1"
},
"scripts": {
"dev": "webpack-dev-server --inline --hot --config ./build/dev.js --port 8080",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/prod.js && npm run build:demo",
"build:demo": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/dev.js",
"prepublish": "npm run build"
"build": "cross-env NODE_ENV=production rollup -c",
"dev": "rollup -c -w",
"start": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build-docs": "npm run clean-docs && cross-env NODE_ENV=production webpack --progress --hide-modules",
"clean-docs": "rimraf docs/dist"
},
"files": [
"dist"
],
"dependencies": {
"dropzone": "^5.1.1",
"vue": "^2.0.0"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"cross-env": "^1.0.6",
"css-loader": "^0.23.0",
"file-loader": "^0.8.4",
"json-loader": "^0.5.4",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^2.0.6",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
"dropzone": "^5.2.0"
}
}
+8
-196
README.md
# vue-dropzone
A Vue component for file uploads, powered by [Dropzone.js](http://www.dropzonejs.com/). [Check out the demo](https://rowanwins.github.io/vue-dropzone/dist/index.html).
A Vue component for file uploads, powered by [Dropzone.js](http://www.dropzonejs.com/). [Check out the demo](https://rowanwins.github.io/vue-dropzone/docs/dist).
## Install
````
// For Vue.js 2.0+
npm install vue2-dropzone@^2.0.0
````
You'll also need to load either the [Material Icon](https://material.io/icons/) or [FontAwesome](http://fontawesome.io/) icon kits depending on which style of icon you'd like.
````html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
````
A **Nuxt SSR-compatible** component can be found at [npm](https://www.npmjs.com/package/nuxt-dropzone) and [github](https://github.com/Etheryte/nuxt-dropzone). Thanks to [@Etheryte](https://github.com/Etheryte)
## Usage
1. Import the module (`import Dropzone from 'vue2-dropzone'`)
2. Register it as a component as you would any other Vue component
3. Use it within your template
---
### Example
````vue
<template>
<div id="app">
<p>Welcome to your Vue.js app!</p>
![](https://i.imgur.com/kUbjks1.gif)
<dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess">
<!-- Optional parameters if any! -->
<input type="hidden" name="token" value="xxx">
</dropzone>
</div>
</template>
<script>
import Dropzone from 'vue2-dropzone'
export default {
name: 'MainApp',
components: {
Dropzone
},
methods: {
'showSuccess': function (file) {
console.log('A file was successfully uploaded')
}
}
}
</script>
````
## Props
Many of these props are inherited from [dropzone configuration so see their doco](http://www.dropzonejs.com/#configuration-options) for further details.
> <b>Important</b> :<br> - If you are using following options as `props` (attributes) to component then use `dash-seperated` names of `props`. <br>E.g. `paramName` becomes `:param-name=""`, `showRemoveLink` becomes `:show-remove-link=""`. <br><br> - If you are passing props using `dropzoneOptions` object then, use prop names <b>same</b> as given in below table. <br>E.g. `:dropzone-options="customOptionsObject"`. `customOptionsObject` is defined in `data()` with following `props` names.
| Prop Name | Type | Description |
|----------|------|--------------|
| id | String | A string by which to identify the component, can be anything. **Required**|
| url | String | Url to post the upload to. **Required**|
| paramName | String | The name of the file param that gets transferred. Defaults to file. NOTE: If you have the option uploadMultiple set to true, then Dropzone will append [] to the name.|
| clickable | Boolean, String | Whether the dropzone area is clickable, if false then users can only drag items on to the area. Can also accept a CSS selector of an element that will open the file dialog when clicked. |
| acceptedFileTypes | String | A comma separated string of accepted file types eg 'image/*,application/pdf,.psd' .|
| thumbnailHeight | Number | The height of thumbnails in pixels.|
| thumbnailWidth | Number | The width of thumbnails in pixels.|
| showRemoveLink | Boolean | Whether the Remove link is shown on items.|
| maxFileSizeInMB | Number |The maximum file size for a single upload in MB.|
| maxNumberOfFiles | Number | The maximum number of files to allow the user to upload.|
| parallelUploads | Number | How many file uploads to process in parallel. `Default : 2`|
| autoProcessQueue | Boolean | Whether the files are automatically uploaded or not.|
| useFontAwesome | Boolean | Whether to use Font Awesome instead of Material Icon.|
| headers | Object | If you want to add additional headers.|
| language | Object | Use dropzone's [dict properties](http://www.dropzonejs.com/#config-dictDefaultMessage) to change texts. |
| useCustomDropzoneOptions | Boolean | If you want to define your own dropzone config set this to true and define a dropzoneOptions.|
| dropzoneOptions | Object | A custom set of rules to define your dropzone object, use anything available in the [dropzone config](http://www.dropzonejs.com/#configuration-options).|
| preview-template | Function | A custom preview template which will be passed as function. See following Note |
| resizeWidth | Number | If set, images will be resized to these dimensions before being uploaded. If only one, `resizeWidth` or `resizeHeight` is provided, the original aspect ratio of the file will be preserved. `Default : null` |
| resizeHeight | Number | Height of image to be resized. `Default : null` |
| resizeMimeType | String | The mime type of the resized image (before it gets uploaded to the server). If `null` the original mime type will be used. To force `jpeg`, for example, use `image/jpeg`. `Default : null` |
| resizeQuality | Number | The quality of the resized images. `Default : null` |
| resizeMethod | String | How the images should be scaled down in case both, `resizeWidth` and `resizeHeight` are provided. Can be either `contain` or `crop`. `Default : 'contain'` |
| duplicateCheck | Boolean | Whether to check for duplicate file by file name. if true `duplicate-file` event will be emitted. `Default : 'false'` |
| timeout | Number | The timeout for the XHR requests in milliseconds. `Default:30000`|
| method | String | The HTTP method used to submit form file data. `Default:post`|
| capture | String | If `null`, no capture type will be specified If `camera`, mobile devices will skip the file selection and choose camera If `microphone`, mobile devices will skip the file selection and choose the microphone If `camcorder`, mobile devices will skip the file selection and choose the camera in `video` mode On apple devices multiple must be set to false. AcceptedFiles may need to be set to an appropriate mime type `(e.g. "image/", "audio/", or "video/*")`. `Default:null` |
| hiddenInputContainer | String | Element the hidden input field will be appended to. This might be important in case you use frameworks to switch the content of your page. `Default:body`|
| confirm | Function | A function for overriding native confirmation dialog box of browser. `Parameters: question, accepted, rejected`|
| withCredentials | Boolean | Whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. `Default:false`|
## Custom Dropzone preview template
> NOTE : Props like `thumbnailWidth,thumbnailHeight, useFontAwesome` will not work when you override the dropzone preview. No worry you can refer [demo file](demo/custom-dropzone-preview.vue) to achieve same. :) Don't forgot to add your styles in `<style>`
[Custom Dropzone Template Demo File](demo/custom-dropzone-preview.vue)
## Methods
Methods you can call on the component.
| Method | Description |
|------------|-------------|
| setOption(optionname, value) | Sets the value of one of the dropzone options after initialisation. Handy if you need to pass through a token after the component has initialised. |
| removeAllFiles() | Empties the dropzone area.|
| processQueue() | Uploads the files, required if autoProcessQueue is set to false.|
| removeFile(file) | Removes a file from the dropzone area.|
| manuallyAddFile(file, fileUrl, callback, crossOrigin) | Manually adds a file to the dropzone area. See the [dropzone doco](https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server) for more information. |
| getAcceptedFiles() | Returns array of valid/ accepted files. |
| getRejectedFiles() | Returns array of Invalid/ rejected files. |
| getUploadingFiles() | Returns array of uploading files. |
| getQueuedFiles() | Returns array of uploading files. |
## Using Methods
Methods can be called from your parent component by making use of the <a href="https://vuejs.org/v2/api/#ref">special tag "ref"</a>.
When you initialize the component add a unique ID to the dropzone element using the ref tag, like this
```html
<dropzone ref="myUniqueID"></dropzone>
```
Then from your parent Vue instance, you can call the methods by using the following:
```javascript
vm.$refs.myUniqueID.processQueue()
//vm refers to your current instance
```
## Events
Events emitted by the component to the parent.
| Event Name | Description |
|------------|-------------|
| vdropzone-file-added(file) | File added to the dropzone.|
| vdropzone-files-added(file) | Files added to the dropzone.|
| vdropzone-file-added-manually(file) | Manually added file to the dropzone |
| vdropzone-thumbnail(file, dataUrl) | When the thumbnail has been generated. Receives the dataUrl as second parameter. |
| vdropzone-success(file, response) | File successfully uploaded.|
| vdropzone-error(file) | File uploaded encountered an error.|
| vdropzone-removed-file(file, error, xhr) | A file was removed from the dropzone.|
| vdropzone-sending(file, xhr, formData) | Modify the request and add addtional parameters to request before sending.|
| vdropzone-success-multiple(files, response) | Fired if the uploadMultiple option is true.|
| vdropzone-sending-multiple(files, xhr, formData) | Fired if the uploadMultiple option is true.|
| vdropzone-queue-complete(file, xhr, formData) | Fired when queue has been completely processed/ uploaded.|
| vdropzone-total-upload-progress(totaluploadprogress, totalBytes, totalBytesSent) | This event can be used to show the overall upload progress of all files. Note : `totaluploadprogress (0-100)`|
| vdropzone-mounted() | Fired when dropzone component is mounted. |
| duplicate-file(file) | Fired when duplicateCheck is enabled. |
## Listening to other Dropzone events
If you've referenced your tag with a ref property/tag as described in 'Using Methods', you can then access the Dropzone instance as well. This is useful if, for example, you want to add event listeners that have not been pre-configured (see below)
From your parent Vue instance:
```javascript
mounted () {
this.$refs.dropzone.dropzone.on('addedfile', function (file) {
if (this.files.length > 1) {
this.removeFile(this.files[0])
}
})
this.$refs.dropzone.dropzone.on('maxfilesexceeded', function (file) {
this.removeFile(file)
})
}
```
## Integration with Laravel Framework
In order to use vue-dropzone with laravel, you need to add the csrf-token to the component. Note that you need 2 things for it to work with Laravel:
1. A hidden input with name="csrf-token" and :value that can be set in data() of your component.
2. Additionally, you need to set :headers attribute for dropzone component where you pass a csrfHeader object created under the data() function in your vue component. See below for example:
```html
<template>
<div>
<dropzone id="myVueDropzone"
url="/post"
v-on:vdropzone-success="showSuccess"
:headers="csrfHeader">
<!-- csrf token for laravel -->
<input type="hidden" name="csrf-token" :value="csrfToken">
</dropzone>
</div>
</template>
```
```html
<script>
export default {
data() {
return {
csrfToken: document.head.querySelector('meta[name="csrf-token"]').content,
csrfHeader: {
'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
}
}
}
}
</script>
```
## Development

@@ -208,7 +17,10 @@

# serve example at localhost:8080
# run dev
npm run dev
# serve example and docs at localhost:8080
npm run start
# build any changes made
npm run build
```
-5
.babelrc
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}
.npmignore

Sorry, the diff of this file is not supported yet

-43
build/base.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
resolveLoader: {
root: path.join(__dirname, '../node_modules'),
},
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style!css!autoprefixer'
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
}
]
}
}
-35
build/dev.js
var path = require('path');
var webpack = require('webpack');
var config = require('./base');
module.exports = Object.assign({}, config, {
entry: './dev/index.js',
output: {
path: path.resolve(__dirname, '../dev'),
publicPath: '/dev/',
filename: 'bundle.js'
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
});
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vuejs.github.io/vue-loader/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
])
}
-27
build/prod.js
var path = require('path')
var config = require('./base');
var webpack = require('webpack')
module.exports = Object.assign({}, config, {
entry: './src/index.vue',
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'vue2-dropzone.js',
library: ['vue2-dropzone'],
libraryTarget: 'umd'
},
devtool: false,
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
});
-20
CHANGELOG.md
### 2.3.6
- Added `method` as prop, updated accepted types for `clickable` option. [#146](ceaba46fe105329b21477676d60bff70c5cd8cb1)
- Added `confirm` as prop. [#171](ecc7cdb7f19bb6a4cba749fd012afbdeb61500cf)
- Added `hiddenInputContainer` and `capture` as props. [#164](9c742d156d1433b43bfc43e50667f0c8754c3489)
- Updated `README` with **LARAVEL** integration option. [#180](6b96e85a54adcd1228be9c8ae9189f199e74cc8b)
- Added `withCredentials` as prop. [#182](c459af69840a1cf6a4eb6d7db9b26683cfe03977)
- Added missing dataUrl to the thumbnail event as second parameter. [#194](ba39a9cf6e94cd515b2f6cb54f5a47a4004060a9)
### 2.3.5
- Added support for `uploadMultiple`. Fixes [#107](https://github.com/rowanwins/vue-dropzone/issues/107)
- Error messages positioned correctly. Fixes [#127](https://github.com/rowanwins/vue-dropzone/issues/127)
- Parallel upload support added.
- Added `timeout` prop. Fixes [#137](https://github.com/rowanwins/vue-dropzone/issues/137)
- NPM version updated to v2.3.5 :+1:
### 2.3.4
- This release was intended for the issue [#116](https://github.com/rowanwins/vue-dropzone/issues/116), which was caused due to core base library of dropzone. Issue from base library can be tracked here in their changelog.
---
Added Changelog. Sorry that this didn't happen sooner.
-138
demo/custom-dropzone-preview.vue
<template>
<div id="app">
<p>Welcome to your Vue.js app!</p>
<dropzone
id="myVueDropzone"
url="https://httpbin.org/post"
v-on:vdropzone-success="showSuccess"
v-bind:preview-template="template">
<!-- Optional parameters if any! -->
<input type="hidden" name="token" value="xxx">
</dropzone>
</div>
</template>
<script>
import Dropzone from 'vue2-dropzone'
export default {
name: 'MainApp',
components: {
Dropzone
},
methods: {
'showSuccess': function (file) {
console.log('A file was successfully uploaded')
},
'template':function() {
return `
<div class="dz-preview dz-file-preview">
<div class="dz-image" style="width: 200px;height: 200px">
<img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark"><i class="fa fa-check"></i></div>
<div class="dz-error-mark"><i class="fa fa-close"></i></div>
</div>
`;
}
}
}
</script>
<style>
.vue-dropzone {
border: 2px solid #000000;
font-family: 'Arial', sans-serif;
letter-spacing: 0.2px;
color: #777;
transition: background-color .2s linear;
&:hover {
background-color: #F6F6F6;
}
i {
color: #CCC;
}
.dz-preview {
.dz-image {
border-radius: 1;
&:hover {
img {
transform: none;
-webkit-filter: none;
}
}
}
.dz-details {
bottom: 0;
top: 0;
color: white;
background-color: rgba(33, 150, 243, 0.8);
transition: opacity .2s linear;
text-align: left;
.dz-filename span, .dz-size span {
background-color: transparent;
}
.dz-filename:not(:hover) span {
border: none;
}
.dz-filename:hover span {
background-color: transparent;
border: none;
}
}
.dz-progress .dz-upload {
background: #cccccc;
}
.dz-remove {
position: absolute;
z-index: 30;
color: white;
margin-left: 15px;
padding: 10px;
top: inherit;
bottom: 15px;
border: 2px white solid;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 1.1px;
opacity: 0;
}
&:hover {
.dz-remove {
opacity: 1;
}
}
.dz-success-mark, .dz-error-mark {
margin-left: auto !important;
margin-top: auto !important;
width: 100% !important;
top: 35% !important;
left: 0;
i {
color: white !important;
font-size: 5rem !important;
}
}
}
}
</style>
dev/bundle.js

Sorry, the diff of this file is too big to display

dev/bundle.js.map

Sorry, the diff of this file is too big to display

dev/font/OpenSans-Regular.eot

Sorry, the diff of this file is not supported yet

dev/font/OpenSans-Regular.svg

Sorry, the diff of this file is too big to display

dev/font/OpenSans-Regular.ttf

Sorry, the diff of this file is not supported yet

dev/font/OpenSans-Regular.woff

Sorry, the diff of this file is not supported yet

-4
dev/index.js
import Vue from 'vue'
import app from '../src/App'
new Vue(app).$mount('#app');
-89
dev/style.css
@font-face {
font-family: "Open Sans";
src: url("./font/OpenSans-Regular.eot?") format("eot"), url("./font/OpenSans-Regular.woff") format("woff"), url("./font/OpenSans-Regular.ttf") format("truetype"), url("./font/OpenSans-Regular.svg#OpenSans") format("svg");
}
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: 'Open Sans', 'Source Sans Pro', 'Helvetica Neue', 'Microsoft Yahei', Arial, sans-serif;
color: #2c3e50;
}
a {
color: #4F92C0;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}
a:hover {
text-decoration: underline;
}
#app {
width: 600px;
padding: 0 20px;
margin: 0 auto;
max-width: 600px;
text-align: center;
}
#main {
margin-top: 70px;
}
.title {
font-size: 4em;
color: #4F92C0;
}
.desc {
font-size: 15px;
color: #7f8c8d;
}
.github-link {
font-size: 22px;
}
.button {
box-sizing: content-box;
display: inline-block;
width: 180px;
margin: 0.5em;
padding: 12px 14px;
font-weight: 700;
color: #fff;
border-bottom: 2px solid;
border-radius: 4px;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.button.green {
background-color: #4fc08d;
border-bottom-color: #3aa373;
}
.button.blue {
background-color: #4F92C0;
border-bottom-color: #4881A9;
}
.button:hover {
text-decoration: none;
-webkit-transform: translate(0, -2px);
-ms-transform: translate(0, -2px);
transform: translate(0, -2px);
}
-2
dist/vue2-dropzone.js
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue2-dropzone"]=t():e["vue2-dropzone"]=t()}(this,function(){return function(e){function t(n){if(i[n])return i[n].exports;var o=i[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){var n,o,r={};i(8),n=i(2),o=i(6),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports.default);var s="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;o&&(s.template=o),s.computed||(s.computed={}),Object.keys(r).forEach(function(e){var t=r[e];s.computed[e]=function(){return t}})},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var i=this[t];i[2]?e.push("@media "+i[2]+"{"+i[1]+"}"):e.push(i[1])}return e.join("")},e.i=function(t,i){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(n[r]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&n[s[0]]||(i&&!s[2]?s[2]=i:i&&(s[2]="("+s[2]+") and ("+i+")"),e.push(s))}},e}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{id:{type:String,required:!0},url:{type:String,required:!0},clickable:{type:[Boolean,String],default:!0},confirm:{type:Function,default:void 0},paramName:{type:String,default:"file"},acceptedFileTypes:{type:String},thumbnailHeight:{type:Number,default:200},thumbnailWidth:{type:Number,default:200},showRemoveLink:{type:Boolean,default:!0},maxFileSizeInMB:{type:Number,default:2},maxNumberOfFiles:{type:Number,default:5},autoProcessQueue:{type:Boolean,default:!0},useFontAwesome:{type:Boolean,default:!1},headers:{type:Object},language:{type:Object,default:function(){return{}}},previewTemplate:{type:Function,default:function(e){return'\n <div class="dz-preview dz-file-preview">\n <div class="dz-image" style="width: '+e.thumbnailWidth+"px;height: "+e.thumbnailHeight+'px">\n <img data-dz-thumbnail /></div>\n <div class="dz-details">\n <div class="dz-size"><span data-dz-size></span></div>\n <div class="dz-filename"><span data-dz-name></span></div>\n </div>\n <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>\n <div class="dz-error-message"><span data-dz-errormessage></span></div>\n <div class="dz-success-mark">'+e.doneIcon+'</div>\n <div class="dz-error-mark">'+e.errorIcon+"</div>\n </div>\n "}},useCustomDropzoneOptions:{type:Boolean,default:!1},dropzoneOptions:{type:Object,default:function(){return{}}},resizeWidth:{type:Number,default:null},resizeHeight:{type:Number,default:null},resizeMimeType:{type:String,default:null},resizeQuality:{type:Number,default:.8},resizeMethod:{type:String,default:"contain"},uploadMultiple:{type:Boolean,default:!1},duplicateCheck:{type:Boolean,default:!1},parallelUploads:{type:Number,default:2},timeout:{type:Number,default:3e4},method:{type:String,default:"POST"},withCredentials:{type:Boolean,default:!1},capture:{type:String,default:null},hiddenInputContainer:{type:String,default:"body"}},methods:{manuallyAddFile:function(e,t,i,n,o){this.dropzone.emit("addedfile",e),this.dropzone.emit("thumbnail",e,t),this.dropzone.createThumbnailFromUrl(e,t,i,n),this.dropzone.emit("complete",e),"undefined"!=typeof o.dontSubstractMaxFiles&&o.dontSubstractMaxFiles||(this.dropzone.options.maxFiles=this.dropzone.options.maxFiles-1),"undefined"!=typeof o.addToFiles&&o.addToFiles&&this.dropzone.files.push(e),this.$emit("vdropzone-file-added-manually",e)},setOption:function(e,t){this.dropzone.options[e]=t},removeAllFiles:function(){this.dropzone.removeAllFiles(!0)},processQueue:function(){var e=this.dropzone;this.dropzone.processQueue(),this.dropzone.on("success",function(){e.options.autoProcessQueue=!0}),this.dropzone.on("queuecomplete",function(){e.options.autoProcessQueue=!1})},removeFile:function(e){this.dropzone.removeFile(e)},getAcceptedFiles:function(){return this.dropzone.getAcceptedFiles()},getRejectedFiles:function(){return this.dropzone.getRejectedFiles()},getUploadingFiles:function(){return this.dropzone.getUploadingFiles()},getQueuedFiles:function(){return this.dropzone.getQueuedFiles()},getProp:function(e,t){return this.useCustomDropzoneOptions&&void 0!==t&&null!==t&&""!==t?t:e}},computed:{languageSettings:function(){var e={dictDefaultMessage:"<br>Drop files here to upload",dictCancelUpload:"Cancel upload",dictCancelUploadConfirmation:"Are you sure you want to cancel this upload?",dictFallbackMessage:"Your browser does not support drag and drop file uploads.",dictFallbackText:"Please use the fallback form below to upload your files like in the olden days.",dictFileTooBig:"File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",dictInvalidFileType:"You can't upload files of this type.",dictMaxFilesExceeded:"You can not upload any more files. (max: {{maxFiles}})",dictRemoveFile:"Remove",dictRemoveFileConfirmation:null,dictResponseError:"Server responded with {{statusCode}} code."};for(var t in this.language)e[t]=this.language[t];if(this.useCustomDropzoneOptions&&this.dropzoneOptions.language)for(var i in this.dropzoneOptions.language)e[i]=this.dropzoneOptions.language[i];return e},cloudIcon:function(){return this.useFontAwesome?'<i class="fa fa-cloud-upload"></i>':'<i class="material-icons">cloud_upload</i>'},doneIcon:function(){return this.useFontAwesome?'<i class="fa fa-check"></i>':' <i class="material-icons">done</i>'},errorIcon:function(){return this.useFontAwesome?'<i class="fa fa-close"></i>':' <i class="material-icons">error</i>'}},mounted:function(){if(!this.$isServer){var e=i(5);e.autoDiscover=!1,this.confirm&&(e.confirm=this.getProp(this.confirm,this.dropzoneOptions.confirm));var t=document.getElementById(this.id);this.dropzone=new e(t,{clickable:this.getProp(this.clickable,this.dropzoneOptions.clickable),paramName:this.getProp(this.paramName,this.dropzoneOptions.paramName),thumbnailWidth:this.getProp(this.thumbnailWidth,this.dropzoneOptions.thumbnailWidth),thumbnailHeight:this.getProp(this.thumbnailHeight,this.dropzoneOptions.thumbnailHeight),maxFiles:this.getProp(this.maxNumberOfFiles,this.dropzoneOptions.maxNumberOfFiles),maxFilesize:this.getProp(this.maxFileSizeInMB,this.dropzoneOptions.maxFileSizeInMB),addRemoveLinks:this.getProp(this.showRemoveLink,this.dropzoneOptions.showRemoveLink),acceptedFiles:this.getProp(this.acceptedFileTypes,this.dropzoneOptions.acceptedFileTypes),autoProcessQueue:this.getProp(this.autoProcessQueue,this.dropzoneOptions.autoProcessQueue),headers:this.getProp(this.headers,this.dropzoneOptions.headers),previewTemplate:this.previewTemplate(this),dictDefaultMessage:this.cloudIcon+this.languageSettings.dictDefaultMessage,dictCancelUpload:this.languageSettings.dictCancelUpload,dictCancelUploadConfirmation:this.languageSettings.dictCancelUploadConfirmation,dictFallbackMessage:this.languageSettings.dictFallbackMessage,dictFallbackText:this.languageSettings.dictFallbackText,dictFileTooBig:this.languageSettings.dictFileTooBig,dictInvalidFileType:this.languageSettings.dictInvalidFileType,dictMaxFilesExceeded:this.languageSettings.dictMaxFilesExceeded,dictRemoveFile:this.languageSettings.dictRemoveFile,dictRemoveFileConfirmation:this.languageSettings.dictRemoveFileConfirmation,dictResponseError:this.languageSettings.dictResponseError,resizeWidth:this.getProp(this.resizeWidth,this.dropzoneOptions.resizeWidth),resizeHeight:this.getProp(this.resizeHeight,this.dropzoneOptions.resizeHeight),resizeMimeType:this.getProp(this.resizeMimeType,this.dropzoneOptions.resizeMimeType),resizeQuality:this.getProp(this.resizeQuality,this.dropzoneOptions.resizeQuality),resizeMethod:this.getProp(this.resizeMethod,this.dropzoneOptions.resizeMethod),uploadMultiple:this.getProp(this.uploadMultiple,this.dropzoneOptions.uploadMultiple),parallelUploads:this.getProp(this.parallelUploads,this.dropzoneOptions.parallelUploads),timeout:this.getProp(this.timeout,this.dropzoneOptions.timeout),method:this.getProp(this.method,this.dropzoneOptions.method),capture:this.getProp(this.capture,this.dropzoneOptions.capture),hiddenInputContainer:this.getProp(this.hiddenInputContainer,this.dropzoneOptions.hiddenInputContainer),withCredentials:this.getProp(this.withCredentials,this.dropzoneOptions.withCredentials)});var n=this;this.dropzone.on("thumbnail",function(e,t){n.$emit("vdropzone-thumbnail",e,t)}),this.dropzone.on("addedfile",function(e){if(n.duplicateCheck&&this.files.length){var t,i;for(t=0,i=this.files.length;t<i-1;t++)this.files[t].name===e.name&&(this.removeFile(e),n.$emit("duplicate-file",e))}n.$emit("vdropzone-file-added",e)}),this.dropzone.on("addedfiles",function(e){n.$emit("vdropzone-files-added",e)}),this.dropzone.on("removedfile",function(e){n.$emit("vdropzone-removed-file",e)}),this.dropzone.on("success",function(e,t){n.$emit("vdropzone-success",e,t)}),this.dropzone.on("successmultiple",function(e,t){n.$emit("vdropzone-success-multiple",e,t)}),this.dropzone.on("error",function(e,t,i){n.$emit("vdropzone-error",e,t,i)}),this.dropzone.on("sending",function(e,t,i){n.$emit("vdropzone-sending",e,t,i)}),this.dropzone.on("sendingmultiple",function(e,t,i){n.$emit("vdropzone-sending-multiple",e,t,i)}),this.dropzone.on("queuecomplete",function(e,t,i){n.$emit("vdropzone-queue-complete",e,t,i)}),this.dropzone.on("totaluploadprogress",function(e,t,i){n.$emit("vdropzone-total-upload-progress",e,t,i)}),n.$emit("vdropzone-mounted")}},beforeDestroy:function(){this.dropzone.destroy()}}},function(e,t,i){t=e.exports=i(1)(),t.push([e.id,'@-webkit-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-40px);transform:translateY(-40px)}}@keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-40px);transform:translateY(-40px)}}@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:2px solid rgba(0,0,0,.3);background:#fff;padding:20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center;margin:2em 0}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(180deg,#eee,#ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#fff}.dropzone .dz-preview.dz-image-preview .dz-details{transition:opacity .2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid hsla(0,0%,78%,.8);background-color:hsla(0,0%,100%,.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:hsla(0,0%,100%,.4);padding:0 .4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-filter:blur(8px);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{-webkit-animation:passing-through 3s cubic-bezier(.77,0,.175,1);animation:passing-through 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;-webkit-animation:slide-in 3s cubic-bezier(.77,0,.175,1);animation:slide-in 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview .dz-error-mark,.dropzone .dz-preview .dz-success-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}.dropzone .dz-preview .dz-error-mark svg,.dropzone .dz-preview .dz-success-mark svg{display:block;width:54px;height:54px}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;transition:all .2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;transition:opacity .4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{-webkit-animation:pulse 6s ease infinite;animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:16px;left:50%;top:50%;margin-top:-8px;width:80px;margin-left:-40px;background:hsla(0,0%,100%,.9);-webkit-transform:scale(1);border-radius:8px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#333;background:linear-gradient(180deg,#666,#444);position:absolute;top:0;left:0;bottom:0;width:0;transition:width .3s ease-in-out}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;transition:opacity .3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#be2626;background:linear-gradient(180deg,#be2626,#a92222);padding:.5em 1.2em;color:#fff}.dropzone .dz-preview .dz-error-message:after{content:"";position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #be2626}',""])},function(e,t,i){t=e.exports=i(1)(),t.i(i(3),""),t.push([e.id,".vue-dropzone{border:2px solid #e5e5e5;font-family:Arial,sans-serif;letter-spacing:.2px;color:#777;transition:background-color .2s linear}.vue-dropzone:hover{background-color:#f6f6f6}.vue-dropzone i{color:#ccc}.vue-dropzone .dz-preview .dz-image{border-radius:0}.vue-dropzone .dz-preview .dz-image:hover img{-webkit-transform:none;transform:none;-webkit-filter:none}.vue-dropzone .dz-preview .dz-details{bottom:0;top:0;color:#fff;background-color:rgba(33,150,243,.8);transition:opacity .2s linear;text-align:left}.vue-dropzone .dz-preview .dz-details .dz-filename span,.vue-dropzone .dz-preview .dz-details .dz-size span{background-color:transparent}.vue-dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:none}.vue-dropzone .dz-preview .dz-details .dz-filename:hover span{background-color:transparent;border:none}.vue-dropzone .dz-preview .dz-progress .dz-upload{background:#ccc}.vue-dropzone .dz-preview .dz-remove{position:absolute;z-index:30;color:#fff;margin-left:15px;padding:10px;top:inherit;bottom:15px;border:2px solid #fff;text-decoration:none;text-transform:uppercase;font-size:.8rem;font-weight:800;letter-spacing:1.1px;opacity:0}.vue-dropzone .dz-preview:hover .dz-remove{opacity:1}.vue-dropzone .dz-preview .dz-error-mark,.vue-dropzone .dz-preview .dz-success-mark{margin-left:auto!important;margin-top:auto!important;width:100%!important;top:35%!important;left:0}.vue-dropzone .dz-preview .dz-error-mark i,.vue-dropzone .dz-preview .dz-success-mark i{color:#fff!important;font-size:5rem!important}.vue-dropzone .dz-preview .dz-error-message{top:75%;left:15%}",""])},function(e,t,i){(function(e){(function(){var t,i,n,o,r,s,a,l,d,p=[].slice,u=function(e,t){function i(){this.constructor=e}for(var n in t)c.call(t,n)&&(e[n]=t[n]);return i.prototype=t.prototype,e.prototype=new i,e.__super__=t.prototype,e},c={}.hasOwnProperty;l=function(){},i=function(){function e(){}return e.prototype.addEventListener=e.prototype.on,e.prototype.on=function(e,t){return this._callbacks=this._callbacks||{},this._callbacks[e]||(this._callbacks[e]=[]),this._callbacks[e].push(t),this},e.prototype.emit=function(){var e,t,i,n,o,r;if(n=arguments[0],e=2<=arguments.length?p.call(arguments,1):[],this._callbacks=this._callbacks||{},i=this._callbacks[n])for(o=0,r=i.length;o<r;o++)t=i[o],t.apply(this,e);return this},e.prototype.removeListener=e.prototype.off,e.prototype.removeAllListeners=e.prototype.off,e.prototype.removeEventListener=e.prototype.off,e.prototype.off=function(e,t){var i,n,o,r,s;if(!this._callbacks||0===arguments.length)return this._callbacks={},this;if(n=this._callbacks[e],!n)return this;if(1===arguments.length)return delete this._callbacks[e],this;for(o=r=0,s=n.length;r<s;o=++r)if(i=n[o],i===t){n.splice(o,1);break}return this},e}(),t=function(e){function t(e,i){var n,r,s;if(this.element=e,this.version=t.version,this.defaultOptions.previewTemplate=this.defaultOptions.previewTemplate.replace(/\n*/g,""),this.clickableElements=[],this.listeners=[],this.files=[],"string"==typeof this.element&&(this.element=document.querySelector(this.element)),!this.element||null==this.element.nodeType)throw new Error("Invalid dropzone element.");if(this.element.dropzone)throw new Error("Dropzone already attached.");if(t.instances.push(this),this.element.dropzone=this,n=null!=(s=t.optionsForElement(this.element))?s:{},this.options=o({},this.defaultOptions,n,null!=i?i:{}),this.options.forceFallback||!t.isBrowserSupported())return this.options.fallback.call(this);if(null==this.options.url&&(this.options.url=this.element.getAttribute("action")),!this.options.url)throw new Error("No URL provided.");if(this.options.acceptedFiles&&this.options.acceptedMimeTypes)throw new Error("You can't provide both 'acceptedFiles' and 'acceptedMimeTypes'. 'acceptedMimeTypes' is deprecated.");this.options.acceptedMimeTypes&&(this.options.acceptedFiles=this.options.acceptedMimeTypes,delete this.options.acceptedMimeTypes),null!=this.options.renameFilename&&(this.options.renameFile=function(e){return function(t){return e.options.renameFilename.call(e,t.name,t)}}(this)),this.options.method=this.options.method.toUpperCase(),(r=this.getExistingFallback())&&r.parentNode&&r.parentNode.removeChild(r),this.options.previewsContainer!==!1&&(this.options.previewsContainer?this.previewsContainer=t.getElement(this.options.previewsContainer,"previewsContainer"):this.previewsContainer=this.element),this.options.clickable&&(this.options.clickable===!0?this.clickableElements=[this.element]:this.clickableElements=t.getElements(this.options.clickable,"clickable")),this.init()}var o,r;return u(t,e),t.prototype.Emitter=i,t.prototype.events=["drop","dragstart","dragend","dragenter","dragover","dragleave","addedfile","addedfiles","removedfile","thumbnail","error","errormultiple","processing","processingmultiple","uploadprogress","totaluploadprogress","sending","sendingmultiple","success","successmultiple","canceled","canceledmultiple","complete","completemultiple","reset","maxfilesexceeded","maxfilesreached","queuecomplete"],t.prototype.defaultOptions={url:null,method:"post",withCredentials:!1,timeout:3e4,parallelUploads:2,uploadMultiple:!1,maxFilesize:256,paramName:"file",createImageThumbnails:!0,maxThumbnailFilesize:10,thumbnailWidth:120,thumbnailHeight:120,thumbnailMethod:"crop",resizeWidth:null,resizeHeight:null,resizeMimeType:null,resizeQuality:.8,resizeMethod:"contain",filesizeBase:1e3,maxFiles:null,params:{},headers:null,clickable:!0,ignoreHiddenFiles:!0,acceptedFiles:null,acceptedMimeTypes:null,autoProcessQueue:!0,autoQueue:!0,addRemoveLinks:!1,previewsContainer:null,hiddenInputContainer:"body",capture:null,renameFilename:null,renameFile:null,forceFallback:!1,dictDefaultMessage:"Drop files here to upload",dictFallbackMessage:"Your browser does not support drag'n'drop file uploads.",dictFallbackText:"Please use the fallback form below to upload your files like in the olden days.",dictFileTooBig:"File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",dictInvalidFileType:"You can't upload files of this type.",dictResponseError:"Server responded with {{statusCode}} code.",dictCancelUpload:"Cancel upload",dictCancelUploadConfirmation:"Are you sure you want to cancel this upload?",dictRemoveFile:"Remove file",dictRemoveFileConfirmation:null,dictMaxFilesExceeded:"You can not upload any more files.",dictFileSizeUnits:{tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},init:function(){return l},accept:function(e,t){return t()},fallback:function(){var e,i,n,o,r,s;for(this.element.className=this.element.className+" dz-browser-not-supported",r=this.element.getElementsByTagName("div"),i=0,n=r.length;i<n;i++)e=r[i],/(^| )dz-message($| )/.test(e.className)&&(o=e,e.className="dz-message");return o||(o=t.createElement('<div class="dz-message"><span></span></div>'),this.element.appendChild(o)),s=o.getElementsByTagName("span")[0],s&&(null!=s.textContent?s.textContent=this.options.dictFallbackMessage:null!=s.innerText&&(s.innerText=this.options.dictFallbackMessage)),this.element.appendChild(this.getFallbackForm())},resize:function(e,t,i,n){var o,r,s;if(o={srcX:0,srcY:0,srcWidth:e.width,srcHeight:e.height},r=e.width/e.height,null==t&&null==i?(t=o.srcWidth,i=o.srcHeight):null==t?t=i*r:null==i&&(i=t/r),t=Math.min(t,o.srcWidth),i=Math.min(i,o.srcHeight),s=t/i,o.srcWidth>t||o.srcHeight>i)if("crop"===n)r>s?(o.srcHeight=e.height,o.srcWidth=o.srcHeight*s):(o.srcWidth=e.width,o.srcHeight=o.srcWidth/s);else{if("contain"!==n)throw new Error("Unknown resizeMethod '"+n+"'");r>s?i=t/r:t=i*r}return o.srcX=(e.width-o.srcWidth)/2,o.srcY=(e.height-o.srcHeight)/2,o.trgWidth=t,o.trgHeight=i,o},transformFile:function(e,t){return(this.options.resizeWidth||this.options.resizeHeight)&&e.type.match(/image.*/)?this.resizeImage(e,this.options.resizeWidth,this.options.resizeHeight,this.options.resizeMethod,t):t(e)},previewTemplate:'<div class="dz-preview dz-file-preview">\n <div class="dz-image"><img data-dz-thumbnail /></div>\n <div class="dz-details">\n <div class="dz-size"><span data-dz-size></span></div>\n <div class="dz-filename"><span data-dz-name></span></div>\n </div>\n <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>\n <div class="dz-error-message"><span data-dz-errormessage></span></div>\n <div class="dz-success-mark">\n <svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">\n <title>Check</title>\n <defs></defs>\n <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">\n <path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2" stroke-opacity="0.198794158" stroke="#747474" fill-opacity="0.816519475" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>\n </g>\n </svg>\n </div>\n <div class="dz-error-mark">\n <svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">\n <title>Error</title>\n <defs></defs>\n <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">\n <g id="Check-+-Oval-2" sketch:type="MSLayerGroup" stroke="#747474" stroke-opacity="0.198794158" fill="#FFFFFF" fill-opacity="0.816519475">\n <path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2" sketch:type="MSShapeGroup"></path>\n </g>\n </g>\n </svg>\n </div>\n</div>',drop:function(e){return this.element.classList.remove("dz-drag-hover")},dragstart:l,dragend:function(e){return this.element.classList.remove("dz-drag-hover")},dragenter:function(e){return this.element.classList.add("dz-drag-hover")},dragover:function(e){return this.element.classList.add("dz-drag-hover")},dragleave:function(e){return this.element.classList.remove("dz-drag-hover")},paste:l,reset:function(){return this.element.classList.remove("dz-started")},addedfile:function(e){var i,n,o,r,s,a,l,d,p,u,c,h,f;if(this.element===this.previewsContainer&&this.element.classList.add("dz-started"),this.previewsContainer){for(e.previewElement=t.createElement(this.options.previewTemplate.trim()),e.previewTemplate=e.previewElement,this.previewsContainer.appendChild(e.previewElement),d=e.previewElement.querySelectorAll("[data-dz-name]"),i=0,r=d.length;i<r;i++)l=d[i],l.textContent=e.name;for(p=e.previewElement.querySelectorAll("[data-dz-size]"),n=0,s=p.length;n<s;n++)l=p[n],l.innerHTML=this.filesize(e.size);for(this.options.addRemoveLinks&&(e._removeLink=t.createElement('<a class="dz-remove" href="javascript:undefined;" data-dz-remove>'+this.options.dictRemoveFile+"</a>"),e.previewElement.appendChild(e._removeLink)),c=function(i){return function(n){return n.preventDefault(),n.stopPropagation(),e.status===t.UPLOADING?t.confirm(i.options.dictCancelUploadConfirmation,function(){return i.removeFile(e)}):i.options.dictRemoveFileConfirmation?t.confirm(i.options.dictRemoveFileConfirmation,function(){return i.removeFile(e)}):i.removeFile(e)}}(this),u=e.previewElement.querySelectorAll("[data-dz-remove]"),f=[],o=0,a=u.length;o<a;o++)h=u[o],f.push(h.addEventListener("click",c));return f}},removedfile:function(e){var t;return e.previewElement&&null!=(t=e.previewElement)&&t.parentNode.removeChild(e.previewElement),this._updateMaxFilesReachedClass()},thumbnail:function(e,t){var i,n,o,r;if(e.previewElement){for(e.previewElement.classList.remove("dz-file-preview"),o=e.previewElement.querySelectorAll("[data-dz-thumbnail]"),i=0,n=o.length;i<n;i++)r=o[i],r.alt=e.name,r.src=t;return setTimeout(function(t){return function(){return e.previewElement.classList.add("dz-image-preview")}}(this),1)}},error:function(e,t){var i,n,o,r,s;if(e.previewElement){for(e.previewElement.classList.add("dz-error"),"String"!=typeof t&&t.error&&(t=t.error),r=e.previewElement.querySelectorAll("[data-dz-errormessage]"),s=[],i=0,n=r.length;i<n;i++)o=r[i],s.push(o.textContent=t);return s}},errormultiple:l,processing:function(e){if(e.previewElement&&(e.previewElement.classList.add("dz-processing"),e._removeLink))return e._removeLink.textContent=this.options.dictCancelUpload},processingmultiple:l,uploadprogress:function(e,t,i){var n,o,r,s,a;if(e.previewElement){for(s=e.previewElement.querySelectorAll("[data-dz-uploadprogress]"),a=[],n=0,o=s.length;n<o;n++)r=s[n],"PROGRESS"===r.nodeName?a.push(r.value=t):a.push(r.style.width=t+"%");return a}},totaluploadprogress:l,sending:l,sendingmultiple:l,success:function(e){if(e.previewElement)return e.previewElement.classList.add("dz-success")},successmultiple:l,canceled:function(e){return this.emit("error",e,"Upload canceled.")},canceledmultiple:l,complete:function(e){if(e._removeLink&&(e._removeLink.textContent=this.options.dictRemoveFile),e.previewElement)return e.previewElement.classList.add("dz-complete")},completemultiple:l,maxfilesexceeded:l,maxfilesreached:l,queuecomplete:l,addedfiles:l},o=function(){var e,t,i,n,o,r,s;for(r=arguments[0],o=2<=arguments.length?p.call(arguments,1):[],e=0,i=o.length;e<i;e++){n=o[e];for(t in n)s=n[t],r[t]=s}return r},t.prototype.getAcceptedFiles=function(){var e,t,i,n,o;for(n=this.files,o=[],t=0,i=n.length;t<i;t++)e=n[t],e.accepted&&o.push(e);return o},t.prototype.getRejectedFiles=function(){var e,t,i,n,o;for(n=this.files,o=[],t=0,i=n.length;t<i;t++)e=n[t],e.accepted||o.push(e);return o},t.prototype.getFilesWithStatus=function(e){var t,i,n,o,r;for(o=this.files,r=[],i=0,n=o.length;i<n;i++)t=o[i],t.status===e&&r.push(t);return r},t.prototype.getQueuedFiles=function(){return this.getFilesWithStatus(t.QUEUED)},t.prototype.getUploadingFiles=function(){return this.getFilesWithStatus(t.UPLOADING)},t.prototype.getAddedFiles=function(){return this.getFilesWithStatus(t.ADDED)},t.prototype.getActiveFiles=function(){var e,i,n,o,r;for(o=this.files,r=[],i=0,n=o.length;i<n;i++)e=o[i],e.status!==t.UPLOADING&&e.status!==t.QUEUED||r.push(e);return r},t.prototype.init=function(){var e,i,n,o,r,s,a;for("form"===this.element.tagName&&this.element.setAttribute("enctype","multipart/form-data"),this.element.classList.contains("dropzone")&&!this.element.querySelector(".dz-message")&&this.element.appendChild(t.createElement('<div class="dz-default dz-message"><span>'+this.options.dictDefaultMessage+"</span></div>")),this.clickableElements.length&&(a=function(e){return function(){return e.hiddenFileInput&&e.hiddenFileInput.parentNode.removeChild(e.hiddenFileInput),e.hiddenFileInput=document.createElement("input"),e.hiddenFileInput.setAttribute("type","file"),(null==e.options.maxFiles||e.options.maxFiles>1)&&e.hiddenFileInput.setAttribute("multiple","multiple"),e.hiddenFileInput.className="dz-hidden-input",null!=e.options.acceptedFiles&&e.hiddenFileInput.setAttribute("accept",e.options.acceptedFiles),null!=e.options.capture&&e.hiddenFileInput.setAttribute("capture",e.options.capture),
e.hiddenFileInput.style.visibility="hidden",e.hiddenFileInput.style.position="absolute",e.hiddenFileInput.style.top="0",e.hiddenFileInput.style.left="0",e.hiddenFileInput.style.height="0",e.hiddenFileInput.style.width="0",document.querySelector(e.options.hiddenInputContainer).appendChild(e.hiddenFileInput),e.hiddenFileInput.addEventListener("change",function(){var t,i,n,o;if(i=e.hiddenFileInput.files,i.length)for(n=0,o=i.length;n<o;n++)t=i[n],e.addFile(t);return e.emit("addedfiles",i),a()})}}(this))(),this.URL=null!=(r=window.URL)?r:window.webkitURL,s=this.events,i=0,n=s.length;i<n;i++)e=s[i],this.on(e,this.options[e]);return this.on("uploadprogress",function(e){return function(){return e.updateTotalUploadProgress()}}(this)),this.on("removedfile",function(e){return function(){return e.updateTotalUploadProgress()}}(this)),this.on("canceled",function(e){return function(t){return e.emit("complete",t)}}(this)),this.on("complete",function(e){return function(t){if(0===e.getAddedFiles().length&&0===e.getUploadingFiles().length&&0===e.getQueuedFiles().length)return setTimeout(function(){return e.emit("queuecomplete")},0)}}(this)),o=function(e){return e.stopPropagation(),e.preventDefault?e.preventDefault():e.returnValue=!1},this.listeners=[{element:this.element,events:{dragstart:function(e){return function(t){return e.emit("dragstart",t)}}(this),dragenter:function(e){return function(t){return o(t),e.emit("dragenter",t)}}(this),dragover:function(e){return function(t){var i;try{i=t.dataTransfer.effectAllowed}catch(e){}return t.dataTransfer.dropEffect="move"===i||"linkMove"===i?"move":"copy",o(t),e.emit("dragover",t)}}(this),dragleave:function(e){return function(t){return e.emit("dragleave",t)}}(this),drop:function(e){return function(t){return o(t),e.drop(t)}}(this),dragend:function(e){return function(t){return e.emit("dragend",t)}}(this)}}],this.clickableElements.forEach(function(e){return function(i){return e.listeners.push({element:i,events:{click:function(n){return(i!==e.element||n.target===e.element||t.elementInside(n.target,e.element.querySelector(".dz-message")))&&e.hiddenFileInput.click(),!0}}})}}(this)),this.enable(),this.options.init.call(this)},t.prototype.destroy=function(){var e;return this.disable(),this.removeAllFiles(!0),(null!=(e=this.hiddenFileInput)?e.parentNode:void 0)&&(this.hiddenFileInput.parentNode.removeChild(this.hiddenFileInput),this.hiddenFileInput=null),delete this.element.dropzone,t.instances.splice(t.instances.indexOf(this),1)},t.prototype.updateTotalUploadProgress=function(){var e,t,i,n,o,r,s,a;if(s=0,r=0,e=this.getActiveFiles(),e.length){for(o=this.getActiveFiles(),i=0,n=o.length;i<n;i++)t=o[i],s+=t.upload.bytesSent,r+=t.upload.total;a=100*s/r}else a=100;return this.emit("totaluploadprogress",a,r,s)},t.prototype._getParamName=function(e){return"function"==typeof this.options.paramName?this.options.paramName(e):""+this.options.paramName+(this.options.uploadMultiple?"["+e+"]":"")},t.prototype._renameFile=function(e){return"function"!=typeof this.options.renameFile?e.name:this.options.renameFile(e)},t.prototype.getFallbackForm=function(){var e,i,n,o;return(e=this.getExistingFallback())?e:(n='<div class="dz-fallback">',this.options.dictFallbackText&&(n+="<p>"+this.options.dictFallbackText+"</p>"),n+='<input type="file" name="'+this._getParamName(0)+'" '+(this.options.uploadMultiple?'multiple="multiple"':void 0)+' /><input type="submit" value="Upload!"></div>',i=t.createElement(n),"FORM"!==this.element.tagName?(o=t.createElement('<form action="'+this.options.url+'" enctype="multipart/form-data" method="'+this.options.method+'"></form>'),o.appendChild(i)):(this.element.setAttribute("enctype","multipart/form-data"),this.element.setAttribute("method",this.options.method)),null!=o?o:i)},t.prototype.getExistingFallback=function(){var e,t,i,n,o,r;for(t=function(e){var t,i,n;for(i=0,n=e.length;i<n;i++)if(t=e[i],/(^| )fallback($| )/.test(t.className))return t},o=["div","form"],i=0,n=o.length;i<n;i++)if(r=o[i],e=t(this.element.getElementsByTagName(r)))return e},t.prototype.setupEventListeners=function(){var e,t,i,n,o,r,s;for(r=this.listeners,s=[],i=0,n=r.length;i<n;i++)e=r[i],s.push(function(){var i,n;i=e.events,n=[];for(t in i)o=i[t],n.push(e.element.addEventListener(t,o,!1));return n}());return s},t.prototype.removeEventListeners=function(){var e,t,i,n,o,r,s;for(r=this.listeners,s=[],i=0,n=r.length;i<n;i++)e=r[i],s.push(function(){var i,n;i=e.events,n=[];for(t in i)o=i[t],n.push(e.element.removeEventListener(t,o,!1));return n}());return s},t.prototype.disable=function(){var e,t,i,n,o;for(this.clickableElements.forEach(function(e){return e.classList.remove("dz-clickable")}),this.removeEventListeners(),n=this.files,o=[],t=0,i=n.length;t<i;t++)e=n[t],o.push(this.cancelUpload(e));return o},t.prototype.enable=function(){return this.clickableElements.forEach(function(e){return e.classList.add("dz-clickable")}),this.setupEventListeners()},t.prototype.filesize=function(e){var t,i,n,o,r,s,a,l;if(r=0,s="b",e>0){for(l=["tb","gb","mb","kb","b"],i=n=0,o=l.length;n<o;i=++n)if(a=l[i],t=Math.pow(this.options.filesizeBase,4-i)/10,e>=t){r=e/Math.pow(this.options.filesizeBase,4-i),s=a;break}r=Math.round(10*r)/10}return"<strong>"+r+"</strong> "+this.options.dictFileSizeUnits[s]},t.prototype._updateMaxFilesReachedClass=function(){return null!=this.options.maxFiles&&this.getAcceptedFiles().length>=this.options.maxFiles?(this.getAcceptedFiles().length===this.options.maxFiles&&this.emit("maxfilesreached",this.files),this.element.classList.add("dz-max-files-reached")):this.element.classList.remove("dz-max-files-reached")},t.prototype.drop=function(e){var t,i;e.dataTransfer&&(this.emit("drop",e),t=e.dataTransfer.files,this.emit("addedfiles",t),t.length&&(i=e.dataTransfer.items,i&&i.length&&null!=i[0].webkitGetAsEntry?this._addFilesFromItems(i):this.handleFiles(t)))},t.prototype.paste=function(e){var t,i;if(null!=(null!=e&&null!=(i=e.clipboardData)?i.items:void 0))return this.emit("paste",e),t=e.clipboardData.items,t.length?this._addFilesFromItems(t):void 0},t.prototype.handleFiles=function(e){var t,i,n,o;for(o=[],i=0,n=e.length;i<n;i++)t=e[i],o.push(this.addFile(t));return o},t.prototype._addFilesFromItems=function(e){var t,i,n,o,r;for(r=[],n=0,o=e.length;n<o;n++)i=e[n],null!=i.webkitGetAsEntry&&(t=i.webkitGetAsEntry())?t.isFile?r.push(this.addFile(i.getAsFile())):t.isDirectory?r.push(this._addFilesFromDirectory(t,t.name)):r.push(void 0):null!=i.getAsFile&&(null==i.kind||"file"===i.kind)?r.push(this.addFile(i.getAsFile())):r.push(void 0);return r},t.prototype._addFilesFromDirectory=function(e,t){var i,n,o;return i=e.createReader(),n=function(e){return"undefined"!=typeof console&&null!==console&&"function"==typeof console.log?console.log(e):void 0},(o=function(e){return function(){return i.readEntries(function(i){var n,r,s;if(i.length>0){for(r=0,s=i.length;r<s;r++)n=i[r],n.isFile?n.file(function(i){if(!e.options.ignoreHiddenFiles||"."!==i.name.substring(0,1))return i.fullPath=t+"/"+i.name,e.addFile(i)}):n.isDirectory&&e._addFilesFromDirectory(n,t+"/"+n.name);o()}return null},n)}}(this))()},t.prototype.accept=function(e,i){return e.size>1024*this.options.maxFilesize*1024?i(this.options.dictFileTooBig.replace("{{filesize}}",Math.round(e.size/1024/10.24)/100).replace("{{maxFilesize}}",this.options.maxFilesize)):t.isValidFile(e,this.options.acceptedFiles)?null!=this.options.maxFiles&&this.getAcceptedFiles().length>=this.options.maxFiles?(i(this.options.dictMaxFilesExceeded.replace("{{maxFiles}}",this.options.maxFiles)),this.emit("maxfilesexceeded",e)):this.options.accept.call(this,e,i):i(this.options.dictInvalidFileType)},t.prototype.addFile=function(e){return e.upload={progress:0,total:e.size,bytesSent:0,filename:this._renameFile(e)},this.files.push(e),e.status=t.ADDED,this.emit("addedfile",e),this._enqueueThumbnail(e),this.accept(e,function(t){return function(i){return i?(e.accepted=!1,t._errorProcessing([e],i)):(e.accepted=!0,t.options.autoQueue&&t.enqueueFile(e)),t._updateMaxFilesReachedClass()}}(this))},t.prototype.enqueueFiles=function(e){var t,i,n;for(i=0,n=e.length;i<n;i++)t=e[i],this.enqueueFile(t);return null},t.prototype.enqueueFile=function(e){if(e.status!==t.ADDED||e.accepted!==!0)throw new Error("This file can't be queued because it has already been processed or was rejected.");if(e.status=t.QUEUED,this.options.autoProcessQueue)return setTimeout(function(e){return function(){return e.processQueue()}}(this),0)},t.prototype._thumbnailQueue=[],t.prototype._processingThumbnail=!1,t.prototype._enqueueThumbnail=function(e){if(this.options.createImageThumbnails&&e.type.match(/image.*/)&&e.size<=1024*this.options.maxThumbnailFilesize*1024)return this._thumbnailQueue.push(e),setTimeout(function(e){return function(){return e._processThumbnailQueue()}}(this),0)},t.prototype._processThumbnailQueue=function(){var e;if(!this._processingThumbnail&&0!==this._thumbnailQueue.length)return this._processingThumbnail=!0,e=this._thumbnailQueue.shift(),this.createThumbnail(e,this.options.thumbnailWidth,this.options.thumbnailHeight,this.options.thumbnailMethod,!0,function(t){return function(i){return t.emit("thumbnail",e,i),t._processingThumbnail=!1,t._processThumbnailQueue()}}(this))},t.prototype.removeFile=function(e){if(e.status===t.UPLOADING&&this.cancelUpload(e),this.files=d(this.files,e),this.emit("removedfile",e),0===this.files.length)return this.emit("reset")},t.prototype.removeAllFiles=function(e){var i,n,o,r;for(null==e&&(e=!1),r=this.files.slice(),n=0,o=r.length;n<o;n++)i=r[n],(i.status!==t.UPLOADING||e)&&this.removeFile(i);return null},t.prototype.resizeImage=function(e,i,o,r,s){return this.createThumbnail(e,i,o,r,!1,function(i){return function(o,r){var a,l;return null===r?s(e):(a=i.options.resizeMimeType,null==a&&(a=e.type),l=r.toDataURL(a,i.options.resizeQuality),"image/jpeg"!==a&&"image/jpg"!==a||(l=n.restore(e.dataURL,l)),s(t.dataURItoBlob(l)))}}(this))},t.prototype.createThumbnail=function(e,t,i,n,o,r){var s;return s=new FileReader,s.onload=function(a){return function(){return e.dataURL=s.result,"image/svg+xml"===e.type?void(null!=r&&r(s.result)):a.createThumbnailFromUrl(e,t,i,n,o,r)}}(this),s.readAsDataURL(e)},t.prototype.createThumbnailFromUrl=function(e,t,i,n,o,r,s){var l;return l=document.createElement("img"),s&&(l.crossOrigin=s),l.onload=function(s){return function(){var d;return d=function(e){return e(1)},"undefined"!=typeof EXIF&&null!==EXIF&&o&&(d=function(e){return EXIF.getData(l,function(){return e(EXIF.getTag(this,"Orientation"))})}),d(function(o){var d,p,u,c,h,f,m,g;switch(e.width=l.width,e.height=l.height,m=s.options.resize.call(s,e,t,i,n),d=document.createElement("canvas"),p=d.getContext("2d"),d.width=m.trgWidth,d.height=m.trgHeight,o>4&&(d.width=m.trgHeight,d.height=m.trgWidth),o){case 2:p.translate(d.width,0),p.scale(-1,1);break;case 3:p.translate(d.width,d.height),p.rotate(Math.PI);break;case 4:p.translate(0,d.height),p.scale(1,-1);break;case 5:p.rotate(.5*Math.PI),p.scale(1,-1);break;case 6:p.rotate(.5*Math.PI),p.translate(0,-d.height);break;case 7:p.rotate(.5*Math.PI),p.translate(d.width,-d.height),p.scale(-1,1);break;case 8:p.rotate(-.5*Math.PI),p.translate(-d.width,0)}if(a(p,l,null!=(u=m.srcX)?u:0,null!=(c=m.srcY)?c:0,m.srcWidth,m.srcHeight,null!=(h=m.trgX)?h:0,null!=(f=m.trgY)?f:0,m.trgWidth,m.trgHeight),g=d.toDataURL("image/png"),null!=r)return r(g,d)})}}(this),null!=r&&(l.onerror=r),l.src=e.dataURL},t.prototype.processQueue=function(){var e,t,i,n;if(t=this.options.parallelUploads,i=this.getUploadingFiles().length,e=i,!(i>=t)&&(n=this.getQueuedFiles(),n.length>0)){if(this.options.uploadMultiple)return this.processFiles(n.slice(0,t-i));for(;e<t;){if(!n.length)return;this.processFile(n.shift()),e++}}},t.prototype.processFile=function(e){return this.processFiles([e])},t.prototype.processFiles=function(e){var i,n,o;for(n=0,o=e.length;n<o;n++)i=e[n],i.processing=!0,i.status=t.UPLOADING,this.emit("processing",i);return this.options.uploadMultiple&&this.emit("processingmultiple",e),this.uploadFiles(e)},t.prototype._getFilesWithXhr=function(e){var t,i;return i=function(){var i,n,o,r;for(o=this.files,r=[],i=0,n=o.length;i<n;i++)t=o[i],t.xhr===e&&r.push(t);return r}.call(this)},t.prototype.cancelUpload=function(e){var i,n,o,r,s,a,l;if(e.status===t.UPLOADING){for(n=this._getFilesWithXhr(e.xhr),o=0,s=n.length;o<s;o++)i=n[o],i.status=t.CANCELED;for(e.xhr.abort(),r=0,a=n.length;r<a;r++)i=n[r],this.emit("canceled",i);this.options.uploadMultiple&&this.emit("canceledmultiple",n)}else(l=e.status)!==t.ADDED&&l!==t.QUEUED||(e.status=t.CANCELED,this.emit("canceled",e),this.options.uploadMultiple&&this.emit("canceledmultiple",[e]));if(this.options.autoProcessQueue)return this.processQueue()},r=function(){var e,t;return t=arguments[0],e=2<=arguments.length?p.call(arguments,1):[],"function"==typeof t?t.apply(this,e):t},t.prototype.uploadFile=function(e){return this.uploadFiles([e])},t.prototype.uploadFiles=function(e){var i,n,s,a,l,d,p,u,c,h,f,m,g,v,z,b,y,w,F,x,k,E,C,T,S,M,A,L,I,O,U,N,P,R,D,_,B;for(B=new XMLHttpRequest,g=0,y=e.length;g<y;g++)s=e[g],s.xhr=B;E=r(this.options.method,e),D=r(this.options.url,e),B.open(E,D,!0),B.timeout=r(this.options.timeout,e),B.withCredentials=!!this.options.withCredentials,N=null,l=function(t){return function(){var i,n,o;for(o=[],i=0,n=e.length;i<n;i++)s=e[i],o.push(t._errorProcessing(e,N||t.options.dictResponseError.replace("{{statusCode}}",B.status),B));return o}}(this),R=function(t){return function(i){var n,o,r,a,l,d,p,u,c;if(null!=i)for(u=100*i.loaded/i.total,o=0,a=e.length;o<a;o++)s=e[o],s.upload.progress=u,s.upload.total=i.total,s.upload.bytesSent=i.loaded;else{for(n=!0,u=100,r=0,l=e.length;r<l;r++)s=e[r],100===s.upload.progress&&s.upload.bytesSent===s.upload.total||(n=!1),s.upload.progress=u,s.upload.bytesSent=s.upload.total;if(n)return}for(c=[],p=0,d=e.length;p<d;p++)s=e[p],c.push(t.emit("uploadprogress",s,u,s.upload.bytesSent));return c}}(this),B.onload=function(i){return function(n){var o;if(e[0].status!==t.CANCELED&&4===B.readyState){if("arraybuffer"!==B.responseType&&"blob"!==B.responseType&&(N=B.responseText,B.getResponseHeader("content-type")&&~B.getResponseHeader("content-type").indexOf("application/json")))try{N=JSON.parse(N)}catch(e){n=e,N="Invalid JSON response from server."}return R(),200<=(o=B.status)&&o<300?i._finished(e,N,n):l()}}}(this),B.onerror=function(i){return function(){if(e[0].status!==t.CANCELED)return l()}}(this),S=null!=(M=B.upload)?M:B,S.onprogress=R,u={Accept:"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"},this.options.headers&&o(u,this.options.headers);for(d in u)p=u[d],p&&B.setRequestHeader(d,p);if(a=new FormData,this.options.params){A=this.options.params;for(z in A)_=A[z],a.append(z,_)}for(v=0,w=e.length;v<w;v++)s=e[v],this.emit("sending",s,B,a);if(this.options.uploadMultiple&&this.emit("sendingmultiple",e,B,a),"FORM"===this.element.tagName)for(L=this.element.querySelectorAll("input, textarea, select, button"),b=0,F=L.length;b<F;b++)if(h=L[b],f=h.getAttribute("name"),m=h.getAttribute("type"),"SELECT"===h.tagName&&h.hasAttribute("multiple"))for(I=h.options,k=0,x=I.length;k<x;k++)T=I[k],T.selected&&a.append(f,T.value);else(!m||"checkbox"!==(O=m.toLowerCase())&&"radio"!==O||h.checked)&&a.append(f,h.value);for(i=0,P=[],c=C=0,U=e.length-1;0<=U?C<=U:C>=U;c=0<=U?++C:--C)n=function(t){return function(n,o,r){return function(n){if(a.append(o,n,r),++i===e.length)return t.submitRequest(B,a,e)}}}(this),P.push(this.options.transformFile.call(this,e[c],n(e[c],this._getParamName(c),e[c].upload.filename)));return P},t.prototype.submitRequest=function(e,t,i){return e.send(t)},t.prototype._finished=function(e,i,n){var o,r,s;for(r=0,s=e.length;r<s;r++)o=e[r],o.status=t.SUCCESS,this.emit("success",o,i,n),this.emit("complete",o);if(this.options.uploadMultiple&&(this.emit("successmultiple",e,i,n),this.emit("completemultiple",e)),this.options.autoProcessQueue)return this.processQueue()},t.prototype._errorProcessing=function(e,i,n){var o,r,s;for(r=0,s=e.length;r<s;r++)o=e[r],o.status=t.ERROR,this.emit("error",o,i,n),this.emit("complete",o);if(this.options.uploadMultiple&&(this.emit("errormultiple",e,i,n),this.emit("completemultiple",e)),this.options.autoProcessQueue)return this.processQueue()},t}(i),t.version="5.1.1",t.options={},t.optionsForElement=function(e){return e.getAttribute("id")?t.options[o(e.getAttribute("id"))]:void 0},t.instances=[],t.forElement=function(e){if("string"==typeof e&&(e=document.querySelector(e)),null==(null!=e?e.dropzone:void 0))throw new Error("No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use the `init` option to setup any additional observers on your Dropzone.");return e.dropzone},t.autoDiscover=!0,t.discover=function(){var e,i,n,o,r,s;for(document.querySelectorAll?n=document.querySelectorAll(".dropzone"):(n=[],e=function(e){var t,i,o,r;for(r=[],i=0,o=e.length;i<o;i++)t=e[i],/(^| )dropzone($| )/.test(t.className)?r.push(n.push(t)):r.push(void 0);return r},e(document.getElementsByTagName("div")),e(document.getElementsByTagName("form"))),s=[],o=0,r=n.length;o<r;o++)i=n[o],t.optionsForElement(i)!==!1?s.push(new t(i)):s.push(void 0);return s},t.blacklistedBrowsers=[/opera.*Macintosh.*version\/12/i],t.isBrowserSupported=function(){var e,i,n,o,r;if(e=!0,window.File&&window.FileReader&&window.FileList&&window.Blob&&window.FormData&&document.querySelector)if("classList"in document.createElement("a"))for(o=t.blacklistedBrowsers,i=0,n=o.length;i<n;i++)r=o[i],r.test(navigator.userAgent)&&(e=!1);else e=!1;else e=!1;return e},t.dataURItoBlob=function(e){var t,i,n,o,r,s,a;for(i=atob(e.split(",")[1]),s=e.split(",")[0].split(":")[1].split(";")[0],t=new ArrayBuffer(i.length),o=new Uint8Array(t),n=r=0,a=i.length;0<=a?r<=a:r>=a;n=0<=a?++r:--r)o[n]=i.charCodeAt(n);return new Blob([t],{type:s})},d=function(e,t){var i,n,o,r;for(r=[],n=0,o=e.length;n<o;n++)i=e[n],i!==t&&r.push(i);return r},o=function(e){return e.replace(/[\-_](\w)/g,function(e){return e.charAt(1).toUpperCase()})},t.createElement=function(e){var t;return t=document.createElement("div"),t.innerHTML=e,t.childNodes[0]},t.elementInside=function(e,t){if(e===t)return!0;for(;e=e.parentNode;)if(e===t)return!0;return!1},t.getElement=function(e,t){var i;if("string"==typeof e?i=document.querySelector(e):null!=e.nodeType&&(i=e),null==i)throw new Error("Invalid `"+t+"` option provided. Please provide a CSS selector or a plain HTML element.");return i},t.getElements=function(e,t){var i,n,o,r,s,a,l,d;if(e instanceof Array){o=[];try{for(r=0,a=e.length;r<a;r++)n=e[r],o.push(this.getElement(n,t))}catch(e){i=e,o=null}}else if("string"==typeof e)for(o=[],d=document.querySelectorAll(e),s=0,l=d.length;s<l;s++)n=d[s],o.push(n);else null!=e.nodeType&&(o=[e]);if(null==o||!o.length)throw new Error("Invalid `"+t+"` option provided. Please provide a CSS selector, a plain HTML element or a list of those.");return o},t.confirm=function(e,t,i){return window.confirm(e)?t():null!=i?i():void 0},t.isValidFile=function(e,t){var i,n,o,r,s;if(!t)return!0;for(t=t.split(","),r=e.type,i=r.replace(/\/.*$/,""),n=0,o=t.length;n<o;n++)if(s=t[n],s=s.trim(),"."===s.charAt(0)){if(e.name.toLowerCase().indexOf(s.toLowerCase(),e.name.length-s.length)!==-1)return!0}else if(/\/\*$/.test(s)){if(i===s.replace(/\/.*$/,""))return!0}else if(r===s)return!0;return!1},"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery.fn.dropzone=function(e){return this.each(function(){return new t(this,e)})}),"undefined"!=typeof e&&null!==e?e.exports=t:window.Dropzone=t,t.ADDED="added",t.QUEUED="queued",t.ACCEPTED=t.QUEUED,t.UPLOADING="uploading",t.PROCESSING=t.UPLOADING,t.CANCELED="canceled",t.ERROR="error",t.SUCCESS="success",s=function(e){var t,i,n,o,r,s,a,l,d,p;for(a=e.naturalWidth,s=e.naturalHeight,i=document.createElement("canvas"),i.width=1,i.height=s,n=i.getContext("2d"),n.drawImage(e,0,0),o=n.getImageData(1,0,1,s).data,p=0,r=s,l=s;l>p;)t=o[4*(l-1)+3],0===t?r=l:p=l,l=r+p>>1;return d=l/s,0===d?1:d},a=function(e,t,i,n,o,r,a,l,d,p){var u;return u=s(t),e.drawImage(t,i,n,o,r,a,l,d,p/u)},n=function(){function e(){}return e.KEY_STR="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",e.encode64=function(e){var t,i,n,o,r,s,a,l,d;for(d="",t=void 0,i=void 0,n="",o=void 0,r=void 0,s=void 0,a="",l=0;;)if(t=e[l++],i=e[l++],n=e[l++],o=t>>2,r=(3&t)<<4|i>>4,s=(15&i)<<2|n>>6,a=63&n,isNaN(i)?s=a=64:isNaN(n)&&(a=64),d=d+this.KEY_STR.charAt(o)+this.KEY_STR.charAt(r)+this.KEY_STR.charAt(s)+this.KEY_STR.charAt(a),t=i=n="",o=r=s=a="",!(l<e.length))break;return d},e.restore=function(e,t){var i,n,o;return e.match("data:image/jpeg;base64,")?(n=this.decode64(e.replace("data:image/jpeg;base64,","")),o=this.slice2Segments(n),i=this.exifManipulation(t,o),"data:image/jpeg;base64,"+this.encode64(i)):t},e.exifManipulation=function(e,t){var i,n,o;return n=this.getExifArray(t),o=this.insertExif(e,n),i=new Uint8Array(o)},e.getExifArray=function(e){var t,i;for(t=void 0,i=0;i<e.length;){if(t=e[i],255===t[0]&225===t[1])return t;i++}return[]},e.insertExif=function(e,t){var i,n,o,r,s,a;return r=e.replace("data:image/jpeg;base64,",""),o=this.decode64(r),a=o.indexOf(255,3),s=o.slice(0,a),n=o.slice(a),i=s,i=i.concat(t),i=i.concat(n)},e.slice2Segments=function(e){var t,i,n,o,r;for(i=0,r=[];;){if(255===e[i]&218===e[i+1])break;if(255===e[i]&216===e[i+1]?i+=2:(n=256*e[i+2]+e[i+3],t=i+n+2,o=e.slice(i,t),r.push(o),i=t),i>e.length)break}return r},e.decode64=function(e){var t,i,n,o,r,s,a,l,d,p,u;for(u="",n=void 0,o=void 0,r="",s=void 0,a=void 0,l=void 0,d="",p=0,i=[],t=/[^A-Za-z0-9\+\/\=]/g,t.exec(e)&&console.warning("There were invalid base64 characters in the input text.\nValid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\nExpect errors in decoding."),e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");;)if(s=this.KEY_STR.indexOf(e.charAt(p++)),a=this.KEY_STR.indexOf(e.charAt(p++)),l=this.KEY_STR.indexOf(e.charAt(p++)),d=this.KEY_STR.indexOf(e.charAt(p++)),n=s<<2|a>>4,o=(15&a)<<4|l>>2,r=(3&l)<<6|d,i.push(n),64!==l&&i.push(o),64!==d&&i.push(r),n=o=r="",s=a=l=d="",!(p<e.length))break;return i},e}(),r=function(e,t){var i,n,o,r,s,a,l,d,p;if(o=!1,p=!0,n=e.document,d=n.documentElement,i=n.addEventListener?"addEventListener":"attachEvent",l=n.addEventListener?"removeEventListener":"detachEvent",a=n.addEventListener?"":"on",r=function(i){if("readystatechange"!==i.type||"complete"===n.readyState)return("load"===i.type?e:n)[l](a+i.type,r,!1),!o&&(o=!0)?t.call(e,i.type||i):void 0},s=function(){var e;try{d.doScroll("left")}catch(t){return e=t,void setTimeout(s,50)}return r("poll")},"complete"!==n.readyState){if(n.createEventObject&&d.doScroll){try{p=!e.frameElement}catch(e){}p&&s()}return n[i](a+"DOMContentLoaded",r,!1),n[i](a+"readystatechange",r,!1),e[i](a+"load",r,!1)}},t._autoDiscoverFunction=function(){if(t.autoDiscover)return t.discover()},r(window,t._autoDiscoverFunction)}).call(this)}).call(t,i(9)(e))},function(e,t){e.exports=' <form :action=url class="vue-dropzone dropzone" :id=id> <slot></slot> </form> '},function(e,t,i){function n(e,t){for(var i=0;i<e.length;i++){var n=e[i],o=u[n.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](n.parts[r]);for(;r<n.parts.length;r++)o.parts.push(l(n.parts[r],t))}else{for(var s=[],r=0;r<n.parts.length;r++)s.push(l(n.parts[r],t));u[n.id]={id:n.id,refs:1,parts:s}}}}function o(e){for(var t=[],i={},n=0;n<e.length;n++){var o=e[n],r=o[0],s=o[1],a=o[2],l=o[3],d={css:s,media:a,sourceMap:l};i[r]?i[r].parts.push(d):t.push(i[r]={id:r,parts:[d]})}return t}function r(e,t){var i=f(),n=v[v.length-1];if("top"===e.insertAt)n?n.nextSibling?i.insertBefore(t,n.nextSibling):i.appendChild(t):i.insertBefore(t,i.firstChild),v.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");i.appendChild(t)}}function s(e){e.parentNode.removeChild(e);var t=v.indexOf(e);t>=0&&v.splice(t,1)}function a(e){var t=document.createElement("style");return t.type="text/css",r(e,t),t}function l(e,t){var i,n,o;if(t.singleton){var r=g++;i=m||(m=a(t)),n=d.bind(null,i,r,!1),o=d.bind(null,i,r,!0)}else i=a(t),n=p.bind(null,i),o=function(){s(i)};return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}function d(e,t,i,n){var o=i?"":n.css;if(e.styleSheet)e.styleSheet.cssText=z(t,o);else{var r=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(r,s[t]):e.appendChild(r)}}function p(e,t){var i=t.css,n=t.media,o=t.sourceMap;if(n&&e.setAttribute("media",n),o&&(i+="\n/*# sourceURL="+o.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var u={},c=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},h=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=c(function(){return document.head||document.getElementsByTagName("head")[0]}),m=null,g=0,v=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=h()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var i=o(e);return n(i,t),function(e){for(var r=[],s=0;s<i.length;s++){var a=i[s],l=u[a.id];l.refs--,r.push(l)}if(e){var d=o(e);n(d,t)}for(var s=0;s<r.length;s++){var l=r[s];if(0===l.refs){for(var p=0;p<l.parts.length;p++)l.parts[p]();delete u[l.id]}}}};var z=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t,i){var n=i(4);"string"==typeof n&&(n=[[e.id,n,""]]);i(7)(n,{});n.locals&&(e.exports=n.locals)},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children=[],e.webpackPolyfill=1),e}}])});
-21
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>vue2-dropzone</title>
<link rel="stylesheet" type="text/css" href="dev/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<h1 class="title">vue2-dropzone</h1>
<h4 class="desc">A wrapper around Dropzone.js for Vue 2</h4>
<div id="main"></div>
</div>
<script src="dev/bundle.js"></script>
</body>
</html>
-21
issue_template.md
<!--
Before posting this issue, please perform the following steps, and confirm that the issue is still present.
1. Update vue2-dropzone to the latest version.
-->
- Vue2-dropzone Version: #.#.# (`npm list --depth=0`)
- Node Version (`node -v`):
- NPM Version (`npm -v`):
- OS:
### Description:
### Steps To Reproduce:
<!--
Your issue will be addressed much more quickly if you can provide us exact steps to reproduce the problem from scratch.
-->
LICENCE

Sorry, the diff of this file is not supported yet

-64
src/App.vue
<template>
<div id="app">
<p>
Welcome to your Vue.js app with dropzone!
</p>
<div v-if="ok">
<dropzone ref="myVueDropzone" id="dropzone" url="https://httpbin.org/post"
v-on:vdropzone-success="showSuccess"
v-bind:dropzone-options="dropzoneOptions"
:clickable='".btn"'
v-bind:use-custom-dropzone-options="true">
</dropzone>
<button @click="submitFiles()">Start Upload</button>
<button @click="process">Process</button>
<button class="btn btn-primary btn-block">Process1</button>
</div>
</div>
</template>
<script>
import Dropzone from '../src/index'
export default {
name: 'MainApp',
components: {
Dropzone
},
data () {
return {
ok: true,
dropzoneOptions: {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 1000,
maxNumberOfFiles: 1000,
},
language: {
dictDefaultMessage : 'Hi'
}
}
},
methods: {
'showSuccess': function (file) {
console.log('im added');
console.log(this.$refs.myVueDropzone)
},
'submitFiles': function () {
this.$refs.myVueDropzone.processQueue()
},
'process': function () {
console.log(this.$refs.myVueDropzone);
// this.$refs.myVueDropzone.setOption('maxFiles', this.$refs.myVueDropzone.dropzone.options.maxFiles + 1)
var file = { size: 123, name: "Icon" };
var url = "https://myvizo.com/img/logo_sm.png";
this.$refs.myVueDropzone.manuallyAddFile(file, url);
console.log(this.$refs.myVueDropzone.dropzone.options.maxFiles);
}
}
}
</script>
<style scoped>
@import url('~dropzone/dist/dropzone.css');
@import 'https://fonts.googleapis.com/css?family=Roboto';
</style>
-471
src/index.vue
<template>
<form :action="url" class="vue-dropzone dropzone" :id="id">
<slot></slot>
</form>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: [Boolean, String],
default: true
},
confirm: {
type: Function,
default: undefined
},
paramName: {
type: String,
default: 'file'
},
acceptedFileTypes: {
type: String
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFileSizeInMB: {
type: Number,
default: 2
},
maxNumberOfFiles: {
type: Number,
default: 5
},
autoProcessQueue: {
type: Boolean,
default: true
},
useFontAwesome: {
type: Boolean,
default: false
},
headers: {
type: Object
},
language: {
type: Object,
default: function () {
return {}
}
},
previewTemplate: {
type: Function,
default: (options) => {
return `
<div class="dz-preview dz-file-preview">
<div class="dz-image" style="width: ${options.thumbnailWidth}px;height: ${options.thumbnailHeight}px">
<img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark">${options.doneIcon}</div>
<div class="dz-error-mark">${options.errorIcon}</div>
</div>
`;
}
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
dropzoneOptions: {
type: Object,
default (){
return {}
}
},
resizeWidth:{
type : Number,
default : null
},
resizeHeight:{
type : Number,
default : null
},
resizeMimeType:{
type : String,
default : null
},
resizeQuality:{
type : Number,
default : 0.8
},
resizeMethod:{
type : String,
default : 'contain'
},
uploadMultiple:{
type: Boolean,
default: false
},
duplicateCheck:{
type: Boolean,
default: false
},
parallelUploads:{
type : Number,
default : 2
},
timeout:{
type : Number,
default : 30000
},
method:{
type : String,
default : 'POST'
},
withCredentials: {
type : Boolean,
default : false
},
capture:{
type: String,
default: null
},
hiddenInputContainer:{
type: String,
default : 'body'
}
},
methods: {
manuallyAddFile: function (file, fileUrl, callback, crossOrigin, options) {
this.dropzone.emit("addedfile", file);
this.dropzone.emit("thumbnail", file, fileUrl);
this.dropzone.createThumbnailFromUrl(file, fileUrl, callback, crossOrigin);
this.dropzone.emit("complete", file);
if ((typeof options.dontSubstractMaxFiles == 'undefined') || !options.dontSubstractMaxFiles) {
this.dropzone.options['maxFiles'] = this.dropzone.options['maxFiles'] - 1;
}
if ((typeof options.addToFiles != 'undefined') && options.addToFiles) {
this.dropzone.files.push(file);
}
this.$emit('vdropzone-file-added-manually', file);
},
setOption: function (option, value) {
this.dropzone.options[option] = value
},
removeAllFiles: function () {
this.dropzone.removeAllFiles(true)
},
processQueue: function () {
let dropzoneEle = this.dropzone;
this.dropzone.processQueue();
this.dropzone.on("success", function () {
dropzoneEle.options.autoProcessQueue = true
});
this.dropzone.on('queuecomplete', function () {
dropzoneEle.options.autoProcessQueue = false
})
},
removeFile: function (file) {
this.dropzone.removeFile(file)
},
getAcceptedFiles: function () {
return this.dropzone.getAcceptedFiles();
},
getRejectedFiles: function () {
return this.dropzone.getRejectedFiles();
},
getUploadingFiles: function () {
return this.dropzone.getUploadingFiles();
},
getQueuedFiles: function () {
return this.dropzone.getQueuedFiles();
},
getProp:function(attribute_prop,object_prop){
if (!this.useCustomDropzoneOptions)
return attribute_prop;
if (object_prop !== undefined && object_prop !== null && object_prop !== '')
return object_prop;
else
return attribute_prop;
},
},
computed: {
languageSettings () {
let defaultValues = {
dictDefaultMessage : '<br>Drop files here to upload',
dictCancelUpload : 'Cancel upload',
dictCancelUploadConfirmation: 'Are you sure you want to cancel this upload?',
dictFallbackMessage : 'Your browser does not support drag and drop file uploads.',
dictFallbackText : 'Please use the fallback form below to upload your files like in the olden days.',
dictFileTooBig : 'File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.',
dictInvalidFileType : `You can't upload files of this type.`,
dictMaxFilesExceeded : 'You can not upload any more files. (max: {{maxFiles}})',
dictRemoveFile : 'Remove',
dictRemoveFileConfirmation : null,
dictResponseError : 'Server responded with {{statusCode}} code.'
};
for (let attrname in this.language) {
defaultValues[attrname] = this.language[attrname]
}
if (this.useCustomDropzoneOptions) {
if (this.dropzoneOptions.language) {
for (let attrname in this.dropzoneOptions.language) {
defaultValues[attrname] = this.dropzoneOptions.language[attrname]
}
}
}
return defaultValues
},
cloudIcon: function () {
if (this.useFontAwesome) {
return '<i class="fa fa-cloud-upload"></i>';
} else {
return '<i class="material-icons">cloud_upload</i>';
}
},
doneIcon: function () {
if (this.useFontAwesome) {
return '<i class="fa fa-check"></i>';
} else {
return ' <i class="material-icons">done</i>';
}
},
errorIcon: function () {
if (this.useFontAwesome) {
return '<i class="fa fa-close"></i>';
} else {
return ' <i class="material-icons">error</i>';
}
}
},
mounted () {
if (this.$isServer) {
return
}
let Dropzone = require('dropzone');
Dropzone.autoDiscover = false;
if (this.confirm) {
Dropzone.confirm = this.getProp(this.confirm, this.dropzoneOptions.confirm);
}
let element = document.getElementById(this.id);
this.dropzone = new Dropzone(element, {
clickable : this.getProp(this.clickable,this.dropzoneOptions.clickable),
paramName : this.getProp(this.paramName,this.dropzoneOptions.paramName),
thumbnailWidth : this.getProp(this.thumbnailWidth,this.dropzoneOptions.thumbnailWidth),
thumbnailHeight : this.getProp(this.thumbnailHeight,this.dropzoneOptions.thumbnailHeight),
maxFiles : this.getProp(this.maxNumberOfFiles,this.dropzoneOptions.maxNumberOfFiles),
maxFilesize : this.getProp(this.maxFileSizeInMB,this.dropzoneOptions.maxFileSizeInMB),
addRemoveLinks : this.getProp(this.showRemoveLink,this.dropzoneOptions.showRemoveLink),
acceptedFiles : this.getProp(this.acceptedFileTypes,this.dropzoneOptions.acceptedFileTypes),
autoProcessQueue : this.getProp(this.autoProcessQueue,this.dropzoneOptions.autoProcessQueue),
headers : this.getProp(this.headers,this.dropzoneOptions.headers),
previewTemplate : this.previewTemplate(this),
dictDefaultMessage : this.cloudIcon + this.languageSettings.dictDefaultMessage,
dictCancelUpload : this.languageSettings.dictCancelUpload,
dictCancelUploadConfirmation: this.languageSettings.dictCancelUploadConfirmation,
dictFallbackMessage : this.languageSettings.dictFallbackMessage,
dictFallbackText : this.languageSettings.dictFallbackText,
dictFileTooBig : this.languageSettings.dictFileTooBig,
dictInvalidFileType : this.languageSettings.dictInvalidFileType,
dictMaxFilesExceeded : this.languageSettings.dictMaxFilesExceeded,
dictRemoveFile : this.languageSettings.dictRemoveFile,
dictRemoveFileConfirmation : this.languageSettings.dictRemoveFileConfirmation,
dictResponseError : this.languageSettings.dictResponseError,
resizeWidth : this.getProp(this.resizeWidth,this.dropzoneOptions.resizeWidth),
resizeHeight : this.getProp(this.resizeHeight,this.dropzoneOptions.resizeHeight),
resizeMimeType : this.getProp(this.resizeMimeType,this.dropzoneOptions.resizeMimeType),
resizeQuality : this.getProp(this.resizeQuality,this.dropzoneOptions.resizeQuality),
resizeMethod : this.getProp(this.resizeMethod,this.dropzoneOptions.resizeMethod),
uploadMultiple : this.getProp(this.uploadMultiple, this.dropzoneOptions.uploadMultiple),
parallelUploads : this.getProp(this.parallelUploads, this.dropzoneOptions.parallelUploads),
timeout : this.getProp(this.timeout, this.dropzoneOptions.timeout),
method : this.getProp(this.method, this.dropzoneOptions.method),
capture : this.getProp(this.capture, this.dropzoneOptions.capture),
hiddenInputContainer : this.getProp(this.hiddenInputContainer, this.dropzoneOptions.hiddenInputContainer),
withCredentials : this.getProp(this.withCredentials, this.dropzoneOptions.withCredentials)
})
// Handle the dropzone events
let vm = this;
this.dropzone.on('thumbnail', function (file, dataUrl) {
vm.$emit('vdropzone-thumbnail', file, dataUrl)
});
this.dropzone.on('addedfile', function (file) {
/**
* If Duplicate Check enabled remove duplicate file and emit the event.
*/
if (vm.duplicateCheck) {
if (this.files.length) {
var _i, _len;
for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) {
if (this.files[_i].name === file.name) {
this.removeFile(file);
vm.$emit('duplicate-file', file)
}
}
}
}
vm.$emit('vdropzone-file-added', file)
});
this.dropzone.on('addedfiles', function (files) {
vm.$emit('vdropzone-files-added', files)
});
this.dropzone.on('removedfile', function (file) {
vm.$emit('vdropzone-removed-file', file)
});
this.dropzone.on('success', function (file, response) {
vm.$emit('vdropzone-success', file, response)
});
this.dropzone.on('successmultiple', function (file, response) {
vm.$emit('vdropzone-success-multiple', file, response)
});
this.dropzone.on('error', function (file, error, xhr) {
vm.$emit('vdropzone-error', file, error, xhr)
});
this.dropzone.on('sending', function (file, xhr, formData) {
vm.$emit('vdropzone-sending', file, xhr, formData)
});
this.dropzone.on('sendingmultiple', function (file, xhr, formData) {
vm.$emit('vdropzone-sending-multiple', file, xhr, formData)
});
this.dropzone.on('queuecomplete', function (file, xhr, formData) {
vm.$emit('vdropzone-queue-complete', file, xhr, formData)
});
this.dropzone.on('totaluploadprogress', function (totaluploadprogress, totalBytes, totalBytesSent) {
vm.$emit('vdropzone-total-upload-progress', totaluploadprogress, totalBytes, totalBytesSent)
});
vm.$emit('vdropzone-mounted');
},
beforeDestroy () {
this.dropzone.destroy();
}
}
</script>
<style lang="less">
@import url('~dropzone/dist/dropzone.css');
.vue-dropzone {
border: 2px solid #E5E5E5;
font-family: 'Arial', sans-serif;
letter-spacing: 0.2px;
color: #777;
transition: background-color .2s linear;
&:hover {
background-color: #F6F6F6;
}
i {
color: #CCC;
}
.dz-preview {
.dz-image {
border-radius: 0;
&:hover {
img {
transform: none;
-webkit-filter: none;
}
}
}
.dz-details {
bottom: 0;
top: 0;
color: white;
background-color: rgba(33, 150, 243, 0.8);
transition: opacity .2s linear;
text-align: left;
.dz-filename span, .dz-size span {
background-color: transparent;
}
.dz-filename:not(:hover) span {
border: none;
}
.dz-filename:hover span {
background-color: transparent;
border: none;
}
}
.dz-progress .dz-upload {
background: #cccccc;
}
.dz-remove {
position: absolute;
z-index: 30;
color: white;
margin-left: 15px;
padding: 10px;
top: inherit;
bottom: 15px;
border: 2px white solid;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 1.1px;
opacity: 0;
}
&:hover {
.dz-remove {
opacity: 1;
}
}
.dz-success-mark, .dz-error-mark {
margin-left: auto !important;
margin-top: auto !important;
width: 100% !important;
top: 35% !important;
left: 0;
i {
color: white !important;
font-size: 5rem !important;
}
}
.dz-error-message {
top: calc(50% + 25px);
left: calc(50% - 35px);
}
}
}
</style>