19 | 28 |

29 | 30 | 31 | 32 | 37 | ``` 38 | #### Configure With Laravel Ui 39 | ```js 40 | // app.js 41 | 42 | import FileUploader from 'laravel-file-uploader'; 43 | 44 | Vue.use(FileUploader); 45 | ``` 46 | #### Usage 47 | ```blade 48 | 57 | ``` 58 | 59 | #### Working with images 60 | > You optimize images size before uploading by adding `max-{width|height}` attribute and will upload the image as a base64 file: 61 | ```blade 62 | 73 | ``` 74 | ##### Attributes 75 | | Attribute |Rule | Type |Description | 76 | |--|--|--|--| 77 | | name | optional - default: `media` |string | the name of tokens fields | 78 | | media | optional - default: `[]` |array | used to display an existing files | 79 | | unlimited |optional - default:`false`| boolean| upload unlimited files - if let it `false` will not be multiple select| 80 | | max|optional - default:`12`| int| the maximum uploaded files - if `1` will not me multiple select| 81 | |accept| optional - default: `*`| string| the accepted mime types| 82 | |form| optional - default: `false`| string| the form id of the uploaded media| 83 | |notes| optional - default `null`| string| the help-block that will be displayed under the files| 84 | |label| optional - default `null`| string| the label of the uploader| 85 | |collection| optional - default `default`|string| the media library collection that the file will store in| 86 | |tokens| optional - default: `[]`|array|the recently uploaded files tokens, used to display recently uploaded files in validation case| 87 | |name| optional - default: `null`|array|the input name of the uploader| 88 | |max-width| optional - default: `1200`|string|The maximum width of uploaded image| 89 | |max-height| optional - default: `1200`|string|The maximum height of uploaded image| 90 | |display-validation-messages| optional - default: `false`|boolean|Used for displaying validation messages| 91 | 92 | ##### Use With Vue Or SPA Applications 93 | ```html 94 | 98 | 99 | 109 | ``` 110 | 111 | ##### Events 112 | * beforeUpload 113 | * complete 114 | ```html 115 | 120 | ``` 121 | * upload-error 122 | ```html 123 | 128 | 140 | ``` 141 | 142 | ##### File Preview Component 143 | This component used to preview uploaded media (images, audios, videos). 144 | ```blade 145 | 146 | ``` 147 | 148 | > **Note:** 149 | > Do not forget to store the laravel `csrf` token in an HTML `meta` tag: 150 | ```blade 151 | 152 | ``` 153 | -------------------------------------------------------------------------------- /build/rollup.config.js: -------------------------------------------------------------------------------- 1 | // rollup.config.js 2 | 3 | import vue from "rollup-plugin-vue"; 4 | import buble from "rollup-plugin-buble"; 5 | import commonjs from "rollup-plugin-commonjs"; 6 | 7 | const config = { 8 | input: "src/entry.js", 9 | output: { 10 | name: "file-uploader", 11 | exports: "named", 12 | extend: true 13 | }, 14 | 15 | plugins: [ 16 | commonjs(), 17 | vue({ 18 | css: true, 19 | compileTemplate: true, 20 | template: { 21 | isProduction: true 22 | } 23 | }), 24 | buble({ 25 | transforms: { asyncAwait: false } 26 | }) 27 | ] 28 | }; 29 | 30 | export default config; 31 | -------------------------------------------------------------------------------- /dist/file-uploader.esm.js: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 4 | // 5 | // 6 | // 7 | // 8 | // 9 | // 10 | // 11 | // 12 | // 13 | // 14 | // 15 | // 16 | // 17 | // 18 | // 19 | // 20 | // 21 | // 22 | // 23 | // 24 | // 25 | // 26 | // 27 | // 28 | // 29 | // 30 | // 31 | // 32 | // 33 | // 34 | // 35 | // 36 | // 37 | // 38 | // 39 | // 40 | // 41 | // 42 | // 43 | // 44 | // 45 | // 46 | // 47 | // 48 | // 49 | // 50 | // 51 | // 52 | // 53 | // 54 | // 55 | // 56 | // 57 | // 58 | // 59 | // 60 | // 61 | // 62 | // 63 | // 64 | // 65 | // 66 | // 67 | // 68 | // 69 | // 70 | // 71 | // 72 | // 73 | // 74 | // 75 | // 76 | // 77 | // 78 | // 79 | // 80 | // 81 | // 82 | // 83 | // 84 | // 85 | // 86 | // 87 | // 88 | // 89 | // 90 | // 91 | // 92 | // 93 | // 94 | // 95 | // 96 | // 97 | // 98 | // 99 | // 100 | // 101 | // 102 | // 103 | // 104 | // 105 | // 106 | // 107 | // 108 | // 109 | // 110 | // 111 | // 112 | // 113 | // 114 | // 115 | // 116 | // 117 | // 118 | // 119 | // 120 | // 121 | // 122 | // 123 | // 124 | // 125 | // 126 | // 127 | // 128 | // 129 | // 130 | // 131 | // 132 | // 133 | // 134 | // 135 | // 136 | // 137 | // 138 | // 139 | // 140 | // 141 | // 142 | // 143 | // 144 | 145 | var script = { 146 | props: { 147 | max: { 148 | default: 1 149 | }, 150 | unlimited: { 151 | default: false 152 | }, 153 | media: { 154 | required: false, 155 | type: Array, 156 | default: function () { return []; } 157 | }, 158 | accept: { 159 | required: false, 160 | type: String, 161 | default: '*', 162 | }, 163 | notes: { 164 | required: false, 165 | type: String, 166 | default: '', 167 | }, 168 | label: { 169 | required: false, 170 | type: String, 171 | default: '', 172 | }, 173 | collection: { 174 | required: false, 175 | type: String, 176 | default: 'default', 177 | }, 178 | maxWidth: { 179 | required: false, 180 | default: '800', 181 | }, 182 | maxHeight: { 183 | required: false, 184 | default: '800', 185 | }, 186 | value: { 187 | required: false, 188 | type: Object / Array, 189 | default: function () { return []; }, 190 | }, 191 | tokens: { 192 | required: false, 193 | type: Object / Array, 194 | default: function () { return []; }, 195 | }, 196 | form: { 197 | required: false, 198 | default: false 199 | }, 200 | displayValidationMessages: { 201 | required: false, 202 | default: false 203 | }, 204 | name: { 205 | required: false, 206 | type: String, 207 | default: 'media' 208 | } 209 | }, 210 | data: function data() { 211 | return { 212 | files: this.media || [], 213 | values: this.tokens, 214 | inputFilesLength: 0, 215 | pending: -1, 216 | uploading: false, 217 | preview: null, 218 | maximum: this.max, 219 | errors: [], 220 | } 221 | }, 222 | created: function created() { 223 | var this$1 = this; 224 | 225 | var handleEscape = function (e) { 226 | if (e.key === 'Esc' || e.key === 'Escape') { 227 | this$1.preview = null; 228 | } 229 | }; 230 | document.addEventListener('keydown', handleEscape); 231 | 232 | if (this.unlimited) { 233 | this.maximum = 0; 234 | } 235 | if (this.value.length) { 236 | var xhr = new XMLHttpRequest(); 237 | var vueInstance = this; 238 | var params = Object.keys(this.value).map(function (key) { 239 | return 'tokens[]=' + this$1.value[key] 240 | }).join('&'); 241 | xhr.onreadystatechange = function () { 242 | if (this.readyState === 4) { 243 | if (this.status === 200) { 244 | if (this.responseText) { 245 | vueInstance.files = JSON.parse(this.responseText).data; 246 | } 247 | } 248 | } 249 | }; 250 | xhr.open("GET", '/api/uploader/media?collection=' + this.collection + '&' + params, true); 251 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 252 | var token = document.head.querySelector('meta[name="csrf-token"]'); 253 | if (token) { 254 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 255 | } else { 256 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 257 | } 258 | xhr.send(null); 259 | } 260 | }, 261 | methods: { 262 | readUrl: async function readUrl(event) { 263 | var this$1 = this; 264 | 265 | var input = event.target; 266 | if (input.files) { 267 | var fileList = input.files; 268 | var filesCount = fileList.length > this.maximum - this.files.length 269 | ? this.maximum - this.files.length : fileList.length; 270 | this.inputFilesLength = filesCount; 271 | if (!this.unlimited) { 272 | this.pending = filesCount; 273 | } else { 274 | filesCount = fileList.length; 275 | } 276 | if (filesCount > 0) { 277 | this.uploading = true; 278 | } 279 | 280 | for (var i = 0; i < filesCount; i++) { 281 | await this.upload(fileList[i]) 282 | .then(function (response) { 283 | if (!this$1.unlimited) { 284 | this$1.pending--; 285 | } 286 | this$1.uploading = false; 287 | var file = response.data; 288 | this$1.files.push(file[0]); 289 | this$1.values.push(response.token); 290 | this$1.$emit('input', this$1.values); 291 | this$1.complete(); 292 | }) 293 | .catch(function (error) { 294 | if (!this$1.unlimited) { 295 | this$1.pending--; 296 | } 297 | this$1.uploading = false; 298 | 299 | if (error.status === 422) { 300 | this$1.errors.push({ 301 | message: error.response.errors.file[0], 302 | filename: error.file.name 303 | }); 304 | } 305 | 306 | this$1.$emit('upload-error', error); 307 | this$1.complete(); 308 | }); 309 | } 310 | } 311 | }, 312 | resizeImage: function resizeImage(base64Str) { 313 | var this$1 = this; 314 | 315 | return new Promise(function (resolve) { 316 | 317 | var img = new Image(); 318 | img.src = base64Str; 319 | return img.onload = function () { 320 | var canvas = document.createElement('canvas'); 321 | var MAX_WIDTH = this$1.maxWidth; 322 | var MAX_HEIGHT = this$1.maxHeight; 323 | var width = img.width; 324 | var height = img.height; 325 | 326 | if (width > height) { 327 | if (width > MAX_WIDTH) { 328 | height *= MAX_WIDTH / width; 329 | width = MAX_WIDTH; 330 | } 331 | } else { 332 | if (height > MAX_HEIGHT) { 333 | width *= MAX_HEIGHT / height; 334 | height = MAX_HEIGHT; 335 | } 336 | } 337 | canvas.width = width; 338 | canvas.height = height; 339 | var ctx = canvas.getContext('2d'); 340 | ctx.drawImage(img, 0, 0, width, height); 341 | resolve(canvas.toDataURL()); 342 | } 343 | 344 | }) 345 | }, 346 | upload: function upload(file) { 347 | var this$1 = this; 348 | 349 | return new Promise(function (resolve, reject) { 350 | this$1.beforeUploading(); 351 | var formData = new FormData(); 352 | 353 | if (file.type.includes('image')) { 354 | 355 | var reader = new FileReader(); 356 | 357 | var resize = async function () { 358 | var image = await this$1.resizeImage(reader.result); 359 | 360 | formData.append('file', image); 361 | }; 362 | 363 | 364 | reader.addEventListener("load", resize, false); 365 | 366 | 367 | if (file) { 368 | reader.readAsDataURL(file); 369 | } 370 | 371 | } else { 372 | formData.append('file', file); 373 | } 374 | // TODO: refactor 375 | setTimeout(function () { 376 | formData.append('collection', this$1.collection); 377 | var xhr = new XMLHttpRequest(); 378 | xhr.onreadystatechange = function () { 379 | if (this.readyState === 4) { 380 | if (this.status === 200) { 381 | if (this.responseText) { 382 | resolve(JSON.parse(this.responseText)); 383 | } 384 | } else { 385 | if (this.responseText) { 386 | reject({ 387 | response: JSON.parse(this.responseText), 388 | status: this.status, 389 | file: file 390 | }); 391 | } 392 | } 393 | } 394 | }; 395 | xhr.open("POST", '/api/uploader/media/upload', true); 396 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 397 | var token = document.head.querySelector('meta[name="csrf-token"]'); 398 | if (token) { 399 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 400 | } else { 401 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 402 | } 403 | xhr.send(formData); 404 | }, 1000); 405 | }); 406 | }, 407 | deleteFile: function deleteFile(file) { 408 | if (file.data) { 409 | return; 410 | } 411 | var xhr = new XMLHttpRequest(); 412 | xhr.open("DELETE", file.links.delete.href, true); 413 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 414 | var token = document.head.querySelector('meta[name="csrf-token"]'); 415 | if (token) { 416 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 417 | } else { 418 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 419 | } 420 | xhr.send(); 421 | this.$delete(this.files, this.files.indexOf(file)); 422 | this.$delete(this.values, this.files.indexOf(file)); 423 | this.inputFilesLength--; 424 | this.complete(); 425 | }, 426 | beforeUploading: function beforeUploading() { 427 | var input = document.querySelector('[type=submit]'); 428 | if (input) { 429 | input.setAttribute('disabled', true); 430 | } 431 | this.$emit('beforeUpload'); 432 | }, 433 | complete: function complete() { 434 | if (this.values.length >= this.inputFilesLength) { 435 | var input = document.querySelector('[type=submit]'); 436 | if (input) { 437 | input.removeAttribute('disabled'); 438 | } 439 | 440 | this.$emit('complete'); 441 | } 442 | } 443 | } 444 | }; 445 | 446 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 447 | /* server only */ 448 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 449 | if (typeof shadowMode !== 'boolean') { 450 | createInjectorSSR = createInjector; 451 | createInjector = shadowMode; 452 | shadowMode = false; 453 | } // Vue.extend constructor export interop. 454 | 455 | 456 | var options = typeof script === 'function' ? script.options : script; // render functions 457 | 458 | if (template && template.render) { 459 | options.render = template.render; 460 | options.staticRenderFns = template.staticRenderFns; 461 | options._compiled = true; // functional template 462 | 463 | if (isFunctionalTemplate) { 464 | options.functional = true; 465 | } 466 | } // scopedId 467 | 468 | 469 | if (scopeId) { 470 | options._scopeId = scopeId; 471 | } 472 | 473 | var hook; 474 | 475 | if (moduleIdentifier) { 476 | // server build 477 | hook = function hook(context) { 478 | // 2.3 injection 479 | context = context || // cached call 480 | this.$vnode && this.$vnode.ssrContext || // stateful 481 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 482 | // 2.2 with runInNewContext: true 483 | 484 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 485 | context = __VUE_SSR_CONTEXT__; 486 | } // inject component styles 487 | 488 | 489 | if (style) { 490 | style.call(this, createInjectorSSR(context)); 491 | } // register component module identifier for async chunk inference 492 | 493 | 494 | if (context && context._registeredComponents) { 495 | context._registeredComponents.add(moduleIdentifier); 496 | } 497 | }; // used by ssr in case component is cached and beforeCreate 498 | // never gets called 499 | 500 | 501 | options._ssrRegister = hook; 502 | } else if (style) { 503 | hook = shadowMode ? function () { 504 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 505 | } : function (context) { 506 | style.call(this, createInjector(context)); 507 | }; 508 | } 509 | 510 | if (hook) { 511 | if (options.functional) { 512 | // register for functional component in vue file 513 | var originalRender = options.render; 514 | 515 | options.render = function renderWithStyleInjection(h, context) { 516 | hook.call(context); 517 | return originalRender(h, context); 518 | }; 519 | } else { 520 | // inject component registration as beforeCreate hook 521 | var existing = options.beforeCreate; 522 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 523 | } 524 | } 525 | 526 | return script; 527 | } 528 | 529 | var normalizeComponent_1 = normalizeComponent; 530 | 531 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); 532 | function createInjector(context) { 533 | return function (id, style) { 534 | return addStyle(id, style); 535 | }; 536 | } 537 | var HEAD = document.head || document.getElementsByTagName('head')[0]; 538 | var styles = {}; 539 | 540 | function addStyle(id, css) { 541 | var group = isOldIE ? css.media || 'default' : id; 542 | var style = styles[group] || (styles[group] = { 543 | ids: new Set(), 544 | styles: [] 545 | }); 546 | 547 | if (!style.ids.has(id)) { 548 | style.ids.add(id); 549 | var code = css.source; 550 | 551 | if (css.map) { 552 | // https://developer.chrome.com/devtools/docs/javascript-debugging 553 | // this makes source maps inside style tags work properly in Chrome 554 | code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 555 | 556 | code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; 557 | } 558 | 559 | if (!style.element) { 560 | style.element = document.createElement('style'); 561 | style.element.type = 'text/css'; 562 | if (css.media) { style.element.setAttribute('media', css.media); } 563 | HEAD.appendChild(style.element); 564 | } 565 | 566 | if ('styleSheet' in style.element) { 567 | style.styles.push(code); 568 | style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); 569 | } else { 570 | var index = style.ids.size - 1; 571 | var textNode = document.createTextNode(code); 572 | var nodes = style.element.childNodes; 573 | if (nodes[index]) { style.element.removeChild(nodes[index]); } 574 | if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); } 575 | } 576 | } 577 | } 578 | 579 | var browser = createInjector; 580 | 581 | /* script */ 582 | var __vue_script__ = script; 583 | 584 | /* template */ 585 | var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"uploader-mb-4"},[_c('label',[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_c('div',{staticClass:"uploader-flex uploader-flex-wrap"},[_vm._l((_vm.files),function(file){return _c('div',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-md uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none",attrs:{"title":file.file_name}},[_c('img',{staticClass:"uploader-absolute uploader-w-full uploader-h-full uploader-object-contain",attrs:{"src":file.preview,"alt":"preview"}}),_vm._v(" "),_c('a',{staticClass:"uploader-absolute uploader-bg-red-600 uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-0 uploader-right-0 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",attrs:{"href":"#","title":"Delete"},on:{"click":function($event){$event.preventDefault();return _vm.deleteFile(file)}}},[_c('svg',{staticClass:"uploader-w-5 uploader-h-5",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"}})])]),_vm._v(" "),_c('a',{staticClass:"uploader-absolute uploader-bg-green-600 uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-0 uploader-left-0 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",attrs:{"href":"#","title":"Show"},on:{"click":function($event){$event.preventDefault();_vm.preview = file;}}},[_c('svg',{staticClass:"uploader-w-5 uploader-h-5",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"}})])]),_vm._v(" "),_c('span',{staticClass:"uploader-font-sans uploader-absolute uploader-w-full uploader-flex uploader-justify-center uploader-bg-gray-900 uploader-text-white uploader-text-sm uploader-bottom-0"},[_vm._v("\n "+_vm._s(file.human_readable_size)+"\n ")])])}),_vm._v(" "),_vm._l(((_vm.maximum - _vm.files.length < 0 ? 0 : _vm.maximum - _vm.files.length)),function(i){return (!_vm.unlimited)?_c('label',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-xl uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none hover:uploader-bg-gray-100 uploader-cursor-pointer"},[_c('input',{ref:"file",refInFor:true,staticClass:"uploader-hidden",attrs:{"type":"file","accept":_vm.accept,"multiple":_vm.maximum > 1},on:{"change":_vm.readUrl}}),_vm._v(" "),(i <= _vm.pending)?_c('svg',{staticClass:"uploader-animate-spin uploader-h-8 uploader-w-8 uploader-text-gray-500",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24"}},[_c('circle',{staticClass:"uploader-opacity-50",attrs:{"cx":"12","cy":"12","r":"10","stroke":"currentColor","stroke-width":"4"}}),_vm._v(" "),_c('path',{staticClass:"uploader-opacity-75",attrs:{"fill":"currentColor","d":"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}})]):_c('svg',{staticClass:"uploader-w-12 uploader-h-12",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}})])]):_vm._e()}),_vm._v(" "),(_vm.unlimited)?_c('label',{staticClass:"uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-xl uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none hover:uploader-bg-gray-100 uploader-cursor-pointer"},[_c('input',{ref:"file",staticClass:"uploader-hidden",attrs:{"type":"file","accept":_vm.accept,"multiple":true},on:{"change":_vm.readUrl}}),_vm._v(" "),(_vm.uploading)?_c('svg',{staticClass:"uploader-animate-spin uploader-h-8 uploader-w-8 uploader-text-gray-500",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24"}},[_c('circle',{staticClass:"uploader-opacity-50",attrs:{"cx":"12","cy":"12","r":"10","stroke":"currentColor","stroke-width":"4"}}),_vm._v(" "),_c('path',{staticClass:"uploader-opacity-75",attrs:{"fill":"currentColor","d":"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}})]):_c('svg',{staticClass:"uploader-w-12 uploader-h-12",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}})])]):_vm._e()],2),_vm._v(" "),_vm._l((_vm.values),function(token){return _c('input',{attrs:{"type":"hidden","form":_vm.form,"name":(((_vm.name)) + "[]")},domProps:{"value":token}})}),_vm._v(" "),(_vm.errors.length === 0)?_c('small',{staticClass:"uploader-text-gray-600"},[_vm._v(_vm._s(_vm.notes))]):_vm._e(),_vm._v(" "),_vm._l((_vm.errors),function(error){return (_vm.errors.length && _vm.displayValidationMessages)?_c('p',{staticClass:"uploader-flex uploader-items-center uploader-text-red-600"},[_c('svg',{staticClass:"uploader-w-5 uploader-w-5 uploader-inline uploader-mx-2",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}})]),_vm._v("\n "+_vm._s(error.message)+" ("),_c('u',{staticClass:"uploader-cursor-pointer"},[_vm._v(_vm._s(error.filename))]),_vm._v(")\n ")]):_vm._e()}),_vm._v(" "),(_vm.preview)?_c('div',{staticClass:"uploader-overflow-auto uploader-fixed uploader-flex uploader-justify-center uploader-w-full uploader-h-full uploader-top-0 uploader-left-0 uploader-bg-black uploader-bg-opacity-50 uploader-z-999999999",on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.preview = null;}}},[_c('div',{staticClass:"uploader-w-full md:uploader-w-1/2 uploader-mx-2 uploader-rounded-t-lg uploader-shadow-md uploader-mt-10 uploader-bg-white uploader-h-300-px uploader-relative uploader-border uploader-border-gray-600"},[_c('button',{staticClass:"uploader-bg-gray-600 hover:uploader-bg-gray-800 uploader-shadow-md uploader-absolute uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-10 uploader-right-10 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",on:{"click":function($event){$event.preventDefault();_vm.preview = null;}}},[_c('svg',{staticClass:"uploader-w-8 uploader-h-8",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])]),_vm._v(" "),_c('div',{staticClass:"uploader-h-full uploader-flex uploader-items-center"},[(_vm.preview && _vm.preview.mime_type.includes('image'))?_c('img',{staticClass:"uploader-object-contain uploader-w-full uploader-p-1 uploader-h-full",attrs:{"src":_vm.preview.url,"alt":"preview"}}):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('audio'))?_c('audio',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-48",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the audio tag.\n ")]):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('video'))?_c('video',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-full",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the video tag.\n ")]):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"uploader-bg-white uploader-flex uploader-items-center uploader-justify-start uploader-overflow-auto uploader-py-2 uploader-w-full uploader-mt-1 uploader-border uploader-border-gray-600 uploader-rounded-b-lg uploader-shadow-2xl"},_vm._l((_vm.files),function(file){return _c('img',{staticClass:"uploader-cursor-pointer hover:uploader-border-gray-600 uploader-object-cover uploader-bg-white uploader-mx-2 uploader-w-20 uploader-h-20 uploader-border uploader-border-gray-400",attrs:{"src":file.preview},on:{"mouseover":function($event){_vm.preview = file;}}})}),0)])]):_vm._e()],2)}; 586 | var __vue_staticRenderFns__ = []; 587 | 588 | /* style */ 589 | var __vue_inject_styles__ = function (inject) { 590 | if (!inject) { return } 591 | inject("data-v-597f7c1e_0", { source: "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html[data-v-597f7c1e]{line-height:1.15;-webkit-text-size-adjust:100%}body[data-v-597f7c1e]{margin:0}main[data-v-597f7c1e]{display:block}h1[data-v-597f7c1e]{font-size:2em;margin:.67em 0}hr[data-v-597f7c1e]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-597f7c1e]{font-family:monospace,monospace;font-size:1em}a[data-v-597f7c1e]{background-color:transparent}abbr[title][data-v-597f7c1e]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-597f7c1e],strong[data-v-597f7c1e]{font-weight:bolder}code[data-v-597f7c1e],kbd[data-v-597f7c1e],samp[data-v-597f7c1e]{font-family:monospace,monospace;font-size:1em}small[data-v-597f7c1e]{font-size:80%}sub[data-v-597f7c1e],sup[data-v-597f7c1e]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-597f7c1e]{bottom:-.25em}sup[data-v-597f7c1e]{top:-.5em}img[data-v-597f7c1e]{border-style:none}button[data-v-597f7c1e],input[data-v-597f7c1e],optgroup[data-v-597f7c1e],select[data-v-597f7c1e],textarea[data-v-597f7c1e]{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button[data-v-597f7c1e],input[data-v-597f7c1e]{overflow:visible}button[data-v-597f7c1e],select[data-v-597f7c1e]{text-transform:none}[type=button][data-v-597f7c1e],[type=submit][data-v-597f7c1e],button[data-v-597f7c1e]{-webkit-appearance:button}[type=button][data-v-597f7c1e]::-moz-focus-inner,[type=submit][data-v-597f7c1e]::-moz-focus-inner,button[data-v-597f7c1e]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-597f7c1e]:-moz-focusring,[type=submit][data-v-597f7c1e]:-moz-focusring,button[data-v-597f7c1e]:-moz-focusring{outline:1px dotted ButtonText}fieldset[data-v-597f7c1e]{padding:.35em .75em .625em}legend[data-v-597f7c1e]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-597f7c1e]{vertical-align:baseline}textarea[data-v-597f7c1e]{overflow:auto}details[data-v-597f7c1e]{display:block}summary[data-v-597f7c1e]{display:list-item}template[data-v-597f7c1e]{display:none}[hidden][data-v-597f7c1e]{display:none}blockquote[data-v-597f7c1e],dd[data-v-597f7c1e],dl[data-v-597f7c1e],figure[data-v-597f7c1e],h1[data-v-597f7c1e],h2[data-v-597f7c1e],h3[data-v-597f7c1e],h4[data-v-597f7c1e],h5[data-v-597f7c1e],h6[data-v-597f7c1e],hr[data-v-597f7c1e],p[data-v-597f7c1e],pre[data-v-597f7c1e]{margin:0}button[data-v-597f7c1e]{background-color:transparent;background-image:none}button[data-v-597f7c1e]:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset[data-v-597f7c1e]{margin:0;padding:0}ol[data-v-597f7c1e],ul[data-v-597f7c1e]{list-style:none;margin:0;padding:0}html[data-v-597f7c1e]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";line-height:1.5}*[data-v-597f7c1e],[data-v-597f7c1e]::after,[data-v-597f7c1e]::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr[data-v-597f7c1e]{border-top-width:1px}img[data-v-597f7c1e]{border-style:solid}textarea[data-v-597f7c1e]{resize:vertical}input[data-v-597f7c1e]::-moz-placeholder,textarea[data-v-597f7c1e]::-moz-placeholder{color:#a0aec0}input[data-v-597f7c1e]:-ms-input-placeholder,textarea[data-v-597f7c1e]:-ms-input-placeholder{color:#a0aec0}input[data-v-597f7c1e]::placeholder,textarea[data-v-597f7c1e]::placeholder{color:#a0aec0}button[data-v-597f7c1e]{cursor:pointer}table[data-v-597f7c1e]{border-collapse:collapse}h1[data-v-597f7c1e],h2[data-v-597f7c1e],h3[data-v-597f7c1e],h4[data-v-597f7c1e],h5[data-v-597f7c1e],h6[data-v-597f7c1e]{font-size:inherit;font-weight:inherit}a[data-v-597f7c1e]{color:inherit;text-decoration:inherit}button[data-v-597f7c1e],input[data-v-597f7c1e],optgroup[data-v-597f7c1e],select[data-v-597f7c1e],textarea[data-v-597f7c1e]{padding:0;line-height:inherit;color:inherit}code[data-v-597f7c1e],kbd[data-v-597f7c1e],pre[data-v-597f7c1e],samp[data-v-597f7c1e]{font-family:Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}audio[data-v-597f7c1e],canvas[data-v-597f7c1e],embed[data-v-597f7c1e],iframe[data-v-597f7c1e],img[data-v-597f7c1e],object[data-v-597f7c1e],svg[data-v-597f7c1e],video[data-v-597f7c1e]{display:block;vertical-align:middle}img[data-v-597f7c1e],video[data-v-597f7c1e]{max-width:100%;height:auto}.uploader-bg-black[data-v-597f7c1e]{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.uploader-bg-white[data-v-597f7c1e]{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.uploader-bg-gray-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#718096;background-color:rgba(113,128,150,var(--bg-opacity))}.uploader-bg-gray-900[data-v-597f7c1e]{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.uploader-bg-red-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#e53e3e;background-color:rgba(229,62,62,var(--bg-opacity))}.uploader-bg-green-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#38a169;background-color:rgba(56,161,105,var(--bg-opacity))}.hover\\:uploader-bg-gray-100[data-v-597f7c1e]:hover{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.hover\\:uploader-bg-gray-800[data-v-597f7c1e]:hover{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.uploader-bg-opacity-50[data-v-597f7c1e]{--bg-opacity:0.5}.uploader-border-gray-400[data-v-597f7c1e]{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.uploader-border-gray-500[data-v-597f7c1e]{--border-opacity:1;border-color:#a0aec0;border-color:rgba(160,174,192,var(--border-opacity))}.uploader-border-gray-600[data-v-597f7c1e]{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.hover\\:uploader-border-gray-600[data-v-597f7c1e]:hover{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.uploader-rounded-md[data-v-597f7c1e]{border-radius:.375rem}.uploader-rounded-xl[data-v-597f7c1e]{border-radius:.75rem}.uploader-rounded-t-lg[data-v-597f7c1e]{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.uploader-rounded-b-lg[data-v-597f7c1e]{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.uploader-border-dashed[data-v-597f7c1e]{border-style:dashed}.uploader-border-2[data-v-597f7c1e]{border-width:2px}.uploader-border[data-v-597f7c1e]{border-width:1px}.uploader-cursor-pointer[data-v-597f7c1e]{cursor:pointer}.uploader-inline[data-v-597f7c1e]{display:inline}.uploader-flex[data-v-597f7c1e]{display:flex}.uploader-hidden[data-v-597f7c1e]{display:none}.uploader-flex-wrap[data-v-597f7c1e]{flex-wrap:wrap}.uploader-items-center[data-v-597f7c1e]{align-items:center}.uploader-justify-start[data-v-597f7c1e]{justify-content:flex-start}.uploader-justify-center[data-v-597f7c1e]{justify-content:center}.uploader-font-sans[data-v-597f7c1e]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"}.uploader-h-5[data-v-597f7c1e]{height:1.25rem}.uploader-h-6[data-v-597f7c1e]{height:1.5rem}.uploader-h-8[data-v-597f7c1e]{height:2rem}.uploader-h-12[data-v-597f7c1e]{height:3rem}.uploader-h-20[data-v-597f7c1e]{height:5rem}.uploader-h-32[data-v-597f7c1e]{height:8rem}.uploader-h-48[data-v-597f7c1e]{height:12rem}.uploader-h-full[data-v-597f7c1e]{height:100%}.uploader-h-300-px[data-v-597f7c1e]{height:300px}.uploader-text-sm[data-v-597f7c1e]{font-size:.875rem}.uploader-m-2[data-v-597f7c1e]{margin:.5rem}.uploader-mx-2[data-v-597f7c1e]{margin-left:.5rem;margin-right:.5rem}.uploader-mt-1[data-v-597f7c1e]{margin-top:.25rem}.uploader-mb-4[data-v-597f7c1e]{margin-bottom:1rem}.uploader-mt-10[data-v-597f7c1e]{margin-top:2.5rem}.uploader-object-contain[data-v-597f7c1e]{-o-object-fit:contain;object-fit:contain}.uploader-object-cover[data-v-597f7c1e]{-o-object-fit:cover;object-fit:cover}.uploader-opacity-50[data-v-597f7c1e]{opacity:.5}.uploader-opacity-75[data-v-597f7c1e]{opacity:.75}.focus\\:uploader-outline-none[data-v-597f7c1e]:focus{outline:2px solid transparent;outline-offset:2px}.uploader-overflow-auto[data-v-597f7c1e]{overflow:auto}.uploader-overflow-hidden[data-v-597f7c1e]{overflow:hidden}.uploader-p-1[data-v-597f7c1e]{padding:.25rem}.uploader-p-8[data-v-597f7c1e]{padding:2rem}.uploader-py-2[data-v-597f7c1e]{padding-top:.5rem;padding-bottom:.5rem}.uploader-fixed[data-v-597f7c1e]{position:fixed}.uploader-absolute[data-v-597f7c1e]{position:absolute}.uploader-relative[data-v-597f7c1e]{position:relative}.uploader-top-0[data-v-597f7c1e]{top:0}.uploader-right-0[data-v-597f7c1e]{right:0}.uploader-bottom-0[data-v-597f7c1e]{bottom:0}.uploader-left-0[data-v-597f7c1e]{left:0}.uploader-top-10[data-v-597f7c1e]{top:10px}.uploader-right-10[data-v-597f7c1e]{right:10px}.uploader-shadow-md[data-v-597f7c1e]{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.uploader-shadow-2xl[data-v-597f7c1e]{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.uploader-text-white[data-v-597f7c1e]{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.uploader-text-gray-500[data-v-597f7c1e]{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.uploader-text-gray-600[data-v-597f7c1e]{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.uploader-text-red-600[data-v-597f7c1e]{--text-opacity:1;color:#e53e3e;color:rgba(229,62,62,var(--text-opacity))}.uploader-w-5[data-v-597f7c1e]{width:1.25rem}.uploader-w-6[data-v-597f7c1e]{width:1.5rem}.uploader-w-8[data-v-597f7c1e]{width:2rem}.uploader-w-12[data-v-597f7c1e]{width:3rem}.uploader-w-20[data-v-597f7c1e]{width:5rem}.uploader-w-32[data-v-597f7c1e]{width:8rem}.uploader-w-full[data-v-597f7c1e]{width:100%}.uploader-z-999999999[data-v-597f7c1e]{z-index:999999999}@-webkit-keyframes spin-data-v-597f7c1e{to{transform:rotate(360deg)}}@keyframes spin-data-v-597f7c1e{to{transform:rotate(360deg)}}@-webkit-keyframes ping-data-v-597f7c1e{100%,75%{transform:scale(2);opacity:0}}@keyframes ping-data-v-597f7c1e{100%,75%{transform:scale(2);opacity:0}}@-webkit-keyframes pulse-data-v-597f7c1e{50%{opacity:.5}}@keyframes pulse-data-v-597f7c1e{50%{opacity:.5}}@-webkit-keyframes bounce-data-v-597f7c1e{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce-data-v-597f7c1e{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.uploader-animate-spin[data-v-597f7c1e]{-webkit-animation:spin-data-v-597f7c1e 1s linear infinite;animation:spin-data-v-597f7c1e 1s linear infinite}@media (min-width:768px){.md\\:uploader-w-1\\/2[data-v-597f7c1e]{width:50%}}", map: undefined, media: undefined }); 592 | 593 | }; 594 | /* scoped */ 595 | var __vue_scope_id__ = "data-v-597f7c1e"; 596 | /* module identifier */ 597 | var __vue_module_identifier__ = undefined; 598 | /* functional template */ 599 | var __vue_is_functional_template__ = false; 600 | /* style inject SSR */ 601 | 602 | 603 | 604 | var component = normalizeComponent_1( 605 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 606 | __vue_inject_styles__, 607 | __vue_script__, 608 | __vue_scope_id__, 609 | __vue_is_functional_template__, 610 | __vue_module_identifier__, 611 | browser, 612 | undefined 613 | ); 614 | 615 | // 616 | // 617 | // 618 | // 619 | // 620 | // 621 | // 622 | // 623 | // 624 | // 625 | // 626 | // 627 | // 628 | // 629 | // 630 | // 631 | // 632 | // 633 | // 634 | // 635 | // 636 | // 637 | // 638 | // 639 | // 640 | // 641 | // 642 | // 643 | // 644 | // 645 | // 646 | // 647 | // 648 | // 649 | // 650 | // 651 | // 652 | // 653 | // 654 | // 655 | // 656 | // 657 | // 658 | // 659 | // 660 | // 661 | // 662 | // 663 | // 664 | // 665 | // 666 | // 667 | // 668 | // 669 | // 670 | // 671 | // 672 | // 673 | // 674 | // 675 | // 676 | 677 | var script$1 = { 678 | props: { 679 | media: { 680 | required: false, 681 | type: Array, 682 | default: function () { return []; } 683 | }, 684 | }, 685 | data: function data() { 686 | return { 687 | files: this.media || [], 688 | preview: null, 689 | } 690 | }, 691 | created: function created() { 692 | var this$1 = this; 693 | 694 | var handleEscape = function (e) { 695 | if (e.key === 'Esc' || e.key === 'Escape') { 696 | this$1.preview = null; 697 | } 698 | }; 699 | document.addEventListener('keydown', handleEscape); 700 | 701 | } 702 | }; 703 | 704 | /* script */ 705 | var __vue_script__$1 = script$1; 706 | 707 | /* template */ 708 | var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"uploader-mb-4"},[_c('div',{staticClass:"uploader-flex uploader-flex-wrap"},_vm._l((_vm.files),function(file){return _c('div',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-md uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none",attrs:{"title":file.file_name}},[_c('img',{staticClass:"uploader-absolute uploader-w-full uploader-h-full uploader-object-contain uploader-cursor-pointer",attrs:{"src":file.preview,"alt":"preview"},on:{"click":function($event){$event.preventDefault();_vm.preview = file;}}}),_vm._v(" "),_c('span',{staticClass:"uploader-font-sans uploader-absolute uploader-w-full uploader-flex uploader-justify-center uploader-bg-gray-900 uploader-text-white uploader-text-sm uploader-bottom-0"},[_vm._v("\n "+_vm._s(file.human_readable_size)+"\n ")])])}),0),_vm._v(" "),(_vm.preview)?_c('div',{staticClass:"uploader-overflow-auto uploader-fixed uploader-flex uploader-justify-center uploader-w-full uploader-h-full uploader-top-0 uploader-left-0 uploader-bg-black uploader-bg-opacity-50 uploader-z-999999999",on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.preview = null;}}},[_c('div',{staticClass:"uploader-w-full md:uploader-w-1/2 uploader-mx-2 uploader-rounded-t-lg uploader-shadow-md uploader-mt-10 uploader-bg-white uploader-h-300-px uploader-relative uploader-border uploader-border-gray-600"},[_c('button',{staticClass:"uploader-bg-gray-600 hover:uploader-bg-gray-800 uploader-shadow-md uploader-absolute uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-10 uploader-right-10 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",on:{"click":function($event){$event.preventDefault();_vm.preview = null;}}},[_c('svg',{staticClass:"uploader-w-8 uploader-h-8",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])]),_vm._v(" "),_c('div',{staticClass:"uploader-h-full uploader-flex uploader-items-center"},[(_vm.preview && _vm.preview.mime_type.includes('image'))?_c('img',{staticClass:"uploader-object-contain uploader-w-full uploader-p-1 uploader-h-full",attrs:{"src":_vm.preview.url,"alt":"preview"}}):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('audio'))?_c('audio',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-48",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the audio tag.\n ")]):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('video'))?_c('video',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-full",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the video tag.\n ")]):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"uploader-bg-white uploader-flex uploader-items-center uploader-justify-start uploader-overflow-auto uploader-py-2 uploader-w-full uploader-mt-1 uploader-border uploader-border-gray-600 uploader-rounded-b-lg uploader-shadow-2xl"},_vm._l((_vm.files),function(file){return _c('img',{staticClass:"uploader-cursor-pointer hover:uploader-border-gray-600 uploader-object-cover uploader-bg-white uploader-mx-2 uploader-w-20 uploader-h-20 uploader-border uploader-border-gray-400",attrs:{"src":file.preview},on:{"mouseover":function($event){_vm.preview = file;}}})}),0)])]):_vm._e()])}; 709 | var __vue_staticRenderFns__$1 = []; 710 | 711 | /* style */ 712 | var __vue_inject_styles__$1 = function (inject) { 713 | if (!inject) { return } 714 | inject("data-v-37984376_0", { source: "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html[data-v-37984376]{line-height:1.15;-webkit-text-size-adjust:100%}body[data-v-37984376]{margin:0}main[data-v-37984376]{display:block}h1[data-v-37984376]{font-size:2em;margin:.67em 0}hr[data-v-37984376]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-37984376]{font-family:monospace,monospace;font-size:1em}a[data-v-37984376]{background-color:transparent}abbr[title][data-v-37984376]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-37984376],strong[data-v-37984376]{font-weight:bolder}code[data-v-37984376],kbd[data-v-37984376],samp[data-v-37984376]{font-family:monospace,monospace;font-size:1em}small[data-v-37984376]{font-size:80%}sub[data-v-37984376],sup[data-v-37984376]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-37984376]{bottom:-.25em}sup[data-v-37984376]{top:-.5em}img[data-v-37984376]{border-style:none}button[data-v-37984376],input[data-v-37984376],optgroup[data-v-37984376],select[data-v-37984376],textarea[data-v-37984376]{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button[data-v-37984376],input[data-v-37984376]{overflow:visible}button[data-v-37984376],select[data-v-37984376]{text-transform:none}[type=button][data-v-37984376],[type=submit][data-v-37984376],button[data-v-37984376]{-webkit-appearance:button}[type=button][data-v-37984376]::-moz-focus-inner,[type=submit][data-v-37984376]::-moz-focus-inner,button[data-v-37984376]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-37984376]:-moz-focusring,[type=submit][data-v-37984376]:-moz-focusring,button[data-v-37984376]:-moz-focusring{outline:1px dotted ButtonText}fieldset[data-v-37984376]{padding:.35em .75em .625em}legend[data-v-37984376]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-37984376]{vertical-align:baseline}textarea[data-v-37984376]{overflow:auto}details[data-v-37984376]{display:block}summary[data-v-37984376]{display:list-item}template[data-v-37984376]{display:none}[hidden][data-v-37984376]{display:none}blockquote[data-v-37984376],dd[data-v-37984376],dl[data-v-37984376],figure[data-v-37984376],h1[data-v-37984376],h2[data-v-37984376],h3[data-v-37984376],h4[data-v-37984376],h5[data-v-37984376],h6[data-v-37984376],hr[data-v-37984376],p[data-v-37984376],pre[data-v-37984376]{margin:0}button[data-v-37984376]{background-color:transparent;background-image:none}button[data-v-37984376]:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset[data-v-37984376]{margin:0;padding:0}ol[data-v-37984376],ul[data-v-37984376]{list-style:none;margin:0;padding:0}html[data-v-37984376]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";line-height:1.5}*[data-v-37984376],[data-v-37984376]::after,[data-v-37984376]::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr[data-v-37984376]{border-top-width:1px}img[data-v-37984376]{border-style:solid}textarea[data-v-37984376]{resize:vertical}input[data-v-37984376]::-moz-placeholder,textarea[data-v-37984376]::-moz-placeholder{color:#a0aec0}input[data-v-37984376]:-ms-input-placeholder,textarea[data-v-37984376]:-ms-input-placeholder{color:#a0aec0}input[data-v-37984376]::placeholder,textarea[data-v-37984376]::placeholder{color:#a0aec0}button[data-v-37984376]{cursor:pointer}table[data-v-37984376]{border-collapse:collapse}h1[data-v-37984376],h2[data-v-37984376],h3[data-v-37984376],h4[data-v-37984376],h5[data-v-37984376],h6[data-v-37984376]{font-size:inherit;font-weight:inherit}a[data-v-37984376]{color:inherit;text-decoration:inherit}button[data-v-37984376],input[data-v-37984376],optgroup[data-v-37984376],select[data-v-37984376],textarea[data-v-37984376]{padding:0;line-height:inherit;color:inherit}code[data-v-37984376],kbd[data-v-37984376],pre[data-v-37984376],samp[data-v-37984376]{font-family:Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}audio[data-v-37984376],canvas[data-v-37984376],embed[data-v-37984376],iframe[data-v-37984376],img[data-v-37984376],object[data-v-37984376],svg[data-v-37984376],video[data-v-37984376]{display:block;vertical-align:middle}img[data-v-37984376],video[data-v-37984376]{max-width:100%;height:auto}.uploader-bg-black[data-v-37984376]{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.uploader-bg-white[data-v-37984376]{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.uploader-bg-gray-600[data-v-37984376]{--bg-opacity:1;background-color:#718096;background-color:rgba(113,128,150,var(--bg-opacity))}.uploader-bg-gray-900[data-v-37984376]{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.uploader-bg-red-600[data-v-37984376]{--bg-opacity:1;background-color:#e53e3e;background-color:rgba(229,62,62,var(--bg-opacity))}.uploader-bg-green-600[data-v-37984376]{--bg-opacity:1;background-color:#38a169;background-color:rgba(56,161,105,var(--bg-opacity))}.hover\\:uploader-bg-gray-100[data-v-37984376]:hover{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.hover\\:uploader-bg-gray-800[data-v-37984376]:hover{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.uploader-bg-opacity-50[data-v-37984376]{--bg-opacity:0.5}.uploader-border-gray-400[data-v-37984376]{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.uploader-border-gray-500[data-v-37984376]{--border-opacity:1;border-color:#a0aec0;border-color:rgba(160,174,192,var(--border-opacity))}.uploader-border-gray-600[data-v-37984376]{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.hover\\:uploader-border-gray-600[data-v-37984376]:hover{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.uploader-rounded-md[data-v-37984376]{border-radius:.375rem}.uploader-rounded-xl[data-v-37984376]{border-radius:.75rem}.uploader-rounded-t-lg[data-v-37984376]{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.uploader-rounded-b-lg[data-v-37984376]{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.uploader-border-dashed[data-v-37984376]{border-style:dashed}.uploader-border-2[data-v-37984376]{border-width:2px}.uploader-border[data-v-37984376]{border-width:1px}.uploader-cursor-pointer[data-v-37984376]{cursor:pointer}.uploader-inline[data-v-37984376]{display:inline}.uploader-flex[data-v-37984376]{display:flex}.uploader-hidden[data-v-37984376]{display:none}.uploader-flex-wrap[data-v-37984376]{flex-wrap:wrap}.uploader-items-center[data-v-37984376]{align-items:center}.uploader-justify-start[data-v-37984376]{justify-content:flex-start}.uploader-justify-center[data-v-37984376]{justify-content:center}.uploader-font-sans[data-v-37984376]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"}.uploader-h-5[data-v-37984376]{height:1.25rem}.uploader-h-6[data-v-37984376]{height:1.5rem}.uploader-h-8[data-v-37984376]{height:2rem}.uploader-h-12[data-v-37984376]{height:3rem}.uploader-h-20[data-v-37984376]{height:5rem}.uploader-h-32[data-v-37984376]{height:8rem}.uploader-h-48[data-v-37984376]{height:12rem}.uploader-h-full[data-v-37984376]{height:100%}.uploader-h-300-px[data-v-37984376]{height:300px}.uploader-text-sm[data-v-37984376]{font-size:.875rem}.uploader-m-2[data-v-37984376]{margin:.5rem}.uploader-mx-2[data-v-37984376]{margin-left:.5rem;margin-right:.5rem}.uploader-mt-1[data-v-37984376]{margin-top:.25rem}.uploader-mb-4[data-v-37984376]{margin-bottom:1rem}.uploader-mt-10[data-v-37984376]{margin-top:2.5rem}.uploader-object-contain[data-v-37984376]{-o-object-fit:contain;object-fit:contain}.uploader-object-cover[data-v-37984376]{-o-object-fit:cover;object-fit:cover}.uploader-opacity-50[data-v-37984376]{opacity:.5}.uploader-opacity-75[data-v-37984376]{opacity:.75}.focus\\:uploader-outline-none[data-v-37984376]:focus{outline:2px solid transparent;outline-offset:2px}.uploader-overflow-auto[data-v-37984376]{overflow:auto}.uploader-overflow-hidden[data-v-37984376]{overflow:hidden}.uploader-p-1[data-v-37984376]{padding:.25rem}.uploader-p-8[data-v-37984376]{padding:2rem}.uploader-py-2[data-v-37984376]{padding-top:.5rem;padding-bottom:.5rem}.uploader-fixed[data-v-37984376]{position:fixed}.uploader-absolute[data-v-37984376]{position:absolute}.uploader-relative[data-v-37984376]{position:relative}.uploader-top-0[data-v-37984376]{top:0}.uploader-right-0[data-v-37984376]{right:0}.uploader-bottom-0[data-v-37984376]{bottom:0}.uploader-left-0[data-v-37984376]{left:0}.uploader-top-10[data-v-37984376]{top:10px}.uploader-right-10[data-v-37984376]{right:10px}.uploader-shadow-md[data-v-37984376]{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.uploader-shadow-2xl[data-v-37984376]{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.uploader-text-white[data-v-37984376]{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.uploader-text-gray-500[data-v-37984376]{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.uploader-text-gray-600[data-v-37984376]{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.uploader-text-red-600[data-v-37984376]{--text-opacity:1;color:#e53e3e;color:rgba(229,62,62,var(--text-opacity))}.uploader-w-5[data-v-37984376]{width:1.25rem}.uploader-w-6[data-v-37984376]{width:1.5rem}.uploader-w-8[data-v-37984376]{width:2rem}.uploader-w-12[data-v-37984376]{width:3rem}.uploader-w-20[data-v-37984376]{width:5rem}.uploader-w-32[data-v-37984376]{width:8rem}.uploader-w-full[data-v-37984376]{width:100%}.uploader-z-999999999[data-v-37984376]{z-index:999999999}@-webkit-keyframes spin-data-v-37984376{to{transform:rotate(360deg)}}@keyframes spin-data-v-37984376{to{transform:rotate(360deg)}}@-webkit-keyframes ping-data-v-37984376{100%,75%{transform:scale(2);opacity:0}}@keyframes ping-data-v-37984376{100%,75%{transform:scale(2);opacity:0}}@-webkit-keyframes pulse-data-v-37984376{50%{opacity:.5}}@keyframes pulse-data-v-37984376{50%{opacity:.5}}@-webkit-keyframes bounce-data-v-37984376{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce-data-v-37984376{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.uploader-animate-spin[data-v-37984376]{-webkit-animation:spin-data-v-37984376 1s linear infinite;animation:spin-data-v-37984376 1s linear infinite}@media (min-width:768px){.md\\:uploader-w-1\\/2[data-v-37984376]{width:50%}}", map: undefined, media: undefined }); 715 | 716 | }; 717 | /* scoped */ 718 | var __vue_scope_id__$1 = "data-v-37984376"; 719 | /* module identifier */ 720 | var __vue_module_identifier__$1 = undefined; 721 | /* functional template */ 722 | var __vue_is_functional_template__$1 = false; 723 | /* style inject SSR */ 724 | 725 | 726 | 727 | var preview = normalizeComponent_1( 728 | { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, 729 | __vue_inject_styles__$1, 730 | __vue_script__$1, 731 | __vue_scope_id__$1, 732 | __vue_is_functional_template__$1, 733 | __vue_module_identifier__$1, 734 | browser, 735 | undefined 736 | ); 737 | 738 | function install(Vue) { 739 | if (install.installed) { return; } 740 | install.installed = true; 741 | Vue.component("file-uploader", component); 742 | Vue.component("file-preview", preview); 743 | } 744 | 745 | var plugin = { 746 | install: install 747 | }; 748 | 749 | var GlobalVue = null; 750 | if (typeof window !== "undefined") { 751 | GlobalVue = window.Vue; 752 | } else if (typeof global !== "undefined") { 753 | GlobalVue = global.vue; 754 | } 755 | 756 | if (GlobalVue) { 757 | GlobalVue.use(plugin); 758 | } 759 | 760 | component.install = install; 761 | 762 | export default component; 763 | -------------------------------------------------------------------------------- /dist/file-uploader.min.js: -------------------------------------------------------------------------------- 1 | (function (exports) { 2 | 'use strict'; 3 | 4 | // 5 | // 6 | // 7 | // 8 | // 9 | // 10 | // 11 | // 12 | // 13 | // 14 | // 15 | // 16 | // 17 | // 18 | // 19 | // 20 | // 21 | // 22 | // 23 | // 24 | // 25 | // 26 | // 27 | // 28 | // 29 | // 30 | // 31 | // 32 | // 33 | // 34 | // 35 | // 36 | // 37 | // 38 | // 39 | // 40 | // 41 | // 42 | // 43 | // 44 | // 45 | // 46 | // 47 | // 48 | // 49 | // 50 | // 51 | // 52 | // 53 | // 54 | // 55 | // 56 | // 57 | // 58 | // 59 | // 60 | // 61 | // 62 | // 63 | // 64 | // 65 | // 66 | // 67 | // 68 | // 69 | // 70 | // 71 | // 72 | // 73 | // 74 | // 75 | // 76 | // 77 | // 78 | // 79 | // 80 | // 81 | // 82 | // 83 | // 84 | // 85 | // 86 | // 87 | // 88 | // 89 | // 90 | // 91 | // 92 | // 93 | // 94 | // 95 | // 96 | // 97 | // 98 | // 99 | // 100 | // 101 | // 102 | // 103 | // 104 | // 105 | // 106 | // 107 | // 108 | // 109 | // 110 | // 111 | // 112 | // 113 | // 114 | // 115 | // 116 | // 117 | // 118 | // 119 | // 120 | // 121 | // 122 | // 123 | // 124 | // 125 | // 126 | // 127 | // 128 | // 129 | // 130 | // 131 | // 132 | // 133 | // 134 | // 135 | // 136 | // 137 | // 138 | // 139 | // 140 | // 141 | // 142 | // 143 | // 144 | // 145 | // 146 | // 147 | 148 | var script = { 149 | props: { 150 | max: { 151 | default: 1 152 | }, 153 | unlimited: { 154 | default: false 155 | }, 156 | media: { 157 | required: false, 158 | type: Array, 159 | default: function () { return []; } 160 | }, 161 | accept: { 162 | required: false, 163 | type: String, 164 | default: '*', 165 | }, 166 | notes: { 167 | required: false, 168 | type: String, 169 | default: '', 170 | }, 171 | label: { 172 | required: false, 173 | type: String, 174 | default: '', 175 | }, 176 | collection: { 177 | required: false, 178 | type: String, 179 | default: 'default', 180 | }, 181 | maxWidth: { 182 | required: false, 183 | default: '800', 184 | }, 185 | maxHeight: { 186 | required: false, 187 | default: '800', 188 | }, 189 | value: { 190 | required: false, 191 | type: Object / Array, 192 | default: function () { return []; }, 193 | }, 194 | tokens: { 195 | required: false, 196 | type: Object / Array, 197 | default: function () { return []; }, 198 | }, 199 | form: { 200 | required: false, 201 | default: false 202 | }, 203 | displayValidationMessages: { 204 | required: false, 205 | default: false 206 | }, 207 | name: { 208 | required: false, 209 | type: String, 210 | default: 'media' 211 | } 212 | }, 213 | data: function data() { 214 | return { 215 | files: this.media || [], 216 | values: this.tokens, 217 | inputFilesLength: 0, 218 | pending: -1, 219 | uploading: false, 220 | preview: null, 221 | maximum: this.max, 222 | errors: [], 223 | } 224 | }, 225 | created: function created() { 226 | var this$1 = this; 227 | 228 | var handleEscape = function (e) { 229 | if (e.key === 'Esc' || e.key === 'Escape') { 230 | this$1.preview = null; 231 | } 232 | }; 233 | document.addEventListener('keydown', handleEscape); 234 | 235 | if (this.unlimited) { 236 | this.maximum = 0; 237 | } 238 | if (this.value.length) { 239 | var xhr = new XMLHttpRequest(); 240 | var vueInstance = this; 241 | var params = Object.keys(this.value).map(function (key) { 242 | return 'tokens[]=' + this$1.value[key] 243 | }).join('&'); 244 | xhr.onreadystatechange = function () { 245 | if (this.readyState === 4) { 246 | if (this.status === 200) { 247 | if (this.responseText) { 248 | vueInstance.files = JSON.parse(this.responseText).data; 249 | } 250 | } 251 | } 252 | }; 253 | xhr.open("GET", '/api/uploader/media?collection=' + this.collection + '&' + params, true); 254 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 255 | var token = document.head.querySelector('meta[name="csrf-token"]'); 256 | if (token) { 257 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 258 | } else { 259 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 260 | } 261 | xhr.send(null); 262 | } 263 | }, 264 | methods: { 265 | readUrl: async function readUrl(event) { 266 | var this$1 = this; 267 | 268 | var input = event.target; 269 | if (input.files) { 270 | var fileList = input.files; 271 | var filesCount = fileList.length > this.maximum - this.files.length 272 | ? this.maximum - this.files.length : fileList.length; 273 | this.inputFilesLength = filesCount; 274 | if (!this.unlimited) { 275 | this.pending = filesCount; 276 | } else { 277 | filesCount = fileList.length; 278 | } 279 | if (filesCount > 0) { 280 | this.uploading = true; 281 | } 282 | 283 | for (var i = 0; i < filesCount; i++) { 284 | await this.upload(fileList[i]) 285 | .then(function (response) { 286 | if (!this$1.unlimited) { 287 | this$1.pending--; 288 | } 289 | this$1.uploading = false; 290 | var file = response.data; 291 | this$1.files.push(file[0]); 292 | this$1.values.push(response.token); 293 | this$1.$emit('input', this$1.values); 294 | this$1.complete(); 295 | }) 296 | .catch(function (error) { 297 | if (!this$1.unlimited) { 298 | this$1.pending--; 299 | } 300 | this$1.uploading = false; 301 | 302 | if (error.status === 422) { 303 | this$1.errors.push({ 304 | message: error.response.errors.file[0], 305 | filename: error.file.name 306 | }); 307 | } 308 | 309 | this$1.$emit('upload-error', error); 310 | this$1.complete(); 311 | }); 312 | } 313 | } 314 | }, 315 | resizeImage: function resizeImage(base64Str) { 316 | var this$1 = this; 317 | 318 | return new Promise(function (resolve) { 319 | 320 | var img = new Image(); 321 | img.src = base64Str; 322 | return img.onload = function () { 323 | var canvas = document.createElement('canvas'); 324 | var MAX_WIDTH = this$1.maxWidth; 325 | var MAX_HEIGHT = this$1.maxHeight; 326 | var width = img.width; 327 | var height = img.height; 328 | 329 | if (width > height) { 330 | if (width > MAX_WIDTH) { 331 | height *= MAX_WIDTH / width; 332 | width = MAX_WIDTH; 333 | } 334 | } else { 335 | if (height > MAX_HEIGHT) { 336 | width *= MAX_HEIGHT / height; 337 | height = MAX_HEIGHT; 338 | } 339 | } 340 | canvas.width = width; 341 | canvas.height = height; 342 | var ctx = canvas.getContext('2d'); 343 | ctx.drawImage(img, 0, 0, width, height); 344 | resolve(canvas.toDataURL()); 345 | } 346 | 347 | }) 348 | }, 349 | upload: function upload(file) { 350 | var this$1 = this; 351 | 352 | return new Promise(function (resolve, reject) { 353 | this$1.beforeUploading(); 354 | var formData = new FormData(); 355 | 356 | if (file.type.includes('image')) { 357 | 358 | var reader = new FileReader(); 359 | 360 | var resize = async function () { 361 | var image = await this$1.resizeImage(reader.result); 362 | 363 | formData.append('file', image); 364 | }; 365 | 366 | 367 | reader.addEventListener("load", resize, false); 368 | 369 | 370 | if (file) { 371 | reader.readAsDataURL(file); 372 | } 373 | 374 | } else { 375 | formData.append('file', file); 376 | } 377 | // TODO: refactor 378 | setTimeout(function () { 379 | formData.append('collection', this$1.collection); 380 | var xhr = new XMLHttpRequest(); 381 | xhr.onreadystatechange = function () { 382 | if (this.readyState === 4) { 383 | if (this.status === 200) { 384 | if (this.responseText) { 385 | resolve(JSON.parse(this.responseText)); 386 | } 387 | } else { 388 | if (this.responseText) { 389 | reject({ 390 | response: JSON.parse(this.responseText), 391 | status: this.status, 392 | file: file 393 | }); 394 | } 395 | } 396 | } 397 | }; 398 | xhr.open("POST", '/api/uploader/media/upload', true); 399 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 400 | var token = document.head.querySelector('meta[name="csrf-token"]'); 401 | if (token) { 402 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 403 | } else { 404 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 405 | } 406 | xhr.send(formData); 407 | }, 1000); 408 | }); 409 | }, 410 | deleteFile: function deleteFile(file) { 411 | if (file.data) { 412 | return; 413 | } 414 | var xhr = new XMLHttpRequest(); 415 | xhr.open("DELETE", file.links.delete.href, true); 416 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 417 | var token = document.head.querySelector('meta[name="csrf-token"]'); 418 | if (token) { 419 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 420 | } else { 421 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 422 | } 423 | xhr.send(); 424 | this.$delete(this.files, this.files.indexOf(file)); 425 | this.$delete(this.values, this.files.indexOf(file)); 426 | this.inputFilesLength--; 427 | this.complete(); 428 | }, 429 | beforeUploading: function beforeUploading() { 430 | var input = document.querySelector('[type=submit]'); 431 | if (input) { 432 | input.setAttribute('disabled', true); 433 | } 434 | this.$emit('beforeUpload'); 435 | }, 436 | complete: function complete() { 437 | if (this.values.length >= this.inputFilesLength) { 438 | var input = document.querySelector('[type=submit]'); 439 | if (input) { 440 | input.removeAttribute('disabled'); 441 | } 442 | 443 | this.$emit('complete'); 444 | } 445 | } 446 | } 447 | }; 448 | 449 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 450 | /* server only */ 451 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 452 | if (typeof shadowMode !== 'boolean') { 453 | createInjectorSSR = createInjector; 454 | createInjector = shadowMode; 455 | shadowMode = false; 456 | } // Vue.extend constructor export interop. 457 | 458 | 459 | var options = typeof script === 'function' ? script.options : script; // render functions 460 | 461 | if (template && template.render) { 462 | options.render = template.render; 463 | options.staticRenderFns = template.staticRenderFns; 464 | options._compiled = true; // functional template 465 | 466 | if (isFunctionalTemplate) { 467 | options.functional = true; 468 | } 469 | } // scopedId 470 | 471 | 472 | if (scopeId) { 473 | options._scopeId = scopeId; 474 | } 475 | 476 | var hook; 477 | 478 | if (moduleIdentifier) { 479 | // server build 480 | hook = function hook(context) { 481 | // 2.3 injection 482 | context = context || // cached call 483 | this.$vnode && this.$vnode.ssrContext || // stateful 484 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 485 | // 2.2 with runInNewContext: true 486 | 487 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 488 | context = __VUE_SSR_CONTEXT__; 489 | } // inject component styles 490 | 491 | 492 | if (style) { 493 | style.call(this, createInjectorSSR(context)); 494 | } // register component module identifier for async chunk inference 495 | 496 | 497 | if (context && context._registeredComponents) { 498 | context._registeredComponents.add(moduleIdentifier); 499 | } 500 | }; // used by ssr in case component is cached and beforeCreate 501 | // never gets called 502 | 503 | 504 | options._ssrRegister = hook; 505 | } else if (style) { 506 | hook = shadowMode ? function () { 507 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 508 | } : function (context) { 509 | style.call(this, createInjector(context)); 510 | }; 511 | } 512 | 513 | if (hook) { 514 | if (options.functional) { 515 | // register for functional component in vue file 516 | var originalRender = options.render; 517 | 518 | options.render = function renderWithStyleInjection(h, context) { 519 | hook.call(context); 520 | return originalRender(h, context); 521 | }; 522 | } else { 523 | // inject component registration as beforeCreate hook 524 | var existing = options.beforeCreate; 525 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 526 | } 527 | } 528 | 529 | return script; 530 | } 531 | 532 | var normalizeComponent_1 = normalizeComponent; 533 | 534 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); 535 | function createInjector(context) { 536 | return function (id, style) { 537 | return addStyle(id, style); 538 | }; 539 | } 540 | var HEAD = document.head || document.getElementsByTagName('head')[0]; 541 | var styles = {}; 542 | 543 | function addStyle(id, css) { 544 | var group = isOldIE ? css.media || 'default' : id; 545 | var style = styles[group] || (styles[group] = { 546 | ids: new Set(), 547 | styles: [] 548 | }); 549 | 550 | if (!style.ids.has(id)) { 551 | style.ids.add(id); 552 | var code = css.source; 553 | 554 | if (css.map) { 555 | // https://developer.chrome.com/devtools/docs/javascript-debugging 556 | // this makes source maps inside style tags work properly in Chrome 557 | code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 558 | 559 | code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; 560 | } 561 | 562 | if (!style.element) { 563 | style.element = document.createElement('style'); 564 | style.element.type = 'text/css'; 565 | if (css.media) { style.element.setAttribute('media', css.media); } 566 | HEAD.appendChild(style.element); 567 | } 568 | 569 | if ('styleSheet' in style.element) { 570 | style.styles.push(code); 571 | style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); 572 | } else { 573 | var index = style.ids.size - 1; 574 | var textNode = document.createTextNode(code); 575 | var nodes = style.element.childNodes; 576 | if (nodes[index]) { style.element.removeChild(nodes[index]); } 577 | if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); } 578 | } 579 | } 580 | } 581 | 582 | var browser = createInjector; 583 | 584 | /* script */ 585 | var __vue_script__ = script; 586 | 587 | /* template */ 588 | var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"uploader-mb-4"},[_c('label',[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_c('div',{staticClass:"uploader-flex uploader-flex-wrap"},[_vm._l((_vm.files),function(file){return _c('div',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-md uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none",attrs:{"title":file.file_name}},[_c('img',{staticClass:"uploader-absolute uploader-w-full uploader-h-full uploader-object-contain",attrs:{"src":file.preview,"alt":"preview"}}),_vm._v(" "),_c('a',{staticClass:"uploader-absolute uploader-bg-red-600 uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-0 uploader-right-0 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",attrs:{"href":"#","title":"Delete"},on:{"click":function($event){$event.preventDefault();return _vm.deleteFile(file)}}},[_c('svg',{staticClass:"uploader-w-5 uploader-h-5",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"}})])]),_vm._v(" "),_c('a',{staticClass:"uploader-absolute uploader-bg-green-600 uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-0 uploader-left-0 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",attrs:{"href":"#","title":"Show"},on:{"click":function($event){$event.preventDefault();_vm.preview = file;}}},[_c('svg',{staticClass:"uploader-w-5 uploader-h-5",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"}})])]),_vm._v(" "),_c('span',{staticClass:"uploader-font-sans uploader-absolute uploader-w-full uploader-flex uploader-justify-center uploader-bg-gray-900 uploader-text-white uploader-text-sm uploader-bottom-0"},[_vm._v("\n "+_vm._s(file.human_readable_size)+"\n ")])])}),_vm._v(" "),_vm._l(((_vm.maximum - _vm.files.length < 0 ? 0 : _vm.maximum - _vm.files.length)),function(i){return (!_vm.unlimited)?_c('label',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-xl uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none hover:uploader-bg-gray-100 uploader-cursor-pointer"},[_c('input',{ref:"file",refInFor:true,staticClass:"uploader-hidden",attrs:{"type":"file","accept":_vm.accept,"multiple":_vm.maximum > 1},on:{"change":_vm.readUrl}}),_vm._v(" "),(i <= _vm.pending)?_c('svg',{staticClass:"uploader-animate-spin uploader-h-8 uploader-w-8 uploader-text-gray-500",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24"}},[_c('circle',{staticClass:"uploader-opacity-50",attrs:{"cx":"12","cy":"12","r":"10","stroke":"currentColor","stroke-width":"4"}}),_vm._v(" "),_c('path',{staticClass:"uploader-opacity-75",attrs:{"fill":"currentColor","d":"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}})]):_c('svg',{staticClass:"uploader-w-12 uploader-h-12",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}})])]):_vm._e()}),_vm._v(" "),(_vm.unlimited)?_c('label',{staticClass:"uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-xl uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none hover:uploader-bg-gray-100 uploader-cursor-pointer"},[_c('input',{ref:"file",staticClass:"uploader-hidden",attrs:{"type":"file","accept":_vm.accept,"multiple":true},on:{"change":_vm.readUrl}}),_vm._v(" "),(_vm.uploading)?_c('svg',{staticClass:"uploader-animate-spin uploader-h-8 uploader-w-8 uploader-text-gray-500",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24"}},[_c('circle',{staticClass:"uploader-opacity-50",attrs:{"cx":"12","cy":"12","r":"10","stroke":"currentColor","stroke-width":"4"}}),_vm._v(" "),_c('path',{staticClass:"uploader-opacity-75",attrs:{"fill":"currentColor","d":"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}})]):_c('svg',{staticClass:"uploader-w-12 uploader-h-12",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}})])]):_vm._e()],2),_vm._v(" "),_vm._l((_vm.values),function(token){return _c('input',{attrs:{"type":"hidden","form":_vm.form,"name":(((_vm.name)) + "[]")},domProps:{"value":token}})}),_vm._v(" "),(_vm.errors.length === 0)?_c('small',{staticClass:"uploader-text-gray-600"},[_vm._v(_vm._s(_vm.notes))]):_vm._e(),_vm._v(" "),_vm._l((_vm.errors),function(error){return (_vm.errors.length && _vm.displayValidationMessages)?_c('p',{staticClass:"uploader-flex uploader-items-center uploader-text-red-600"},[_c('svg',{staticClass:"uploader-w-5 uploader-w-5 uploader-inline uploader-mx-2",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}})]),_vm._v("\n "+_vm._s(error.message)+" ("),_c('u',{staticClass:"uploader-cursor-pointer"},[_vm._v(_vm._s(error.filename))]),_vm._v(")\n ")]):_vm._e()}),_vm._v(" "),(_vm.preview)?_c('div',{staticClass:"uploader-overflow-auto uploader-fixed uploader-flex uploader-justify-center uploader-w-full uploader-h-full uploader-top-0 uploader-left-0 uploader-bg-black uploader-bg-opacity-50 uploader-z-999999999",on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.preview = null;}}},[_c('div',{staticClass:"uploader-w-full md:uploader-w-1/2 uploader-mx-2 uploader-rounded-t-lg uploader-shadow-md uploader-mt-10 uploader-bg-white uploader-h-300-px uploader-relative uploader-border uploader-border-gray-600"},[_c('button',{staticClass:"uploader-bg-gray-600 hover:uploader-bg-gray-800 uploader-shadow-md uploader-absolute uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-10 uploader-right-10 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",on:{"click":function($event){$event.preventDefault();_vm.preview = null;}}},[_c('svg',{staticClass:"uploader-w-8 uploader-h-8",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])]),_vm._v(" "),_c('div',{staticClass:"uploader-h-full uploader-flex uploader-items-center"},[(_vm.preview && _vm.preview.mime_type.includes('image'))?_c('img',{staticClass:"uploader-object-contain uploader-w-full uploader-p-1 uploader-h-full",attrs:{"src":_vm.preview.url,"alt":"preview"}}):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('audio'))?_c('audio',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-48",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the audio tag.\n ")]):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('video'))?_c('video',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-full",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the video tag.\n ")]):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"uploader-bg-white uploader-flex uploader-items-center uploader-justify-start uploader-overflow-auto uploader-py-2 uploader-w-full uploader-mt-1 uploader-border uploader-border-gray-600 uploader-rounded-b-lg uploader-shadow-2xl"},_vm._l((_vm.files),function(file){return _c('img',{staticClass:"uploader-cursor-pointer hover:uploader-border-gray-600 uploader-object-cover uploader-bg-white uploader-mx-2 uploader-w-20 uploader-h-20 uploader-border uploader-border-gray-400",attrs:{"src":file.preview},on:{"mouseover":function($event){_vm.preview = file;}}})}),0)])]):_vm._e()],2)}; 589 | var __vue_staticRenderFns__ = []; 590 | 591 | /* style */ 592 | var __vue_inject_styles__ = function (inject) { 593 | if (!inject) { return } 594 | inject("data-v-597f7c1e_0", { source: "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html[data-v-597f7c1e]{line-height:1.15;-webkit-text-size-adjust:100%}body[data-v-597f7c1e]{margin:0}main[data-v-597f7c1e]{display:block}h1[data-v-597f7c1e]{font-size:2em;margin:.67em 0}hr[data-v-597f7c1e]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-597f7c1e]{font-family:monospace,monospace;font-size:1em}a[data-v-597f7c1e]{background-color:transparent}abbr[title][data-v-597f7c1e]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-597f7c1e],strong[data-v-597f7c1e]{font-weight:bolder}code[data-v-597f7c1e],kbd[data-v-597f7c1e],samp[data-v-597f7c1e]{font-family:monospace,monospace;font-size:1em}small[data-v-597f7c1e]{font-size:80%}sub[data-v-597f7c1e],sup[data-v-597f7c1e]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-597f7c1e]{bottom:-.25em}sup[data-v-597f7c1e]{top:-.5em}img[data-v-597f7c1e]{border-style:none}button[data-v-597f7c1e],input[data-v-597f7c1e],optgroup[data-v-597f7c1e],select[data-v-597f7c1e],textarea[data-v-597f7c1e]{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button[data-v-597f7c1e],input[data-v-597f7c1e]{overflow:visible}button[data-v-597f7c1e],select[data-v-597f7c1e]{text-transform:none}[type=button][data-v-597f7c1e],[type=submit][data-v-597f7c1e],button[data-v-597f7c1e]{-webkit-appearance:button}[type=button][data-v-597f7c1e]::-moz-focus-inner,[type=submit][data-v-597f7c1e]::-moz-focus-inner,button[data-v-597f7c1e]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-597f7c1e]:-moz-focusring,[type=submit][data-v-597f7c1e]:-moz-focusring,button[data-v-597f7c1e]:-moz-focusring{outline:1px dotted ButtonText}fieldset[data-v-597f7c1e]{padding:.35em .75em .625em}legend[data-v-597f7c1e]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-597f7c1e]{vertical-align:baseline}textarea[data-v-597f7c1e]{overflow:auto}details[data-v-597f7c1e]{display:block}summary[data-v-597f7c1e]{display:list-item}template[data-v-597f7c1e]{display:none}[hidden][data-v-597f7c1e]{display:none}blockquote[data-v-597f7c1e],dd[data-v-597f7c1e],dl[data-v-597f7c1e],figure[data-v-597f7c1e],h1[data-v-597f7c1e],h2[data-v-597f7c1e],h3[data-v-597f7c1e],h4[data-v-597f7c1e],h5[data-v-597f7c1e],h6[data-v-597f7c1e],hr[data-v-597f7c1e],p[data-v-597f7c1e],pre[data-v-597f7c1e]{margin:0}button[data-v-597f7c1e]{background-color:transparent;background-image:none}button[data-v-597f7c1e]:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset[data-v-597f7c1e]{margin:0;padding:0}ol[data-v-597f7c1e],ul[data-v-597f7c1e]{list-style:none;margin:0;padding:0}html[data-v-597f7c1e]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";line-height:1.5}*[data-v-597f7c1e],[data-v-597f7c1e]::after,[data-v-597f7c1e]::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr[data-v-597f7c1e]{border-top-width:1px}img[data-v-597f7c1e]{border-style:solid}textarea[data-v-597f7c1e]{resize:vertical}input[data-v-597f7c1e]::-moz-placeholder,textarea[data-v-597f7c1e]::-moz-placeholder{color:#a0aec0}input[data-v-597f7c1e]:-ms-input-placeholder,textarea[data-v-597f7c1e]:-ms-input-placeholder{color:#a0aec0}input[data-v-597f7c1e]::placeholder,textarea[data-v-597f7c1e]::placeholder{color:#a0aec0}button[data-v-597f7c1e]{cursor:pointer}table[data-v-597f7c1e]{border-collapse:collapse}h1[data-v-597f7c1e],h2[data-v-597f7c1e],h3[data-v-597f7c1e],h4[data-v-597f7c1e],h5[data-v-597f7c1e],h6[data-v-597f7c1e]{font-size:inherit;font-weight:inherit}a[data-v-597f7c1e]{color:inherit;text-decoration:inherit}button[data-v-597f7c1e],input[data-v-597f7c1e],optgroup[data-v-597f7c1e],select[data-v-597f7c1e],textarea[data-v-597f7c1e]{padding:0;line-height:inherit;color:inherit}code[data-v-597f7c1e],kbd[data-v-597f7c1e],pre[data-v-597f7c1e],samp[data-v-597f7c1e]{font-family:Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}audio[data-v-597f7c1e],canvas[data-v-597f7c1e],embed[data-v-597f7c1e],iframe[data-v-597f7c1e],img[data-v-597f7c1e],object[data-v-597f7c1e],svg[data-v-597f7c1e],video[data-v-597f7c1e]{display:block;vertical-align:middle}img[data-v-597f7c1e],video[data-v-597f7c1e]{max-width:100%;height:auto}.uploader-bg-black[data-v-597f7c1e]{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.uploader-bg-white[data-v-597f7c1e]{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.uploader-bg-gray-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#718096;background-color:rgba(113,128,150,var(--bg-opacity))}.uploader-bg-gray-900[data-v-597f7c1e]{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.uploader-bg-red-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#e53e3e;background-color:rgba(229,62,62,var(--bg-opacity))}.uploader-bg-green-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#38a169;background-color:rgba(56,161,105,var(--bg-opacity))}.hover\\:uploader-bg-gray-100[data-v-597f7c1e]:hover{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.hover\\:uploader-bg-gray-800[data-v-597f7c1e]:hover{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.uploader-bg-opacity-50[data-v-597f7c1e]{--bg-opacity:0.5}.uploader-border-gray-400[data-v-597f7c1e]{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.uploader-border-gray-500[data-v-597f7c1e]{--border-opacity:1;border-color:#a0aec0;border-color:rgba(160,174,192,var(--border-opacity))}.uploader-border-gray-600[data-v-597f7c1e]{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.hover\\:uploader-border-gray-600[data-v-597f7c1e]:hover{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.uploader-rounded-md[data-v-597f7c1e]{border-radius:.375rem}.uploader-rounded-xl[data-v-597f7c1e]{border-radius:.75rem}.uploader-rounded-t-lg[data-v-597f7c1e]{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.uploader-rounded-b-lg[data-v-597f7c1e]{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.uploader-border-dashed[data-v-597f7c1e]{border-style:dashed}.uploader-border-2[data-v-597f7c1e]{border-width:2px}.uploader-border[data-v-597f7c1e]{border-width:1px}.uploader-cursor-pointer[data-v-597f7c1e]{cursor:pointer}.uploader-inline[data-v-597f7c1e]{display:inline}.uploader-flex[data-v-597f7c1e]{display:flex}.uploader-hidden[data-v-597f7c1e]{display:none}.uploader-flex-wrap[data-v-597f7c1e]{flex-wrap:wrap}.uploader-items-center[data-v-597f7c1e]{align-items:center}.uploader-justify-start[data-v-597f7c1e]{justify-content:flex-start}.uploader-justify-center[data-v-597f7c1e]{justify-content:center}.uploader-font-sans[data-v-597f7c1e]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"}.uploader-h-5[data-v-597f7c1e]{height:1.25rem}.uploader-h-6[data-v-597f7c1e]{height:1.5rem}.uploader-h-8[data-v-597f7c1e]{height:2rem}.uploader-h-12[data-v-597f7c1e]{height:3rem}.uploader-h-20[data-v-597f7c1e]{height:5rem}.uploader-h-32[data-v-597f7c1e]{height:8rem}.uploader-h-48[data-v-597f7c1e]{height:12rem}.uploader-h-full[data-v-597f7c1e]{height:100%}.uploader-h-300-px[data-v-597f7c1e]{height:300px}.uploader-text-sm[data-v-597f7c1e]{font-size:.875rem}.uploader-m-2[data-v-597f7c1e]{margin:.5rem}.uploader-mx-2[data-v-597f7c1e]{margin-left:.5rem;margin-right:.5rem}.uploader-mt-1[data-v-597f7c1e]{margin-top:.25rem}.uploader-mb-4[data-v-597f7c1e]{margin-bottom:1rem}.uploader-mt-10[data-v-597f7c1e]{margin-top:2.5rem}.uploader-object-contain[data-v-597f7c1e]{-o-object-fit:contain;object-fit:contain}.uploader-object-cover[data-v-597f7c1e]{-o-object-fit:cover;object-fit:cover}.uploader-opacity-50[data-v-597f7c1e]{opacity:.5}.uploader-opacity-75[data-v-597f7c1e]{opacity:.75}.focus\\:uploader-outline-none[data-v-597f7c1e]:focus{outline:2px solid transparent;outline-offset:2px}.uploader-overflow-auto[data-v-597f7c1e]{overflow:auto}.uploader-overflow-hidden[data-v-597f7c1e]{overflow:hidden}.uploader-p-1[data-v-597f7c1e]{padding:.25rem}.uploader-p-8[data-v-597f7c1e]{padding:2rem}.uploader-py-2[data-v-597f7c1e]{padding-top:.5rem;padding-bottom:.5rem}.uploader-fixed[data-v-597f7c1e]{position:fixed}.uploader-absolute[data-v-597f7c1e]{position:absolute}.uploader-relative[data-v-597f7c1e]{position:relative}.uploader-top-0[data-v-597f7c1e]{top:0}.uploader-right-0[data-v-597f7c1e]{right:0}.uploader-bottom-0[data-v-597f7c1e]{bottom:0}.uploader-left-0[data-v-597f7c1e]{left:0}.uploader-top-10[data-v-597f7c1e]{top:10px}.uploader-right-10[data-v-597f7c1e]{right:10px}.uploader-shadow-md[data-v-597f7c1e]{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.uploader-shadow-2xl[data-v-597f7c1e]{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.uploader-text-white[data-v-597f7c1e]{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.uploader-text-gray-500[data-v-597f7c1e]{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.uploader-text-gray-600[data-v-597f7c1e]{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.uploader-text-red-600[data-v-597f7c1e]{--text-opacity:1;color:#e53e3e;color:rgba(229,62,62,var(--text-opacity))}.uploader-w-5[data-v-597f7c1e]{width:1.25rem}.uploader-w-6[data-v-597f7c1e]{width:1.5rem}.uploader-w-8[data-v-597f7c1e]{width:2rem}.uploader-w-12[data-v-597f7c1e]{width:3rem}.uploader-w-20[data-v-597f7c1e]{width:5rem}.uploader-w-32[data-v-597f7c1e]{width:8rem}.uploader-w-full[data-v-597f7c1e]{width:100%}.uploader-z-999999999[data-v-597f7c1e]{z-index:999999999}@-webkit-keyframes spin-data-v-597f7c1e{to{transform:rotate(360deg)}}@keyframes spin-data-v-597f7c1e{to{transform:rotate(360deg)}}@-webkit-keyframes ping-data-v-597f7c1e{100%,75%{transform:scale(2);opacity:0}}@keyframes ping-data-v-597f7c1e{100%,75%{transform:scale(2);opacity:0}}@-webkit-keyframes pulse-data-v-597f7c1e{50%{opacity:.5}}@keyframes pulse-data-v-597f7c1e{50%{opacity:.5}}@-webkit-keyframes bounce-data-v-597f7c1e{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce-data-v-597f7c1e{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.uploader-animate-spin[data-v-597f7c1e]{-webkit-animation:spin-data-v-597f7c1e 1s linear infinite;animation:spin-data-v-597f7c1e 1s linear infinite}@media (min-width:768px){.md\\:uploader-w-1\\/2[data-v-597f7c1e]{width:50%}}", map: undefined, media: undefined }); 595 | 596 | }; 597 | /* scoped */ 598 | var __vue_scope_id__ = "data-v-597f7c1e"; 599 | /* module identifier */ 600 | var __vue_module_identifier__ = undefined; 601 | /* functional template */ 602 | var __vue_is_functional_template__ = false; 603 | /* style inject SSR */ 604 | 605 | 606 | 607 | var component = normalizeComponent_1( 608 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 609 | __vue_inject_styles__, 610 | __vue_script__, 611 | __vue_scope_id__, 612 | __vue_is_functional_template__, 613 | __vue_module_identifier__, 614 | browser, 615 | undefined 616 | ); 617 | 618 | // 619 | // 620 | // 621 | // 622 | // 623 | // 624 | // 625 | // 626 | // 627 | // 628 | // 629 | // 630 | // 631 | // 632 | // 633 | // 634 | // 635 | // 636 | // 637 | // 638 | // 639 | // 640 | // 641 | // 642 | // 643 | // 644 | // 645 | // 646 | // 647 | // 648 | // 649 | // 650 | // 651 | // 652 | // 653 | // 654 | // 655 | // 656 | // 657 | // 658 | // 659 | // 660 | // 661 | // 662 | // 663 | // 664 | // 665 | // 666 | // 667 | // 668 | // 669 | // 670 | // 671 | // 672 | // 673 | // 674 | // 675 | // 676 | // 677 | // 678 | // 679 | 680 | var script$1 = { 681 | props: { 682 | media: { 683 | required: false, 684 | type: Array, 685 | default: function () { return []; } 686 | }, 687 | }, 688 | data: function data() { 689 | return { 690 | files: this.media || [], 691 | preview: null, 692 | } 693 | }, 694 | created: function created() { 695 | var this$1 = this; 696 | 697 | var handleEscape = function (e) { 698 | if (e.key === 'Esc' || e.key === 'Escape') { 699 | this$1.preview = null; 700 | } 701 | }; 702 | document.addEventListener('keydown', handleEscape); 703 | 704 | } 705 | }; 706 | 707 | /* script */ 708 | var __vue_script__$1 = script$1; 709 | 710 | /* template */ 711 | var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"uploader-mb-4"},[_c('div',{staticClass:"uploader-flex uploader-flex-wrap"},_vm._l((_vm.files),function(file){return _c('div',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-md uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none",attrs:{"title":file.file_name}},[_c('img',{staticClass:"uploader-absolute uploader-w-full uploader-h-full uploader-object-contain uploader-cursor-pointer",attrs:{"src":file.preview,"alt":"preview"},on:{"click":function($event){$event.preventDefault();_vm.preview = file;}}}),_vm._v(" "),_c('span',{staticClass:"uploader-font-sans uploader-absolute uploader-w-full uploader-flex uploader-justify-center uploader-bg-gray-900 uploader-text-white uploader-text-sm uploader-bottom-0"},[_vm._v("\n "+_vm._s(file.human_readable_size)+"\n ")])])}),0),_vm._v(" "),(_vm.preview)?_c('div',{staticClass:"uploader-overflow-auto uploader-fixed uploader-flex uploader-justify-center uploader-w-full uploader-h-full uploader-top-0 uploader-left-0 uploader-bg-black uploader-bg-opacity-50 uploader-z-999999999",on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.preview = null;}}},[_c('div',{staticClass:"uploader-w-full md:uploader-w-1/2 uploader-mx-2 uploader-rounded-t-lg uploader-shadow-md uploader-mt-10 uploader-bg-white uploader-h-300-px uploader-relative uploader-border uploader-border-gray-600"},[_c('button',{staticClass:"uploader-bg-gray-600 hover:uploader-bg-gray-800 uploader-shadow-md uploader-absolute uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-10 uploader-right-10 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",on:{"click":function($event){$event.preventDefault();_vm.preview = null;}}},[_c('svg',{staticClass:"uploader-w-8 uploader-h-8",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])]),_vm._v(" "),_c('div',{staticClass:"uploader-h-full uploader-flex uploader-items-center"},[(_vm.preview && _vm.preview.mime_type.includes('image'))?_c('img',{staticClass:"uploader-object-contain uploader-w-full uploader-p-1 uploader-h-full",attrs:{"src":_vm.preview.url,"alt":"preview"}}):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('audio'))?_c('audio',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-48",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the audio tag.\n ")]):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('video'))?_c('video',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-full",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the video tag.\n ")]):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"uploader-bg-white uploader-flex uploader-items-center uploader-justify-start uploader-overflow-auto uploader-py-2 uploader-w-full uploader-mt-1 uploader-border uploader-border-gray-600 uploader-rounded-b-lg uploader-shadow-2xl"},_vm._l((_vm.files),function(file){return _c('img',{staticClass:"uploader-cursor-pointer hover:uploader-border-gray-600 uploader-object-cover uploader-bg-white uploader-mx-2 uploader-w-20 uploader-h-20 uploader-border uploader-border-gray-400",attrs:{"src":file.preview},on:{"mouseover":function($event){_vm.preview = file;}}})}),0)])]):_vm._e()])}; 712 | var __vue_staticRenderFns__$1 = []; 713 | 714 | /* style */ 715 | var __vue_inject_styles__$1 = function (inject) { 716 | if (!inject) { return } 717 | inject("data-v-37984376_0", { source: "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html[data-v-37984376]{line-height:1.15;-webkit-text-size-adjust:100%}body[data-v-37984376]{margin:0}main[data-v-37984376]{display:block}h1[data-v-37984376]{font-size:2em;margin:.67em 0}hr[data-v-37984376]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-37984376]{font-family:monospace,monospace;font-size:1em}a[data-v-37984376]{background-color:transparent}abbr[title][data-v-37984376]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-37984376],strong[data-v-37984376]{font-weight:bolder}code[data-v-37984376],kbd[data-v-37984376],samp[data-v-37984376]{font-family:monospace,monospace;font-size:1em}small[data-v-37984376]{font-size:80%}sub[data-v-37984376],sup[data-v-37984376]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-37984376]{bottom:-.25em}sup[data-v-37984376]{top:-.5em}img[data-v-37984376]{border-style:none}button[data-v-37984376],input[data-v-37984376],optgroup[data-v-37984376],select[data-v-37984376],textarea[data-v-37984376]{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button[data-v-37984376],input[data-v-37984376]{overflow:visible}button[data-v-37984376],select[data-v-37984376]{text-transform:none}[type=button][data-v-37984376],[type=submit][data-v-37984376],button[data-v-37984376]{-webkit-appearance:button}[type=button][data-v-37984376]::-moz-focus-inner,[type=submit][data-v-37984376]::-moz-focus-inner,button[data-v-37984376]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-37984376]:-moz-focusring,[type=submit][data-v-37984376]:-moz-focusring,button[data-v-37984376]:-moz-focusring{outline:1px dotted ButtonText}fieldset[data-v-37984376]{padding:.35em .75em .625em}legend[data-v-37984376]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-37984376]{vertical-align:baseline}textarea[data-v-37984376]{overflow:auto}details[data-v-37984376]{display:block}summary[data-v-37984376]{display:list-item}template[data-v-37984376]{display:none}[hidden][data-v-37984376]{display:none}blockquote[data-v-37984376],dd[data-v-37984376],dl[data-v-37984376],figure[data-v-37984376],h1[data-v-37984376],h2[data-v-37984376],h3[data-v-37984376],h4[data-v-37984376],h5[data-v-37984376],h6[data-v-37984376],hr[data-v-37984376],p[data-v-37984376],pre[data-v-37984376]{margin:0}button[data-v-37984376]{background-color:transparent;background-image:none}button[data-v-37984376]:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset[data-v-37984376]{margin:0;padding:0}ol[data-v-37984376],ul[data-v-37984376]{list-style:none;margin:0;padding:0}html[data-v-37984376]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";line-height:1.5}*[data-v-37984376],[data-v-37984376]::after,[data-v-37984376]::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr[data-v-37984376]{border-top-width:1px}img[data-v-37984376]{border-style:solid}textarea[data-v-37984376]{resize:vertical}input[data-v-37984376]::-moz-placeholder,textarea[data-v-37984376]::-moz-placeholder{color:#a0aec0}input[data-v-37984376]:-ms-input-placeholder,textarea[data-v-37984376]:-ms-input-placeholder{color:#a0aec0}input[data-v-37984376]::placeholder,textarea[data-v-37984376]::placeholder{color:#a0aec0}button[data-v-37984376]{cursor:pointer}table[data-v-37984376]{border-collapse:collapse}h1[data-v-37984376],h2[data-v-37984376],h3[data-v-37984376],h4[data-v-37984376],h5[data-v-37984376],h6[data-v-37984376]{font-size:inherit;font-weight:inherit}a[data-v-37984376]{color:inherit;text-decoration:inherit}button[data-v-37984376],input[data-v-37984376],optgroup[data-v-37984376],select[data-v-37984376],textarea[data-v-37984376]{padding:0;line-height:inherit;color:inherit}code[data-v-37984376],kbd[data-v-37984376],pre[data-v-37984376],samp[data-v-37984376]{font-family:Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}audio[data-v-37984376],canvas[data-v-37984376],embed[data-v-37984376],iframe[data-v-37984376],img[data-v-37984376],object[data-v-37984376],svg[data-v-37984376],video[data-v-37984376]{display:block;vertical-align:middle}img[data-v-37984376],video[data-v-37984376]{max-width:100%;height:auto}.uploader-bg-black[data-v-37984376]{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.uploader-bg-white[data-v-37984376]{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.uploader-bg-gray-600[data-v-37984376]{--bg-opacity:1;background-color:#718096;background-color:rgba(113,128,150,var(--bg-opacity))}.uploader-bg-gray-900[data-v-37984376]{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.uploader-bg-red-600[data-v-37984376]{--bg-opacity:1;background-color:#e53e3e;background-color:rgba(229,62,62,var(--bg-opacity))}.uploader-bg-green-600[data-v-37984376]{--bg-opacity:1;background-color:#38a169;background-color:rgba(56,161,105,var(--bg-opacity))}.hover\\:uploader-bg-gray-100[data-v-37984376]:hover{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.hover\\:uploader-bg-gray-800[data-v-37984376]:hover{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.uploader-bg-opacity-50[data-v-37984376]{--bg-opacity:0.5}.uploader-border-gray-400[data-v-37984376]{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.uploader-border-gray-500[data-v-37984376]{--border-opacity:1;border-color:#a0aec0;border-color:rgba(160,174,192,var(--border-opacity))}.uploader-border-gray-600[data-v-37984376]{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.hover\\:uploader-border-gray-600[data-v-37984376]:hover{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.uploader-rounded-md[data-v-37984376]{border-radius:.375rem}.uploader-rounded-xl[data-v-37984376]{border-radius:.75rem}.uploader-rounded-t-lg[data-v-37984376]{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.uploader-rounded-b-lg[data-v-37984376]{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.uploader-border-dashed[data-v-37984376]{border-style:dashed}.uploader-border-2[data-v-37984376]{border-width:2px}.uploader-border[data-v-37984376]{border-width:1px}.uploader-cursor-pointer[data-v-37984376]{cursor:pointer}.uploader-inline[data-v-37984376]{display:inline}.uploader-flex[data-v-37984376]{display:flex}.uploader-hidden[data-v-37984376]{display:none}.uploader-flex-wrap[data-v-37984376]{flex-wrap:wrap}.uploader-items-center[data-v-37984376]{align-items:center}.uploader-justify-start[data-v-37984376]{justify-content:flex-start}.uploader-justify-center[data-v-37984376]{justify-content:center}.uploader-font-sans[data-v-37984376]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"}.uploader-h-5[data-v-37984376]{height:1.25rem}.uploader-h-6[data-v-37984376]{height:1.5rem}.uploader-h-8[data-v-37984376]{height:2rem}.uploader-h-12[data-v-37984376]{height:3rem}.uploader-h-20[data-v-37984376]{height:5rem}.uploader-h-32[data-v-37984376]{height:8rem}.uploader-h-48[data-v-37984376]{height:12rem}.uploader-h-full[data-v-37984376]{height:100%}.uploader-h-300-px[data-v-37984376]{height:300px}.uploader-text-sm[data-v-37984376]{font-size:.875rem}.uploader-m-2[data-v-37984376]{margin:.5rem}.uploader-mx-2[data-v-37984376]{margin-left:.5rem;margin-right:.5rem}.uploader-mt-1[data-v-37984376]{margin-top:.25rem}.uploader-mb-4[data-v-37984376]{margin-bottom:1rem}.uploader-mt-10[data-v-37984376]{margin-top:2.5rem}.uploader-object-contain[data-v-37984376]{-o-object-fit:contain;object-fit:contain}.uploader-object-cover[data-v-37984376]{-o-object-fit:cover;object-fit:cover}.uploader-opacity-50[data-v-37984376]{opacity:.5}.uploader-opacity-75[data-v-37984376]{opacity:.75}.focus\\:uploader-outline-none[data-v-37984376]:focus{outline:2px solid transparent;outline-offset:2px}.uploader-overflow-auto[data-v-37984376]{overflow:auto}.uploader-overflow-hidden[data-v-37984376]{overflow:hidden}.uploader-p-1[data-v-37984376]{padding:.25rem}.uploader-p-8[data-v-37984376]{padding:2rem}.uploader-py-2[data-v-37984376]{padding-top:.5rem;padding-bottom:.5rem}.uploader-fixed[data-v-37984376]{position:fixed}.uploader-absolute[data-v-37984376]{position:absolute}.uploader-relative[data-v-37984376]{position:relative}.uploader-top-0[data-v-37984376]{top:0}.uploader-right-0[data-v-37984376]{right:0}.uploader-bottom-0[data-v-37984376]{bottom:0}.uploader-left-0[data-v-37984376]{left:0}.uploader-top-10[data-v-37984376]{top:10px}.uploader-right-10[data-v-37984376]{right:10px}.uploader-shadow-md[data-v-37984376]{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.uploader-shadow-2xl[data-v-37984376]{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.uploader-text-white[data-v-37984376]{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.uploader-text-gray-500[data-v-37984376]{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.uploader-text-gray-600[data-v-37984376]{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.uploader-text-red-600[data-v-37984376]{--text-opacity:1;color:#e53e3e;color:rgba(229,62,62,var(--text-opacity))}.uploader-w-5[data-v-37984376]{width:1.25rem}.uploader-w-6[data-v-37984376]{width:1.5rem}.uploader-w-8[data-v-37984376]{width:2rem}.uploader-w-12[data-v-37984376]{width:3rem}.uploader-w-20[data-v-37984376]{width:5rem}.uploader-w-32[data-v-37984376]{width:8rem}.uploader-w-full[data-v-37984376]{width:100%}.uploader-z-999999999[data-v-37984376]{z-index:999999999}@-webkit-keyframes spin-data-v-37984376{to{transform:rotate(360deg)}}@keyframes spin-data-v-37984376{to{transform:rotate(360deg)}}@-webkit-keyframes ping-data-v-37984376{100%,75%{transform:scale(2);opacity:0}}@keyframes ping-data-v-37984376{100%,75%{transform:scale(2);opacity:0}}@-webkit-keyframes pulse-data-v-37984376{50%{opacity:.5}}@keyframes pulse-data-v-37984376{50%{opacity:.5}}@-webkit-keyframes bounce-data-v-37984376{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce-data-v-37984376{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.uploader-animate-spin[data-v-37984376]{-webkit-animation:spin-data-v-37984376 1s linear infinite;animation:spin-data-v-37984376 1s linear infinite}@media (min-width:768px){.md\\:uploader-w-1\\/2[data-v-37984376]{width:50%}}", map: undefined, media: undefined }); 718 | 719 | }; 720 | /* scoped */ 721 | var __vue_scope_id__$1 = "data-v-37984376"; 722 | /* module identifier */ 723 | var __vue_module_identifier__$1 = undefined; 724 | /* functional template */ 725 | var __vue_is_functional_template__$1 = false; 726 | /* style inject SSR */ 727 | 728 | 729 | 730 | var preview = normalizeComponent_1( 731 | { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, 732 | __vue_inject_styles__$1, 733 | __vue_script__$1, 734 | __vue_scope_id__$1, 735 | __vue_is_functional_template__$1, 736 | __vue_module_identifier__$1, 737 | browser, 738 | undefined 739 | ); 740 | 741 | function install(Vue) { 742 | if (install.installed) { return; } 743 | install.installed = true; 744 | Vue.component("file-uploader", component); 745 | Vue.component("file-preview", preview); 746 | } 747 | 748 | var plugin = { 749 | install: install 750 | }; 751 | 752 | var GlobalVue = null; 753 | if (typeof window !== "undefined") { 754 | GlobalVue = window.Vue; 755 | } else if (typeof global !== "undefined") { 756 | GlobalVue = global.vue; 757 | } 758 | 759 | if (GlobalVue) { 760 | GlobalVue.use(plugin); 761 | } 762 | 763 | component.install = install; 764 | 765 | exports.default = component; 766 | 767 | }(this['file-uploader'] = this['file-uploader'] || {})); 768 | -------------------------------------------------------------------------------- /dist/file-uploader.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : 3 | typeof define === 'function' && define.amd ? define(['exports'], factory) : 4 | (global = global || self, factory(global['file-uploader'] = global['file-uploader'] || {})); 5 | }(this, (function (exports) { 'use strict'; 6 | 7 | // 8 | // 9 | // 10 | // 11 | // 12 | // 13 | // 14 | // 15 | // 16 | // 17 | // 18 | // 19 | // 20 | // 21 | // 22 | // 23 | // 24 | // 25 | // 26 | // 27 | // 28 | // 29 | // 30 | // 31 | // 32 | // 33 | // 34 | // 35 | // 36 | // 37 | // 38 | // 39 | // 40 | // 41 | // 42 | // 43 | // 44 | // 45 | // 46 | // 47 | // 48 | // 49 | // 50 | // 51 | // 52 | // 53 | // 54 | // 55 | // 56 | // 57 | // 58 | // 59 | // 60 | // 61 | // 62 | // 63 | // 64 | // 65 | // 66 | // 67 | // 68 | // 69 | // 70 | // 71 | // 72 | // 73 | // 74 | // 75 | // 76 | // 77 | // 78 | // 79 | // 80 | // 81 | // 82 | // 83 | // 84 | // 85 | // 86 | // 87 | // 88 | // 89 | // 90 | // 91 | // 92 | // 93 | // 94 | // 95 | // 96 | // 97 | // 98 | // 99 | // 100 | // 101 | // 102 | // 103 | // 104 | // 105 | // 106 | // 107 | // 108 | // 109 | // 110 | // 111 | // 112 | // 113 | // 114 | // 115 | // 116 | // 117 | // 118 | // 119 | // 120 | // 121 | // 122 | // 123 | // 124 | // 125 | // 126 | // 127 | // 128 | // 129 | // 130 | // 131 | // 132 | // 133 | // 134 | // 135 | // 136 | // 137 | // 138 | // 139 | // 140 | // 141 | // 142 | // 143 | // 144 | // 145 | // 146 | // 147 | // 148 | // 149 | // 150 | 151 | var script = { 152 | props: { 153 | max: { 154 | default: 1 155 | }, 156 | unlimited: { 157 | default: false 158 | }, 159 | media: { 160 | required: false, 161 | type: Array, 162 | default: function () { return []; } 163 | }, 164 | accept: { 165 | required: false, 166 | type: String, 167 | default: '*', 168 | }, 169 | notes: { 170 | required: false, 171 | type: String, 172 | default: '', 173 | }, 174 | label: { 175 | required: false, 176 | type: String, 177 | default: '', 178 | }, 179 | collection: { 180 | required: false, 181 | type: String, 182 | default: 'default', 183 | }, 184 | maxWidth: { 185 | required: false, 186 | default: '800', 187 | }, 188 | maxHeight: { 189 | required: false, 190 | default: '800', 191 | }, 192 | value: { 193 | required: false, 194 | type: Object / Array, 195 | default: function () { return []; }, 196 | }, 197 | tokens: { 198 | required: false, 199 | type: Object / Array, 200 | default: function () { return []; }, 201 | }, 202 | form: { 203 | required: false, 204 | default: false 205 | }, 206 | displayValidationMessages: { 207 | required: false, 208 | default: false 209 | }, 210 | name: { 211 | required: false, 212 | type: String, 213 | default: 'media' 214 | } 215 | }, 216 | data: function data() { 217 | return { 218 | files: this.media || [], 219 | values: this.tokens, 220 | inputFilesLength: 0, 221 | pending: -1, 222 | uploading: false, 223 | preview: null, 224 | maximum: this.max, 225 | errors: [], 226 | } 227 | }, 228 | created: function created() { 229 | var this$1 = this; 230 | 231 | var handleEscape = function (e) { 232 | if (e.key === 'Esc' || e.key === 'Escape') { 233 | this$1.preview = null; 234 | } 235 | }; 236 | document.addEventListener('keydown', handleEscape); 237 | 238 | if (this.unlimited) { 239 | this.maximum = 0; 240 | } 241 | if (this.value.length) { 242 | var xhr = new XMLHttpRequest(); 243 | var vueInstance = this; 244 | var params = Object.keys(this.value).map(function (key) { 245 | return 'tokens[]=' + this$1.value[key] 246 | }).join('&'); 247 | xhr.onreadystatechange = function () { 248 | if (this.readyState === 4) { 249 | if (this.status === 200) { 250 | if (this.responseText) { 251 | vueInstance.files = JSON.parse(this.responseText).data; 252 | } 253 | } 254 | } 255 | }; 256 | xhr.open("GET", '/api/uploader/media?collection=' + this.collection + '&' + params, true); 257 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 258 | var token = document.head.querySelector('meta[name="csrf-token"]'); 259 | if (token) { 260 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 261 | } else { 262 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 263 | } 264 | xhr.send(null); 265 | } 266 | }, 267 | methods: { 268 | readUrl: async function readUrl(event) { 269 | var this$1 = this; 270 | 271 | var input = event.target; 272 | if (input.files) { 273 | var fileList = input.files; 274 | var filesCount = fileList.length > this.maximum - this.files.length 275 | ? this.maximum - this.files.length : fileList.length; 276 | this.inputFilesLength = filesCount; 277 | if (!this.unlimited) { 278 | this.pending = filesCount; 279 | } else { 280 | filesCount = fileList.length; 281 | } 282 | if (filesCount > 0) { 283 | this.uploading = true; 284 | } 285 | 286 | for (var i = 0; i < filesCount; i++) { 287 | await this.upload(fileList[i]) 288 | .then(function (response) { 289 | if (!this$1.unlimited) { 290 | this$1.pending--; 291 | } 292 | this$1.uploading = false; 293 | var file = response.data; 294 | this$1.files.push(file[0]); 295 | this$1.values.push(response.token); 296 | this$1.$emit('input', this$1.values); 297 | this$1.complete(); 298 | }) 299 | .catch(function (error) { 300 | if (!this$1.unlimited) { 301 | this$1.pending--; 302 | } 303 | this$1.uploading = false; 304 | 305 | if (error.status === 422) { 306 | this$1.errors.push({ 307 | message: error.response.errors.file[0], 308 | filename: error.file.name 309 | }); 310 | } 311 | 312 | this$1.$emit('upload-error', error); 313 | this$1.complete(); 314 | }); 315 | } 316 | } 317 | }, 318 | resizeImage: function resizeImage(base64Str) { 319 | var this$1 = this; 320 | 321 | return new Promise(function (resolve) { 322 | 323 | var img = new Image(); 324 | img.src = base64Str; 325 | return img.onload = function () { 326 | var canvas = document.createElement('canvas'); 327 | var MAX_WIDTH = this$1.maxWidth; 328 | var MAX_HEIGHT = this$1.maxHeight; 329 | var width = img.width; 330 | var height = img.height; 331 | 332 | if (width > height) { 333 | if (width > MAX_WIDTH) { 334 | height *= MAX_WIDTH / width; 335 | width = MAX_WIDTH; 336 | } 337 | } else { 338 | if (height > MAX_HEIGHT) { 339 | width *= MAX_HEIGHT / height; 340 | height = MAX_HEIGHT; 341 | } 342 | } 343 | canvas.width = width; 344 | canvas.height = height; 345 | var ctx = canvas.getContext('2d'); 346 | ctx.drawImage(img, 0, 0, width, height); 347 | resolve(canvas.toDataURL()); 348 | } 349 | 350 | }) 351 | }, 352 | upload: function upload(file) { 353 | var this$1 = this; 354 | 355 | return new Promise(function (resolve, reject) { 356 | this$1.beforeUploading(); 357 | var formData = new FormData(); 358 | 359 | if (file.type.includes('image')) { 360 | 361 | var reader = new FileReader(); 362 | 363 | var resize = async function () { 364 | var image = await this$1.resizeImage(reader.result); 365 | 366 | formData.append('file', image); 367 | }; 368 | 369 | 370 | reader.addEventListener("load", resize, false); 371 | 372 | 373 | if (file) { 374 | reader.readAsDataURL(file); 375 | } 376 | 377 | } else { 378 | formData.append('file', file); 379 | } 380 | // TODO: refactor 381 | setTimeout(function () { 382 | formData.append('collection', this$1.collection); 383 | var xhr = new XMLHttpRequest(); 384 | xhr.onreadystatechange = function () { 385 | if (this.readyState === 4) { 386 | if (this.status === 200) { 387 | if (this.responseText) { 388 | resolve(JSON.parse(this.responseText)); 389 | } 390 | } else { 391 | if (this.responseText) { 392 | reject({ 393 | response: JSON.parse(this.responseText), 394 | status: this.status, 395 | file: file 396 | }); 397 | } 398 | } 399 | } 400 | }; 401 | xhr.open("POST", '/api/uploader/media/upload', true); 402 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 403 | var token = document.head.querySelector('meta[name="csrf-token"]'); 404 | if (token) { 405 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 406 | } else { 407 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 408 | } 409 | xhr.send(formData); 410 | }, 1000); 411 | }); 412 | }, 413 | deleteFile: function deleteFile(file) { 414 | if (file.data) { 415 | return; 416 | } 417 | var xhr = new XMLHttpRequest(); 418 | xhr.open("DELETE", file.links.delete.href, true); 419 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 420 | var token = document.head.querySelector('meta[name="csrf-token"]'); 421 | if (token) { 422 | xhr.setRequestHeader('X-CSRF-TOKEN', token.content); 423 | } else { 424 | console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 425 | } 426 | xhr.send(); 427 | this.$delete(this.files, this.files.indexOf(file)); 428 | this.$delete(this.values, this.files.indexOf(file)); 429 | this.inputFilesLength--; 430 | this.complete(); 431 | }, 432 | beforeUploading: function beforeUploading() { 433 | var input = document.querySelector('[type=submit]'); 434 | if (input) { 435 | input.setAttribute('disabled', true); 436 | } 437 | this.$emit('beforeUpload'); 438 | }, 439 | complete: function complete() { 440 | if (this.values.length >= this.inputFilesLength) { 441 | var input = document.querySelector('[type=submit]'); 442 | if (input) { 443 | input.removeAttribute('disabled'); 444 | } 445 | 446 | this.$emit('complete'); 447 | } 448 | } 449 | } 450 | }; 451 | 452 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 453 | /* server only */ 454 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 455 | if (typeof shadowMode !== 'boolean') { 456 | createInjectorSSR = createInjector; 457 | createInjector = shadowMode; 458 | shadowMode = false; 459 | } // Vue.extend constructor export interop. 460 | 461 | 462 | var options = typeof script === 'function' ? script.options : script; // render functions 463 | 464 | if (template && template.render) { 465 | options.render = template.render; 466 | options.staticRenderFns = template.staticRenderFns; 467 | options._compiled = true; // functional template 468 | 469 | if (isFunctionalTemplate) { 470 | options.functional = true; 471 | } 472 | } // scopedId 473 | 474 | 475 | if (scopeId) { 476 | options._scopeId = scopeId; 477 | } 478 | 479 | var hook; 480 | 481 | if (moduleIdentifier) { 482 | // server build 483 | hook = function hook(context) { 484 | // 2.3 injection 485 | context = context || // cached call 486 | this.$vnode && this.$vnode.ssrContext || // stateful 487 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 488 | // 2.2 with runInNewContext: true 489 | 490 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 491 | context = __VUE_SSR_CONTEXT__; 492 | } // inject component styles 493 | 494 | 495 | if (style) { 496 | style.call(this, createInjectorSSR(context)); 497 | } // register component module identifier for async chunk inference 498 | 499 | 500 | if (context && context._registeredComponents) { 501 | context._registeredComponents.add(moduleIdentifier); 502 | } 503 | }; // used by ssr in case component is cached and beforeCreate 504 | // never gets called 505 | 506 | 507 | options._ssrRegister = hook; 508 | } else if (style) { 509 | hook = shadowMode ? function () { 510 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 511 | } : function (context) { 512 | style.call(this, createInjector(context)); 513 | }; 514 | } 515 | 516 | if (hook) { 517 | if (options.functional) { 518 | // register for functional component in vue file 519 | var originalRender = options.render; 520 | 521 | options.render = function renderWithStyleInjection(h, context) { 522 | hook.call(context); 523 | return originalRender(h, context); 524 | }; 525 | } else { 526 | // inject component registration as beforeCreate hook 527 | var existing = options.beforeCreate; 528 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 529 | } 530 | } 531 | 532 | return script; 533 | } 534 | 535 | var normalizeComponent_1 = normalizeComponent; 536 | 537 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); 538 | function createInjector(context) { 539 | return function (id, style) { 540 | return addStyle(id, style); 541 | }; 542 | } 543 | var HEAD = document.head || document.getElementsByTagName('head')[0]; 544 | var styles = {}; 545 | 546 | function addStyle(id, css) { 547 | var group = isOldIE ? css.media || 'default' : id; 548 | var style = styles[group] || (styles[group] = { 549 | ids: new Set(), 550 | styles: [] 551 | }); 552 | 553 | if (!style.ids.has(id)) { 554 | style.ids.add(id); 555 | var code = css.source; 556 | 557 | if (css.map) { 558 | // https://developer.chrome.com/devtools/docs/javascript-debugging 559 | // this makes source maps inside style tags work properly in Chrome 560 | code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 561 | 562 | code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; 563 | } 564 | 565 | if (!style.element) { 566 | style.element = document.createElement('style'); 567 | style.element.type = 'text/css'; 568 | if (css.media) { style.element.setAttribute('media', css.media); } 569 | HEAD.appendChild(style.element); 570 | } 571 | 572 | if ('styleSheet' in style.element) { 573 | style.styles.push(code); 574 | style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); 575 | } else { 576 | var index = style.ids.size - 1; 577 | var textNode = document.createTextNode(code); 578 | var nodes = style.element.childNodes; 579 | if (nodes[index]) { style.element.removeChild(nodes[index]); } 580 | if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); } 581 | } 582 | } 583 | } 584 | 585 | var browser = createInjector; 586 | 587 | /* script */ 588 | var __vue_script__ = script; 589 | 590 | /* template */ 591 | var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"uploader-mb-4"},[_c('label',[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_c('div',{staticClass:"uploader-flex uploader-flex-wrap"},[_vm._l((_vm.files),function(file){return _c('div',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-md uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none",attrs:{"title":file.file_name}},[_c('img',{staticClass:"uploader-absolute uploader-w-full uploader-h-full uploader-object-contain",attrs:{"src":file.preview,"alt":"preview"}}),_vm._v(" "),_c('a',{staticClass:"uploader-absolute uploader-bg-red-600 uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-0 uploader-right-0 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",attrs:{"href":"#","title":"Delete"},on:{"click":function($event){$event.preventDefault();return _vm.deleteFile(file)}}},[_c('svg',{staticClass:"uploader-w-5 uploader-h-5",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"}})])]),_vm._v(" "),_c('a',{staticClass:"uploader-absolute uploader-bg-green-600 uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-0 uploader-left-0 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",attrs:{"href":"#","title":"Show"},on:{"click":function($event){$event.preventDefault();_vm.preview = file;}}},[_c('svg',{staticClass:"uploader-w-5 uploader-h-5",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"}})])]),_vm._v(" "),_c('span',{staticClass:"uploader-font-sans uploader-absolute uploader-w-full uploader-flex uploader-justify-center uploader-bg-gray-900 uploader-text-white uploader-text-sm uploader-bottom-0"},[_vm._v("\n "+_vm._s(file.human_readable_size)+"\n ")])])}),_vm._v(" "),_vm._l(((_vm.maximum - _vm.files.length < 0 ? 0 : _vm.maximum - _vm.files.length)),function(i){return (!_vm.unlimited)?_c('label',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-xl uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none hover:uploader-bg-gray-100 uploader-cursor-pointer"},[_c('input',{ref:"file",refInFor:true,staticClass:"uploader-hidden",attrs:{"type":"file","accept":_vm.accept,"multiple":_vm.maximum > 1},on:{"change":_vm.readUrl}}),_vm._v(" "),(i <= _vm.pending)?_c('svg',{staticClass:"uploader-animate-spin uploader-h-8 uploader-w-8 uploader-text-gray-500",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24"}},[_c('circle',{staticClass:"uploader-opacity-50",attrs:{"cx":"12","cy":"12","r":"10","stroke":"currentColor","stroke-width":"4"}}),_vm._v(" "),_c('path',{staticClass:"uploader-opacity-75",attrs:{"fill":"currentColor","d":"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}})]):_c('svg',{staticClass:"uploader-w-12 uploader-h-12",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}})])]):_vm._e()}),_vm._v(" "),(_vm.unlimited)?_c('label',{staticClass:"uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-xl uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none hover:uploader-bg-gray-100 uploader-cursor-pointer"},[_c('input',{ref:"file",staticClass:"uploader-hidden",attrs:{"type":"file","accept":_vm.accept,"multiple":true},on:{"change":_vm.readUrl}}),_vm._v(" "),(_vm.uploading)?_c('svg',{staticClass:"uploader-animate-spin uploader-h-8 uploader-w-8 uploader-text-gray-500",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24"}},[_c('circle',{staticClass:"uploader-opacity-50",attrs:{"cx":"12","cy":"12","r":"10","stroke":"currentColor","stroke-width":"4"}}),_vm._v(" "),_c('path',{staticClass:"uploader-opacity-75",attrs:{"fill":"currentColor","d":"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}})]):_c('svg',{staticClass:"uploader-w-12 uploader-h-12",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}})])]):_vm._e()],2),_vm._v(" "),_vm._l((_vm.values),function(token){return _c('input',{attrs:{"type":"hidden","form":_vm.form,"name":(((_vm.name)) + "[]")},domProps:{"value":token}})}),_vm._v(" "),(_vm.errors.length === 0)?_c('small',{staticClass:"uploader-text-gray-600"},[_vm._v(_vm._s(_vm.notes))]):_vm._e(),_vm._v(" "),_vm._l((_vm.errors),function(error){return (_vm.errors.length && _vm.displayValidationMessages)?_c('p',{staticClass:"uploader-flex uploader-items-center uploader-text-red-600"},[_c('svg',{staticClass:"uploader-w-5 uploader-w-5 uploader-inline uploader-mx-2",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}})]),_vm._v("\n "+_vm._s(error.message)+" ("),_c('u',{staticClass:"uploader-cursor-pointer"},[_vm._v(_vm._s(error.filename))]),_vm._v(")\n ")]):_vm._e()}),_vm._v(" "),(_vm.preview)?_c('div',{staticClass:"uploader-overflow-auto uploader-fixed uploader-flex uploader-justify-center uploader-w-full uploader-h-full uploader-top-0 uploader-left-0 uploader-bg-black uploader-bg-opacity-50 uploader-z-999999999",on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.preview = null;}}},[_c('div',{staticClass:"uploader-w-full md:uploader-w-1/2 uploader-mx-2 uploader-rounded-t-lg uploader-shadow-md uploader-mt-10 uploader-bg-white uploader-h-300-px uploader-relative uploader-border uploader-border-gray-600"},[_c('button',{staticClass:"uploader-bg-gray-600 hover:uploader-bg-gray-800 uploader-shadow-md uploader-absolute uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-10 uploader-right-10 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",on:{"click":function($event){$event.preventDefault();_vm.preview = null;}}},[_c('svg',{staticClass:"uploader-w-8 uploader-h-8",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])]),_vm._v(" "),_c('div',{staticClass:"uploader-h-full uploader-flex uploader-items-center"},[(_vm.preview && _vm.preview.mime_type.includes('image'))?_c('img',{staticClass:"uploader-object-contain uploader-w-full uploader-p-1 uploader-h-full",attrs:{"src":_vm.preview.url,"alt":"preview"}}):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('audio'))?_c('audio',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-48",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the audio tag.\n ")]):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('video'))?_c('video',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-full",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the video tag.\n ")]):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"uploader-bg-white uploader-flex uploader-items-center uploader-justify-start uploader-overflow-auto uploader-py-2 uploader-w-full uploader-mt-1 uploader-border uploader-border-gray-600 uploader-rounded-b-lg uploader-shadow-2xl"},_vm._l((_vm.files),function(file){return _c('img',{staticClass:"uploader-cursor-pointer hover:uploader-border-gray-600 uploader-object-cover uploader-bg-white uploader-mx-2 uploader-w-20 uploader-h-20 uploader-border uploader-border-gray-400",attrs:{"src":file.preview},on:{"mouseover":function($event){_vm.preview = file;}}})}),0)])]):_vm._e()],2)}; 592 | var __vue_staticRenderFns__ = []; 593 | 594 | /* style */ 595 | var __vue_inject_styles__ = function (inject) { 596 | if (!inject) { return } 597 | inject("data-v-597f7c1e_0", { source: "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html[data-v-597f7c1e]{line-height:1.15;-webkit-text-size-adjust:100%}body[data-v-597f7c1e]{margin:0}main[data-v-597f7c1e]{display:block}h1[data-v-597f7c1e]{font-size:2em;margin:.67em 0}hr[data-v-597f7c1e]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-597f7c1e]{font-family:monospace,monospace;font-size:1em}a[data-v-597f7c1e]{background-color:transparent}abbr[title][data-v-597f7c1e]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-597f7c1e],strong[data-v-597f7c1e]{font-weight:bolder}code[data-v-597f7c1e],kbd[data-v-597f7c1e],samp[data-v-597f7c1e]{font-family:monospace,monospace;font-size:1em}small[data-v-597f7c1e]{font-size:80%}sub[data-v-597f7c1e],sup[data-v-597f7c1e]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-597f7c1e]{bottom:-.25em}sup[data-v-597f7c1e]{top:-.5em}img[data-v-597f7c1e]{border-style:none}button[data-v-597f7c1e],input[data-v-597f7c1e],optgroup[data-v-597f7c1e],select[data-v-597f7c1e],textarea[data-v-597f7c1e]{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button[data-v-597f7c1e],input[data-v-597f7c1e]{overflow:visible}button[data-v-597f7c1e],select[data-v-597f7c1e]{text-transform:none}[type=button][data-v-597f7c1e],[type=submit][data-v-597f7c1e],button[data-v-597f7c1e]{-webkit-appearance:button}[type=button][data-v-597f7c1e]::-moz-focus-inner,[type=submit][data-v-597f7c1e]::-moz-focus-inner,button[data-v-597f7c1e]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-597f7c1e]:-moz-focusring,[type=submit][data-v-597f7c1e]:-moz-focusring,button[data-v-597f7c1e]:-moz-focusring{outline:1px dotted ButtonText}fieldset[data-v-597f7c1e]{padding:.35em .75em .625em}legend[data-v-597f7c1e]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-597f7c1e]{vertical-align:baseline}textarea[data-v-597f7c1e]{overflow:auto}details[data-v-597f7c1e]{display:block}summary[data-v-597f7c1e]{display:list-item}template[data-v-597f7c1e]{display:none}[hidden][data-v-597f7c1e]{display:none}blockquote[data-v-597f7c1e],dd[data-v-597f7c1e],dl[data-v-597f7c1e],figure[data-v-597f7c1e],h1[data-v-597f7c1e],h2[data-v-597f7c1e],h3[data-v-597f7c1e],h4[data-v-597f7c1e],h5[data-v-597f7c1e],h6[data-v-597f7c1e],hr[data-v-597f7c1e],p[data-v-597f7c1e],pre[data-v-597f7c1e]{margin:0}button[data-v-597f7c1e]{background-color:transparent;background-image:none}button[data-v-597f7c1e]:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset[data-v-597f7c1e]{margin:0;padding:0}ol[data-v-597f7c1e],ul[data-v-597f7c1e]{list-style:none;margin:0;padding:0}html[data-v-597f7c1e]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";line-height:1.5}*[data-v-597f7c1e],[data-v-597f7c1e]::after,[data-v-597f7c1e]::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr[data-v-597f7c1e]{border-top-width:1px}img[data-v-597f7c1e]{border-style:solid}textarea[data-v-597f7c1e]{resize:vertical}input[data-v-597f7c1e]::-moz-placeholder,textarea[data-v-597f7c1e]::-moz-placeholder{color:#a0aec0}input[data-v-597f7c1e]:-ms-input-placeholder,textarea[data-v-597f7c1e]:-ms-input-placeholder{color:#a0aec0}input[data-v-597f7c1e]::placeholder,textarea[data-v-597f7c1e]::placeholder{color:#a0aec0}button[data-v-597f7c1e]{cursor:pointer}table[data-v-597f7c1e]{border-collapse:collapse}h1[data-v-597f7c1e],h2[data-v-597f7c1e],h3[data-v-597f7c1e],h4[data-v-597f7c1e],h5[data-v-597f7c1e],h6[data-v-597f7c1e]{font-size:inherit;font-weight:inherit}a[data-v-597f7c1e]{color:inherit;text-decoration:inherit}button[data-v-597f7c1e],input[data-v-597f7c1e],optgroup[data-v-597f7c1e],select[data-v-597f7c1e],textarea[data-v-597f7c1e]{padding:0;line-height:inherit;color:inherit}code[data-v-597f7c1e],kbd[data-v-597f7c1e],pre[data-v-597f7c1e],samp[data-v-597f7c1e]{font-family:Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}audio[data-v-597f7c1e],canvas[data-v-597f7c1e],embed[data-v-597f7c1e],iframe[data-v-597f7c1e],img[data-v-597f7c1e],object[data-v-597f7c1e],svg[data-v-597f7c1e],video[data-v-597f7c1e]{display:block;vertical-align:middle}img[data-v-597f7c1e],video[data-v-597f7c1e]{max-width:100%;height:auto}.uploader-bg-black[data-v-597f7c1e]{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.uploader-bg-white[data-v-597f7c1e]{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.uploader-bg-gray-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#718096;background-color:rgba(113,128,150,var(--bg-opacity))}.uploader-bg-gray-900[data-v-597f7c1e]{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.uploader-bg-red-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#e53e3e;background-color:rgba(229,62,62,var(--bg-opacity))}.uploader-bg-green-600[data-v-597f7c1e]{--bg-opacity:1;background-color:#38a169;background-color:rgba(56,161,105,var(--bg-opacity))}.hover\\:uploader-bg-gray-100[data-v-597f7c1e]:hover{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.hover\\:uploader-bg-gray-800[data-v-597f7c1e]:hover{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.uploader-bg-opacity-50[data-v-597f7c1e]{--bg-opacity:0.5}.uploader-border-gray-400[data-v-597f7c1e]{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.uploader-border-gray-500[data-v-597f7c1e]{--border-opacity:1;border-color:#a0aec0;border-color:rgba(160,174,192,var(--border-opacity))}.uploader-border-gray-600[data-v-597f7c1e]{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.hover\\:uploader-border-gray-600[data-v-597f7c1e]:hover{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.uploader-rounded-md[data-v-597f7c1e]{border-radius:.375rem}.uploader-rounded-xl[data-v-597f7c1e]{border-radius:.75rem}.uploader-rounded-t-lg[data-v-597f7c1e]{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.uploader-rounded-b-lg[data-v-597f7c1e]{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.uploader-border-dashed[data-v-597f7c1e]{border-style:dashed}.uploader-border-2[data-v-597f7c1e]{border-width:2px}.uploader-border[data-v-597f7c1e]{border-width:1px}.uploader-cursor-pointer[data-v-597f7c1e]{cursor:pointer}.uploader-inline[data-v-597f7c1e]{display:inline}.uploader-flex[data-v-597f7c1e]{display:flex}.uploader-hidden[data-v-597f7c1e]{display:none}.uploader-flex-wrap[data-v-597f7c1e]{flex-wrap:wrap}.uploader-items-center[data-v-597f7c1e]{align-items:center}.uploader-justify-start[data-v-597f7c1e]{justify-content:flex-start}.uploader-justify-center[data-v-597f7c1e]{justify-content:center}.uploader-font-sans[data-v-597f7c1e]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"}.uploader-h-5[data-v-597f7c1e]{height:1.25rem}.uploader-h-6[data-v-597f7c1e]{height:1.5rem}.uploader-h-8[data-v-597f7c1e]{height:2rem}.uploader-h-12[data-v-597f7c1e]{height:3rem}.uploader-h-20[data-v-597f7c1e]{height:5rem}.uploader-h-32[data-v-597f7c1e]{height:8rem}.uploader-h-48[data-v-597f7c1e]{height:12rem}.uploader-h-full[data-v-597f7c1e]{height:100%}.uploader-h-300-px[data-v-597f7c1e]{height:300px}.uploader-text-sm[data-v-597f7c1e]{font-size:.875rem}.uploader-m-2[data-v-597f7c1e]{margin:.5rem}.uploader-mx-2[data-v-597f7c1e]{margin-left:.5rem;margin-right:.5rem}.uploader-mt-1[data-v-597f7c1e]{margin-top:.25rem}.uploader-mb-4[data-v-597f7c1e]{margin-bottom:1rem}.uploader-mt-10[data-v-597f7c1e]{margin-top:2.5rem}.uploader-object-contain[data-v-597f7c1e]{-o-object-fit:contain;object-fit:contain}.uploader-object-cover[data-v-597f7c1e]{-o-object-fit:cover;object-fit:cover}.uploader-opacity-50[data-v-597f7c1e]{opacity:.5}.uploader-opacity-75[data-v-597f7c1e]{opacity:.75}.focus\\:uploader-outline-none[data-v-597f7c1e]:focus{outline:2px solid transparent;outline-offset:2px}.uploader-overflow-auto[data-v-597f7c1e]{overflow:auto}.uploader-overflow-hidden[data-v-597f7c1e]{overflow:hidden}.uploader-p-1[data-v-597f7c1e]{padding:.25rem}.uploader-p-8[data-v-597f7c1e]{padding:2rem}.uploader-py-2[data-v-597f7c1e]{padding-top:.5rem;padding-bottom:.5rem}.uploader-fixed[data-v-597f7c1e]{position:fixed}.uploader-absolute[data-v-597f7c1e]{position:absolute}.uploader-relative[data-v-597f7c1e]{position:relative}.uploader-top-0[data-v-597f7c1e]{top:0}.uploader-right-0[data-v-597f7c1e]{right:0}.uploader-bottom-0[data-v-597f7c1e]{bottom:0}.uploader-left-0[data-v-597f7c1e]{left:0}.uploader-top-10[data-v-597f7c1e]{top:10px}.uploader-right-10[data-v-597f7c1e]{right:10px}.uploader-shadow-md[data-v-597f7c1e]{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.uploader-shadow-2xl[data-v-597f7c1e]{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.uploader-text-white[data-v-597f7c1e]{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.uploader-text-gray-500[data-v-597f7c1e]{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.uploader-text-gray-600[data-v-597f7c1e]{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.uploader-text-red-600[data-v-597f7c1e]{--text-opacity:1;color:#e53e3e;color:rgba(229,62,62,var(--text-opacity))}.uploader-w-5[data-v-597f7c1e]{width:1.25rem}.uploader-w-6[data-v-597f7c1e]{width:1.5rem}.uploader-w-8[data-v-597f7c1e]{width:2rem}.uploader-w-12[data-v-597f7c1e]{width:3rem}.uploader-w-20[data-v-597f7c1e]{width:5rem}.uploader-w-32[data-v-597f7c1e]{width:8rem}.uploader-w-full[data-v-597f7c1e]{width:100%}.uploader-z-999999999[data-v-597f7c1e]{z-index:999999999}@-webkit-keyframes spin-data-v-597f7c1e{to{transform:rotate(360deg)}}@keyframes spin-data-v-597f7c1e{to{transform:rotate(360deg)}}@-webkit-keyframes ping-data-v-597f7c1e{100%,75%{transform:scale(2);opacity:0}}@keyframes ping-data-v-597f7c1e{100%,75%{transform:scale(2);opacity:0}}@-webkit-keyframes pulse-data-v-597f7c1e{50%{opacity:.5}}@keyframes pulse-data-v-597f7c1e{50%{opacity:.5}}@-webkit-keyframes bounce-data-v-597f7c1e{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce-data-v-597f7c1e{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.uploader-animate-spin[data-v-597f7c1e]{-webkit-animation:spin-data-v-597f7c1e 1s linear infinite;animation:spin-data-v-597f7c1e 1s linear infinite}@media (min-width:768px){.md\\:uploader-w-1\\/2[data-v-597f7c1e]{width:50%}}", map: undefined, media: undefined }); 598 | 599 | }; 600 | /* scoped */ 601 | var __vue_scope_id__ = "data-v-597f7c1e"; 602 | /* module identifier */ 603 | var __vue_module_identifier__ = undefined; 604 | /* functional template */ 605 | var __vue_is_functional_template__ = false; 606 | /* style inject SSR */ 607 | 608 | 609 | 610 | var component = normalizeComponent_1( 611 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 612 | __vue_inject_styles__, 613 | __vue_script__, 614 | __vue_scope_id__, 615 | __vue_is_functional_template__, 616 | __vue_module_identifier__, 617 | browser, 618 | undefined 619 | ); 620 | 621 | // 622 | // 623 | // 624 | // 625 | // 626 | // 627 | // 628 | // 629 | // 630 | // 631 | // 632 | // 633 | // 634 | // 635 | // 636 | // 637 | // 638 | // 639 | // 640 | // 641 | // 642 | // 643 | // 644 | // 645 | // 646 | // 647 | // 648 | // 649 | // 650 | // 651 | // 652 | // 653 | // 654 | // 655 | // 656 | // 657 | // 658 | // 659 | // 660 | // 661 | // 662 | // 663 | // 664 | // 665 | // 666 | // 667 | // 668 | // 669 | // 670 | // 671 | // 672 | // 673 | // 674 | // 675 | // 676 | // 677 | // 678 | // 679 | // 680 | // 681 | // 682 | 683 | var script$1 = { 684 | props: { 685 | media: { 686 | required: false, 687 | type: Array, 688 | default: function () { return []; } 689 | }, 690 | }, 691 | data: function data() { 692 | return { 693 | files: this.media || [], 694 | preview: null, 695 | } 696 | }, 697 | created: function created() { 698 | var this$1 = this; 699 | 700 | var handleEscape = function (e) { 701 | if (e.key === 'Esc' || e.key === 'Escape') { 702 | this$1.preview = null; 703 | } 704 | }; 705 | document.addEventListener('keydown', handleEscape); 706 | 707 | } 708 | }; 709 | 710 | /* script */ 711 | var __vue_script__$1 = script$1; 712 | 713 | /* template */ 714 | var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"uploader-mb-4"},[_c('div',{staticClass:"uploader-flex uploader-flex-wrap"},_vm._l((_vm.files),function(file){return _c('div',{staticClass:"item uploader-flex uploader-relative uploader-overflow-hidden uploader-items-center uploader-justify-center uploader-m-2 uploader-w-32 uploader-h-32 uploader-border-2 uploader-border-dashed uploader-rounded-md uploader-border-gray-500 uploader-text-gray-500 focus:uploader-outline-none",attrs:{"title":file.file_name}},[_c('img',{staticClass:"uploader-absolute uploader-w-full uploader-h-full uploader-object-contain uploader-cursor-pointer",attrs:{"src":file.preview,"alt":"preview"},on:{"click":function($event){$event.preventDefault();_vm.preview = file;}}}),_vm._v(" "),_c('span',{staticClass:"uploader-font-sans uploader-absolute uploader-w-full uploader-flex uploader-justify-center uploader-bg-gray-900 uploader-text-white uploader-text-sm uploader-bottom-0"},[_vm._v("\n "+_vm._s(file.human_readable_size)+"\n ")])])}),0),_vm._v(" "),(_vm.preview)?_c('div',{staticClass:"uploader-overflow-auto uploader-fixed uploader-flex uploader-justify-center uploader-w-full uploader-h-full uploader-top-0 uploader-left-0 uploader-bg-black uploader-bg-opacity-50 uploader-z-999999999",on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.preview = null;}}},[_c('div',{staticClass:"uploader-w-full md:uploader-w-1/2 uploader-mx-2 uploader-rounded-t-lg uploader-shadow-md uploader-mt-10 uploader-bg-white uploader-h-300-px uploader-relative uploader-border uploader-border-gray-600"},[_c('button',{staticClass:"uploader-bg-gray-600 hover:uploader-bg-gray-800 uploader-shadow-md uploader-absolute uploader-text-white uploader-z-10 uploader-w-6 uploader-h-6 uploader-text-sm uploader-top-10 uploader-right-10 uploader-flex uploader-items-center uploader-justify-center focus:uploader-outline-none",on:{"click":function($event){$event.preventDefault();_vm.preview = null;}}},[_c('svg',{staticClass:"uploader-w-8 uploader-h-8",attrs:{"fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])]),_vm._v(" "),_c('div',{staticClass:"uploader-h-full uploader-flex uploader-items-center"},[(_vm.preview && _vm.preview.mime_type.includes('image'))?_c('img',{staticClass:"uploader-object-contain uploader-w-full uploader-p-1 uploader-h-full",attrs:{"src":_vm.preview.url,"alt":"preview"}}):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('audio'))?_c('audio',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-48",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the audio tag.\n ")]):_vm._e(),_vm._v(" "),(_vm.preview && _vm.preview.mime_type.includes('video'))?_c('video',{staticClass:"focus:uploader-outline-none uploader-p-8 uploader-w-full uploader-h-full",attrs:{"controls":""}},[_c('source',{attrs:{"src":_vm.preview.url,"type":_vm.preview.mime_type}}),_vm._v("\n Your browser does not support the video tag.\n ")]):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"uploader-bg-white uploader-flex uploader-items-center uploader-justify-start uploader-overflow-auto uploader-py-2 uploader-w-full uploader-mt-1 uploader-border uploader-border-gray-600 uploader-rounded-b-lg uploader-shadow-2xl"},_vm._l((_vm.files),function(file){return _c('img',{staticClass:"uploader-cursor-pointer hover:uploader-border-gray-600 uploader-object-cover uploader-bg-white uploader-mx-2 uploader-w-20 uploader-h-20 uploader-border uploader-border-gray-400",attrs:{"src":file.preview},on:{"mouseover":function($event){_vm.preview = file;}}})}),0)])]):_vm._e()])}; 715 | var __vue_staticRenderFns__$1 = []; 716 | 717 | /* style */ 718 | var __vue_inject_styles__$1 = function (inject) { 719 | if (!inject) { return } 720 | inject("data-v-37984376_0", { source: "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html[data-v-37984376]{line-height:1.15;-webkit-text-size-adjust:100%}body[data-v-37984376]{margin:0}main[data-v-37984376]{display:block}h1[data-v-37984376]{font-size:2em;margin:.67em 0}hr[data-v-37984376]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-37984376]{font-family:monospace,monospace;font-size:1em}a[data-v-37984376]{background-color:transparent}abbr[title][data-v-37984376]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-37984376],strong[data-v-37984376]{font-weight:bolder}code[data-v-37984376],kbd[data-v-37984376],samp[data-v-37984376]{font-family:monospace,monospace;font-size:1em}small[data-v-37984376]{font-size:80%}sub[data-v-37984376],sup[data-v-37984376]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-37984376]{bottom:-.25em}sup[data-v-37984376]{top:-.5em}img[data-v-37984376]{border-style:none}button[data-v-37984376],input[data-v-37984376],optgroup[data-v-37984376],select[data-v-37984376],textarea[data-v-37984376]{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button[data-v-37984376],input[data-v-37984376]{overflow:visible}button[data-v-37984376],select[data-v-37984376]{text-transform:none}[type=button][data-v-37984376],[type=submit][data-v-37984376],button[data-v-37984376]{-webkit-appearance:button}[type=button][data-v-37984376]::-moz-focus-inner,[type=submit][data-v-37984376]::-moz-focus-inner,button[data-v-37984376]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-37984376]:-moz-focusring,[type=submit][data-v-37984376]:-moz-focusring,button[data-v-37984376]:-moz-focusring{outline:1px dotted ButtonText}fieldset[data-v-37984376]{padding:.35em .75em .625em}legend[data-v-37984376]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-37984376]{vertical-align:baseline}textarea[data-v-37984376]{overflow:auto}details[data-v-37984376]{display:block}summary[data-v-37984376]{display:list-item}template[data-v-37984376]{display:none}[hidden][data-v-37984376]{display:none}blockquote[data-v-37984376],dd[data-v-37984376],dl[data-v-37984376],figure[data-v-37984376],h1[data-v-37984376],h2[data-v-37984376],h3[data-v-37984376],h4[data-v-37984376],h5[data-v-37984376],h6[data-v-37984376],hr[data-v-37984376],p[data-v-37984376],pre[data-v-37984376]{margin:0}button[data-v-37984376]{background-color:transparent;background-image:none}button[data-v-37984376]:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset[data-v-37984376]{margin:0;padding:0}ol[data-v-37984376],ul[data-v-37984376]{list-style:none;margin:0;padding:0}html[data-v-37984376]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";line-height:1.5}*[data-v-37984376],[data-v-37984376]::after,[data-v-37984376]::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr[data-v-37984376]{border-top-width:1px}img[data-v-37984376]{border-style:solid}textarea[data-v-37984376]{resize:vertical}input[data-v-37984376]::-moz-placeholder,textarea[data-v-37984376]::-moz-placeholder{color:#a0aec0}input[data-v-37984376]:-ms-input-placeholder,textarea[data-v-37984376]:-ms-input-placeholder{color:#a0aec0}input[data-v-37984376]::placeholder,textarea[data-v-37984376]::placeholder{color:#a0aec0}button[data-v-37984376]{cursor:pointer}table[data-v-37984376]{border-collapse:collapse}h1[data-v-37984376],h2[data-v-37984376],h3[data-v-37984376],h4[data-v-37984376],h5[data-v-37984376],h6[data-v-37984376]{font-size:inherit;font-weight:inherit}a[data-v-37984376]{color:inherit;text-decoration:inherit}button[data-v-37984376],input[data-v-37984376],optgroup[data-v-37984376],select[data-v-37984376],textarea[data-v-37984376]{padding:0;line-height:inherit;color:inherit}code[data-v-37984376],kbd[data-v-37984376],pre[data-v-37984376],samp[data-v-37984376]{font-family:Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}audio[data-v-37984376],canvas[data-v-37984376],embed[data-v-37984376],iframe[data-v-37984376],img[data-v-37984376],object[data-v-37984376],svg[data-v-37984376],video[data-v-37984376]{display:block;vertical-align:middle}img[data-v-37984376],video[data-v-37984376]{max-width:100%;height:auto}.uploader-bg-black[data-v-37984376]{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.uploader-bg-white[data-v-37984376]{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.uploader-bg-gray-600[data-v-37984376]{--bg-opacity:1;background-color:#718096;background-color:rgba(113,128,150,var(--bg-opacity))}.uploader-bg-gray-900[data-v-37984376]{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.uploader-bg-red-600[data-v-37984376]{--bg-opacity:1;background-color:#e53e3e;background-color:rgba(229,62,62,var(--bg-opacity))}.uploader-bg-green-600[data-v-37984376]{--bg-opacity:1;background-color:#38a169;background-color:rgba(56,161,105,var(--bg-opacity))}.hover\\:uploader-bg-gray-100[data-v-37984376]:hover{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.hover\\:uploader-bg-gray-800[data-v-37984376]:hover{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.uploader-bg-opacity-50[data-v-37984376]{--bg-opacity:0.5}.uploader-border-gray-400[data-v-37984376]{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.uploader-border-gray-500[data-v-37984376]{--border-opacity:1;border-color:#a0aec0;border-color:rgba(160,174,192,var(--border-opacity))}.uploader-border-gray-600[data-v-37984376]{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.hover\\:uploader-border-gray-600[data-v-37984376]:hover{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.uploader-rounded-md[data-v-37984376]{border-radius:.375rem}.uploader-rounded-xl[data-v-37984376]{border-radius:.75rem}.uploader-rounded-t-lg[data-v-37984376]{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.uploader-rounded-b-lg[data-v-37984376]{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.uploader-border-dashed[data-v-37984376]{border-style:dashed}.uploader-border-2[data-v-37984376]{border-width:2px}.uploader-border[data-v-37984376]{border-width:1px}.uploader-cursor-pointer[data-v-37984376]{cursor:pointer}.uploader-inline[data-v-37984376]{display:inline}.uploader-flex[data-v-37984376]{display:flex}.uploader-hidden[data-v-37984376]{display:none}.uploader-flex-wrap[data-v-37984376]{flex-wrap:wrap}.uploader-items-center[data-v-37984376]{align-items:center}.uploader-justify-start[data-v-37984376]{justify-content:flex-start}.uploader-justify-center[data-v-37984376]{justify-content:center}.uploader-font-sans[data-v-37984376]{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"}.uploader-h-5[data-v-37984376]{height:1.25rem}.uploader-h-6[data-v-37984376]{height:1.5rem}.uploader-h-8[data-v-37984376]{height:2rem}.uploader-h-12[data-v-37984376]{height:3rem}.uploader-h-20[data-v-37984376]{height:5rem}.uploader-h-32[data-v-37984376]{height:8rem}.uploader-h-48[data-v-37984376]{height:12rem}.uploader-h-full[data-v-37984376]{height:100%}.uploader-h-300-px[data-v-37984376]{height:300px}.uploader-text-sm[data-v-37984376]{font-size:.875rem}.uploader-m-2[data-v-37984376]{margin:.5rem}.uploader-mx-2[data-v-37984376]{margin-left:.5rem;margin-right:.5rem}.uploader-mt-1[data-v-37984376]{margin-top:.25rem}.uploader-mb-4[data-v-37984376]{margin-bottom:1rem}.uploader-mt-10[data-v-37984376]{margin-top:2.5rem}.uploader-object-contain[data-v-37984376]{-o-object-fit:contain;object-fit:contain}.uploader-object-cover[data-v-37984376]{-o-object-fit:cover;object-fit:cover}.uploader-opacity-50[data-v-37984376]{opacity:.5}.uploader-opacity-75[data-v-37984376]{opacity:.75}.focus\\:uploader-outline-none[data-v-37984376]:focus{outline:2px solid transparent;outline-offset:2px}.uploader-overflow-auto[data-v-37984376]{overflow:auto}.uploader-overflow-hidden[data-v-37984376]{overflow:hidden}.uploader-p-1[data-v-37984376]{padding:.25rem}.uploader-p-8[data-v-37984376]{padding:2rem}.uploader-py-2[data-v-37984376]{padding-top:.5rem;padding-bottom:.5rem}.uploader-fixed[data-v-37984376]{position:fixed}.uploader-absolute[data-v-37984376]{position:absolute}.uploader-relative[data-v-37984376]{position:relative}.uploader-top-0[data-v-37984376]{top:0}.uploader-right-0[data-v-37984376]{right:0}.uploader-bottom-0[data-v-37984376]{bottom:0}.uploader-left-0[data-v-37984376]{left:0}.uploader-top-10[data-v-37984376]{top:10px}.uploader-right-10[data-v-37984376]{right:10px}.uploader-shadow-md[data-v-37984376]{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.uploader-shadow-2xl[data-v-37984376]{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.uploader-text-white[data-v-37984376]{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.uploader-text-gray-500[data-v-37984376]{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.uploader-text-gray-600[data-v-37984376]{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.uploader-text-red-600[data-v-37984376]{--text-opacity:1;color:#e53e3e;color:rgba(229,62,62,var(--text-opacity))}.uploader-w-5[data-v-37984376]{width:1.25rem}.uploader-w-6[data-v-37984376]{width:1.5rem}.uploader-w-8[data-v-37984376]{width:2rem}.uploader-w-12[data-v-37984376]{width:3rem}.uploader-w-20[data-v-37984376]{width:5rem}.uploader-w-32[data-v-37984376]{width:8rem}.uploader-w-full[data-v-37984376]{width:100%}.uploader-z-999999999[data-v-37984376]{z-index:999999999}@-webkit-keyframes spin-data-v-37984376{to{transform:rotate(360deg)}}@keyframes spin-data-v-37984376{to{transform:rotate(360deg)}}@-webkit-keyframes ping-data-v-37984376{100%,75%{transform:scale(2);opacity:0}}@keyframes ping-data-v-37984376{100%,75%{transform:scale(2);opacity:0}}@-webkit-keyframes pulse-data-v-37984376{50%{opacity:.5}}@keyframes pulse-data-v-37984376{50%{opacity:.5}}@-webkit-keyframes bounce-data-v-37984376{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce-data-v-37984376{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.uploader-animate-spin[data-v-37984376]{-webkit-animation:spin-data-v-37984376 1s linear infinite;animation:spin-data-v-37984376 1s linear infinite}@media (min-width:768px){.md\\:uploader-w-1\\/2[data-v-37984376]{width:50%}}", map: undefined, media: undefined }); 721 | 722 | }; 723 | /* scoped */ 724 | var __vue_scope_id__$1 = "data-v-37984376"; 725 | /* module identifier */ 726 | var __vue_module_identifier__$1 = undefined; 727 | /* functional template */ 728 | var __vue_is_functional_template__$1 = false; 729 | /* style inject SSR */ 730 | 731 | 732 | 733 | var preview = normalizeComponent_1( 734 | { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, 735 | __vue_inject_styles__$1, 736 | __vue_script__$1, 737 | __vue_scope_id__$1, 738 | __vue_is_functional_template__$1, 739 | __vue_module_identifier__$1, 740 | browser, 741 | undefined 742 | ); 743 | 744 | function install(Vue) { 745 | if (install.installed) { return; } 746 | install.installed = true; 747 | Vue.component("file-uploader", component); 748 | Vue.component("file-preview", preview); 749 | } 750 | 751 | var plugin = { 752 | install: install 753 | }; 754 | 755 | var GlobalVue = null; 756 | if (typeof window !== "undefined") { 757 | GlobalVue = window.Vue; 758 | } else if (typeof global !== "undefined") { 759 | GlobalVue = global.vue; 760 | } 761 | 762 | if (GlobalVue) { 763 | GlobalVue.use(plugin); 764 | } 765 | 766 | component.install = install; 767 | 768 | exports.default = component; 769 | 770 | Object.defineProperty(exports, '__esModule', { value: true }); 771 | 772 | }))); 773 | -------------------------------------------------------------------------------- /dist/img/attach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmed-aliraqi/laravel-file-uploader/36462cccf4a13e81c72007c5a962fe7095f92206/dist/img/attach.png -------------------------------------------------------------------------------- /dist/img/loading-100.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmed-aliraqi/laravel-file-uploader/36462cccf4a13e81c72007c5a962fe7095f92206/dist/img/loading-100.gif -------------------------------------------------------------------------------- /dist/uploader.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | -webkit-text-decoration: underline dotted; 89 | text-decoration: underline dotted; /* 2 */ 90 | } 91 | 92 | /** 93 | * Add the correct font weight in Chrome, Edge, and Safari. 94 | */ 95 | 96 | b, 97 | strong { 98 | font-weight: bolder; 99 | } 100 | 101 | /** 102 | * 1. Correct the inheritance and scaling of font size in all browsers. 103 | * 2. Correct the odd `em` font sizing in all browsers. 104 | */ 105 | 106 | code, 107 | kbd, 108 | samp { 109 | font-family: monospace, monospace; /* 1 */ 110 | font-size: 1em; /* 2 */ 111 | } 112 | 113 | /** 114 | * Add the correct font size in all browsers. 115 | */ 116 | 117 | small { 118 | font-size: 80%; 119 | } 120 | 121 | /** 122 | * Prevent `sub` and `sup` elements from affecting the line height in 123 | * all browsers. 124 | */ 125 | 126 | sub, 127 | sup { 128 | font-size: 75%; 129 | line-height: 0; 130 | position: relative; 131 | vertical-align: baseline; 132 | } 133 | 134 | sub { 135 | bottom: -0.25em; 136 | } 137 | 138 | sup { 139 | top: -0.5em; 140 | } 141 | 142 | /* Embedded content 143 | ========================================================================== */ 144 | 145 | /** 146 | * Remove the border on images inside links in IE 10. 147 | */ 148 | 149 | img { 150 | border-style: none; 151 | } 152 | 153 | /* Forms 154 | ========================================================================== */ 155 | 156 | /** 157 | * 1. Change the font styles in all browsers. 158 | * 2. Remove the margin in Firefox and Safari. 159 | */ 160 | 161 | button, 162 | input, 163 | optgroup, 164 | select, 165 | textarea { 166 | font-family: inherit; /* 1 */ 167 | font-size: 100%; /* 1 */ 168 | line-height: 1.15; /* 1 */ 169 | margin: 0; /* 2 */ 170 | } 171 | 172 | /** 173 | * Show the overflow in IE. 174 | * 1. Show the overflow in Edge. 175 | */ 176 | 177 | button, 178 | input { /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { /* 1 */ 189 | text-transform: none; 190 | } 191 | 192 | /** 193 | * Correct the inability to style clickable types in iOS and Safari. 194 | */ 195 | 196 | button, 197 | [type="button"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="submit"]::-moz-focus-inner { 209 | border-style: none; 210 | padding: 0; 211 | } 212 | 213 | /** 214 | * Restore the focus styles unset by the previous rule. 215 | */ 216 | 217 | button:-moz-focusring, 218 | [type="button"]:-moz-focusring, 219 | [type="submit"]:-moz-focusring { 220 | outline: 1px dotted ButtonText; 221 | } 222 | 223 | /** 224 | * Correct the padding in Firefox. 225 | */ 226 | 227 | fieldset { 228 | padding: 0.35em 0.75em 0.625em; 229 | } 230 | 231 | /** 232 | * 1. Correct the text wrapping in Edge and IE. 233 | * 2. Correct the color inheritance from `fieldset` elements in IE. 234 | * 3. Remove the padding so developers are not caught out when they zero out 235 | * `fieldset` elements in all browsers. 236 | */ 237 | 238 | legend { 239 | box-sizing: border-box; /* 1 */ 240 | color: inherit; /* 2 */ 241 | display: table; /* 1 */ 242 | max-width: 100%; /* 1 */ 243 | padding: 0; /* 3 */ 244 | white-space: normal; /* 1 */ 245 | } 246 | 247 | /** 248 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 249 | */ 250 | 251 | progress { 252 | vertical-align: baseline; 253 | } 254 | 255 | /** 256 | * Remove the default vertical scrollbar in IE 10+. 257 | */ 258 | 259 | textarea { 260 | overflow: auto; 261 | } 262 | 263 | /** 264 | * 1. Add the correct box sizing in IE 10. 265 | * 2. Remove the padding in IE 10. 266 | */ 267 | 268 | /** 269 | * Correct the cursor style of increment and decrement buttons in Chrome. 270 | */ 271 | 272 | /** 273 | * 1. Correct the odd appearance in Chrome and Safari. 274 | * 2. Correct the outline style in Safari. 275 | */ 276 | 277 | /** 278 | * Remove the inner padding in Chrome and Safari on macOS. 279 | */ 280 | 281 | /** 282 | * 1. Correct the inability to style clickable types in iOS and Safari. 283 | * 2. Change font properties to `inherit` in Safari. 284 | */ 285 | 286 | /* Interactive 287 | ========================================================================== */ 288 | 289 | /* 290 | * Add the correct display in Edge, IE 10+, and Firefox. 291 | */ 292 | 293 | details { 294 | display: block; 295 | } 296 | 297 | /* 298 | * Add the correct display in all browsers. 299 | */ 300 | 301 | summary { 302 | display: list-item; 303 | } 304 | 305 | /* Misc 306 | ========================================================================== */ 307 | 308 | /** 309 | * Add the correct display in IE 10+. 310 | */ 311 | 312 | template { 313 | display: none; 314 | } 315 | 316 | /** 317 | * Add the correct display in IE 10. 318 | */ 319 | 320 | [hidden] { 321 | display: none; 322 | } 323 | 324 | /** 325 | * Manually forked from SUIT CSS Base: https://github.com/suitcss/base 326 | * A thin layer on top of normalize.css that provides a starting point more 327 | * suitable for web applications. 328 | */ 329 | 330 | /** 331 | * Removes the default spacing and border for appropriate elements. 332 | */ 333 | 334 | blockquote, 335 | dl, 336 | dd, 337 | h1, 338 | h2, 339 | h3, 340 | h4, 341 | h5, 342 | h6, 343 | hr, 344 | figure, 345 | p, 346 | pre { 347 | margin: 0; 348 | } 349 | 350 | button { 351 | background-color: transparent; 352 | background-image: none; 353 | } 354 | 355 | /** 356 | * Work around a Firefox/IE bug where the transparent `button` background 357 | * results in a loss of the default `button` focus styles. 358 | */ 359 | 360 | button:focus { 361 | outline: 1px dotted; 362 | outline: 5px auto -webkit-focus-ring-color; 363 | } 364 | 365 | fieldset { 366 | margin: 0; 367 | padding: 0; 368 | } 369 | 370 | ol, 371 | ul { 372 | list-style: none; 373 | margin: 0; 374 | padding: 0; 375 | } 376 | 377 | /** 378 | * Tailwind custom reset styles 379 | */ 380 | 381 | /** 382 | * 1. Use the user's configured `sans` font-family (with Tailwind's default 383 | * sans-serif font stack as a fallback) as a sane default. 384 | * 2. Use Tailwind's default "normal" line-height so the user isn't forced 385 | * to override it to ensure consistency even when using the default theme. 386 | */ 387 | 388 | html { 389 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ 390 | line-height: 1.5; /* 2 */ 391 | } 392 | 393 | /** 394 | * 1. Prevent padding and border from affecting element width. 395 | * 396 | * We used to set this in the html element and inherit from 397 | * the parent element for everything else. This caused issues 398 | * in shadow-dom-enhanced elements like

where the content 399 | * is wrapped by a div with box-sizing set to `content-box`. 400 | * 401 | * https://github.com/mozdevs/cssremedy/issues/4 402 | * 403 | * 404 | * 2. Allow adding a border to an element by just adding a border-width. 405 | * 406 | * By default, the way the browser specifies that an element should have no 407 | * border is by setting it's border-style to `none` in the user-agent 408 | * stylesheet. 409 | * 410 | * In order to easily add borders to elements by just setting the `border-width` 411 | * property, we change the default border-style for all elements to `solid`, and 412 | * use border-width to hide them instead. This way our `border` utilities only 413 | * need to set the `border-width` property instead of the entire `border` 414 | * shorthand, making our border utilities much more straightforward to compose. 415 | * 416 | * https://github.com/tailwindcss/tailwindcss/pull/116 417 | */ 418 | 419 | *, 420 | ::before, 421 | ::after { 422 | box-sizing: border-box; /* 1 */ 423 | border-width: 0; /* 2 */ 424 | border-style: solid; /* 2 */ 425 | border-color: #e2e8f0; /* 2 */ 426 | } 427 | 428 | /* 429 | * Ensure horizontal rules are visible by default 430 | */ 431 | 432 | hr { 433 | border-top-width: 1px; 434 | } 435 | 436 | /** 437 | * Undo the `border-style: none` reset that Normalize applies to images so that 438 | * our `border-{width}` utilities have the expected effect. 439 | * 440 | * The Normalize reset is unnecessary for us since we default the border-width 441 | * to 0 on all elements. 442 | * 443 | * https://github.com/tailwindcss/tailwindcss/issues/362 444 | */ 445 | 446 | img { 447 | border-style: solid; 448 | } 449 | 450 | textarea { 451 | resize: vertical; 452 | } 453 | 454 | input::-moz-placeholder, textarea::-moz-placeholder { 455 | color: #a0aec0; 456 | } 457 | 458 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 459 | color: #a0aec0; 460 | } 461 | 462 | input::placeholder, 463 | textarea::placeholder { 464 | color: #a0aec0; 465 | } 466 | 467 | button { 468 | cursor: pointer; 469 | } 470 | 471 | table { 472 | border-collapse: collapse; 473 | } 474 | 475 | h1, 476 | h2, 477 | h3, 478 | h4, 479 | h5, 480 | h6 { 481 | font-size: inherit; 482 | font-weight: inherit; 483 | } 484 | 485 | /** 486 | * Reset links to optimize for opt-in styling instead of 487 | * opt-out. 488 | */ 489 | 490 | a { 491 | color: inherit; 492 | text-decoration: inherit; 493 | } 494 | 495 | /** 496 | * Reset form element properties that are easy to forget to 497 | * style explicitly so you don't inadvertently introduce 498 | * styles that deviate from your design system. These styles 499 | * supplement a partial reset that is already applied by 500 | * normalize.css. 501 | */ 502 | 503 | button, 504 | input, 505 | optgroup, 506 | select, 507 | textarea { 508 | padding: 0; 509 | line-height: inherit; 510 | color: inherit; 511 | } 512 | 513 | /** 514 | * Use the configured 'mono' font family for elements that 515 | * are expected to be rendered with a monospace font, falling 516 | * back to the system monospace stack if there is no configured 517 | * 'mono' font family. 518 | */ 519 | 520 | pre, 521 | code, 522 | kbd, 523 | samp { 524 | font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 525 | } 526 | 527 | /** 528 | * Make replaced elements `display: block` by default as that's 529 | * the behavior you want almost all of the time. Inspired by 530 | * CSS Remedy, with `svg` added as well. 531 | * 532 | * https://github.com/mozdevs/cssremedy/issues/14 533 | */ 534 | 535 | img, 536 | svg, 537 | video, 538 | canvas, 539 | audio, 540 | iframe, 541 | embed, 542 | object { 543 | display: block; 544 | vertical-align: middle; 545 | } 546 | 547 | /** 548 | * Constrain images and videos to the parent width and preserve 549 | * their instrinsic aspect ratio. 550 | * 551 | * https://github.com/mozdevs/cssremedy/issues/14 552 | */ 553 | 554 | img, 555 | video { 556 | max-width: 100%; 557 | height: auto; 558 | } 559 | 560 | .uploader-bg-black { 561 | --bg-opacity: 1; 562 | background-color: #000; 563 | background-color: rgba(0, 0, 0, var(--bg-opacity)); 564 | } 565 | 566 | .uploader-bg-white { 567 | --bg-opacity: 1; 568 | background-color: #fff; 569 | background-color: rgba(255, 255, 255, var(--bg-opacity)); 570 | } 571 | 572 | .uploader-bg-gray-600 { 573 | --bg-opacity: 1; 574 | background-color: #718096; 575 | background-color: rgba(113, 128, 150, var(--bg-opacity)); 576 | } 577 | 578 | .uploader-bg-gray-900 { 579 | --bg-opacity: 1; 580 | background-color: #1a202c; 581 | background-color: rgba(26, 32, 44, var(--bg-opacity)); 582 | } 583 | 584 | .uploader-bg-red-600 { 585 | --bg-opacity: 1; 586 | background-color: #e53e3e; 587 | background-color: rgba(229, 62, 62, var(--bg-opacity)); 588 | } 589 | 590 | .uploader-bg-green-600 { 591 | --bg-opacity: 1; 592 | background-color: #38a169; 593 | background-color: rgba(56, 161, 105, var(--bg-opacity)); 594 | } 595 | 596 | .hover\:uploader-bg-gray-100:hover { 597 | --bg-opacity: 1; 598 | background-color: #f7fafc; 599 | background-color: rgba(247, 250, 252, var(--bg-opacity)); 600 | } 601 | 602 | .hover\:uploader-bg-gray-800:hover { 603 | --bg-opacity: 1; 604 | background-color: #2d3748; 605 | background-color: rgba(45, 55, 72, var(--bg-opacity)); 606 | } 607 | 608 | .uploader-bg-opacity-50 { 609 | --bg-opacity: 0.5; 610 | } 611 | 612 | .uploader-border-gray-400 { 613 | --border-opacity: 1; 614 | border-color: #cbd5e0; 615 | border-color: rgba(203, 213, 224, var(--border-opacity)); 616 | } 617 | 618 | .uploader-border-gray-500 { 619 | --border-opacity: 1; 620 | border-color: #a0aec0; 621 | border-color: rgba(160, 174, 192, var(--border-opacity)); 622 | } 623 | 624 | .uploader-border-gray-600 { 625 | --border-opacity: 1; 626 | border-color: #718096; 627 | border-color: rgba(113, 128, 150, var(--border-opacity)); 628 | } 629 | 630 | .hover\:uploader-border-gray-600:hover { 631 | --border-opacity: 1; 632 | border-color: #718096; 633 | border-color: rgba(113, 128, 150, var(--border-opacity)); 634 | } 635 | 636 | .uploader-rounded-md { 637 | border-radius: 0.375rem; 638 | } 639 | 640 | .uploader-rounded-xl { 641 | border-radius: 0.75rem; 642 | } 643 | 644 | .uploader-rounded-t-lg { 645 | border-top-left-radius: 0.5rem; 646 | border-top-right-radius: 0.5rem; 647 | } 648 | 649 | .uploader-rounded-b-lg { 650 | border-bottom-right-radius: 0.5rem; 651 | border-bottom-left-radius: 0.5rem; 652 | } 653 | 654 | .uploader-border-dashed { 655 | border-style: dashed; 656 | } 657 | 658 | .uploader-border-2 { 659 | border-width: 2px; 660 | } 661 | 662 | .uploader-border { 663 | border-width: 1px; 664 | } 665 | 666 | .uploader-cursor-pointer { 667 | cursor: pointer; 668 | } 669 | 670 | .uploader-inline { 671 | display: inline; 672 | } 673 | 674 | .uploader-flex { 675 | display: flex; 676 | } 677 | 678 | .uploader-hidden { 679 | display: none; 680 | } 681 | 682 | .uploader-flex-wrap { 683 | flex-wrap: wrap; 684 | } 685 | 686 | .uploader-items-center { 687 | align-items: center; 688 | } 689 | 690 | .uploader-justify-start { 691 | justify-content: flex-start; 692 | } 693 | 694 | .uploader-justify-center { 695 | justify-content: center; 696 | } 697 | 698 | .uploader-font-sans { 699 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 700 | } 701 | 702 | .uploader-h-5 { 703 | height: 1.25rem; 704 | } 705 | 706 | .uploader-h-6 { 707 | height: 1.5rem; 708 | } 709 | 710 | .uploader-h-8 { 711 | height: 2rem; 712 | } 713 | 714 | .uploader-h-12 { 715 | height: 3rem; 716 | } 717 | 718 | .uploader-h-20 { 719 | height: 5rem; 720 | } 721 | 722 | .uploader-h-32 { 723 | height: 8rem; 724 | } 725 | 726 | .uploader-h-48 { 727 | height: 12rem; 728 | } 729 | 730 | .uploader-h-full { 731 | height: 100%; 732 | } 733 | 734 | .uploader-h-300-px { 735 | height: 300px; 736 | } 737 | 738 | .uploader-text-sm { 739 | font-size: 0.875rem; 740 | } 741 | 742 | .uploader-m-2 { 743 | margin: 0.5rem; 744 | } 745 | 746 | .uploader-mx-2 { 747 | margin-left: 0.5rem; 748 | margin-right: 0.5rem; 749 | } 750 | 751 | .uploader-mt-1 { 752 | margin-top: 0.25rem; 753 | } 754 | 755 | .uploader-mb-4 { 756 | margin-bottom: 1rem; 757 | } 758 | 759 | .uploader-mt-10 { 760 | margin-top: 2.5rem; 761 | } 762 | 763 | .uploader-object-contain { 764 | -o-object-fit: contain; 765 | object-fit: contain; 766 | } 767 | 768 | .uploader-object-cover { 769 | -o-object-fit: cover; 770 | object-fit: cover; 771 | } 772 | 773 | .uploader-opacity-50 { 774 | opacity: 0.5; 775 | } 776 | 777 | .uploader-opacity-75 { 778 | opacity: 0.75; 779 | } 780 | 781 | .focus\:uploader-outline-none:focus { 782 | outline: 2px solid transparent; 783 | outline-offset: 2px; 784 | } 785 | 786 | .uploader-overflow-auto { 787 | overflow: auto; 788 | } 789 | 790 | .uploader-overflow-hidden { 791 | overflow: hidden; 792 | } 793 | 794 | .uploader-p-1 { 795 | padding: 0.25rem; 796 | } 797 | 798 | .uploader-p-8 { 799 | padding: 2rem; 800 | } 801 | 802 | .uploader-py-2 { 803 | padding-top: 0.5rem; 804 | padding-bottom: 0.5rem; 805 | } 806 | 807 | .uploader-fixed { 808 | position: fixed; 809 | } 810 | 811 | .uploader-absolute { 812 | position: absolute; 813 | } 814 | 815 | .uploader-relative { 816 | position: relative; 817 | } 818 | 819 | .uploader-top-0 { 820 | top: 0; 821 | } 822 | 823 | .uploader-right-0 { 824 | right: 0; 825 | } 826 | 827 | .uploader-bottom-0 { 828 | bottom: 0; 829 | } 830 | 831 | .uploader-left-0 { 832 | left: 0; 833 | } 834 | 835 | .uploader-top-10 { 836 | top: 10px; 837 | } 838 | 839 | .uploader-right-10 { 840 | right: 10px; 841 | } 842 | 843 | .uploader-shadow-md { 844 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 845 | } 846 | 847 | .uploader-shadow-2xl { 848 | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 849 | } 850 | 851 | .uploader-text-white { 852 | --text-opacity: 1; 853 | color: #fff; 854 | color: rgba(255, 255, 255, var(--text-opacity)); 855 | } 856 | 857 | .uploader-text-gray-500 { 858 | --text-opacity: 1; 859 | color: #a0aec0; 860 | color: rgba(160, 174, 192, var(--text-opacity)); 861 | } 862 | 863 | .uploader-text-gray-600 { 864 | --text-opacity: 1; 865 | color: #718096; 866 | color: rgba(113, 128, 150, var(--text-opacity)); 867 | } 868 | 869 | .uploader-text-red-600 { 870 | --text-opacity: 1; 871 | color: #e53e3e; 872 | color: rgba(229, 62, 62, var(--text-opacity)); 873 | } 874 | 875 | .uploader-w-5 { 876 | width: 1.25rem; 877 | } 878 | 879 | .uploader-w-6 { 880 | width: 1.5rem; 881 | } 882 | 883 | .uploader-w-8 { 884 | width: 2rem; 885 | } 886 | 887 | .uploader-w-12 { 888 | width: 3rem; 889 | } 890 | 891 | .uploader-w-20 { 892 | width: 5rem; 893 | } 894 | 895 | .uploader-w-32 { 896 | width: 8rem; 897 | } 898 | 899 | .uploader-w-full { 900 | width: 100%; 901 | } 902 | 903 | .uploader-z-999999999 { 904 | z-index: 999999999; 905 | } 906 | 907 | @-webkit-keyframes spin { 908 | to { 909 | transform: rotate(360deg); 910 | } 911 | } 912 | 913 | @keyframes spin { 914 | to { 915 | transform: rotate(360deg); 916 | } 917 | } 918 | 919 | @-webkit-keyframes ping { 920 | 75%, 100% { 921 | transform: scale(2); 922 | opacity: 0; 923 | } 924 | } 925 | 926 | @keyframes ping { 927 | 75%, 100% { 928 | transform: scale(2); 929 | opacity: 0; 930 | } 931 | } 932 | 933 | @-webkit-keyframes pulse { 934 | 50% { 935 | opacity: .5; 936 | } 937 | } 938 | 939 | @keyframes pulse { 940 | 50% { 941 | opacity: .5; 942 | } 943 | } 944 | 945 | @-webkit-keyframes bounce { 946 | 0%, 100% { 947 | transform: translateY(-25%); 948 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 949 | animation-timing-function: cubic-bezier(0.8,0,1,1); 950 | } 951 | 952 | 50% { 953 | transform: none; 954 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 955 | animation-timing-function: cubic-bezier(0,0,0.2,1); 956 | } 957 | } 958 | 959 | @keyframes bounce { 960 | 0%, 100% { 961 | transform: translateY(-25%); 962 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 963 | animation-timing-function: cubic-bezier(0.8,0,1,1); 964 | } 965 | 966 | 50% { 967 | transform: none; 968 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 969 | animation-timing-function: cubic-bezier(0,0,0.2,1); 970 | } 971 | } 972 | 973 | .uploader-animate-spin { 974 | -webkit-animation: spin 1s linear infinite; 975 | animation: spin 1s linear infinite; 976 | } 977 | 978 | @media (min-width: 640px) { 979 | } 980 | 981 | @media (min-width: 768px) { 982 | .md\:uploader-w-1\/2 { 983 | width: 50%; 984 | } 985 | } 986 | 987 | @media (min-width: 1024px) { 988 | } 989 | 990 | @media (min-width: 1280px) { 991 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laravel-file-uploader", 3 | "version": "2.3.0", 4 | "description": "This plugin used to upload files using laravel-media-library", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/ahmed-aliraqi/laravel-file-uploader.git" 8 | }, 9 | "keywords": [ 10 | "laravel", 11 | "media", 12 | "files", 13 | "upload" 14 | ], 15 | "author": "Ahmed Fathy ", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/ahmed-aliraqi/laravel-file-uploader/issues" 19 | }, 20 | "homepage": "https://github.com/ahmed-aliraqi/laravel-file-uploader#readme", 21 | "main": "dist/file-uploader.umd.js", 22 | "module": "dist/file-uploader.esm.js", 23 | "unpkg": "dist/file-uploader.min.js", 24 | "browser": { 25 | "./sfc": "src/file-uploader.vue" 26 | }, 27 | "files": [ 28 | "dist/*", 29 | "src/*", 30 | "attributes.json", 31 | "tags.json" 32 | ], 33 | "vetur": { 34 | "tags": "tags.json", 35 | "attributes": "attributes.json" 36 | }, 37 | "scripts": { 38 | "build": "npm run build:tailwind && npm run build:unpkg && npm run build:es && npm run build:umd", 39 | "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/file-uploader.umd.js", 40 | "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/file-uploader.esm.js", 41 | "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/file-uploader.min.js", 42 | "build:tailwind": "npx tailwindcss build ./src/css/uploader.css -o ./dist/uploader.css" 43 | }, 44 | "devDependencies": { 45 | "cross-env": "^5.2.0", 46 | "rollup": "^1.14.4", 47 | "rollup-plugin-buble": "^0.19.6", 48 | "rollup-plugin-commonjs": "^9.3.4", 49 | "rollup-plugin-replace": "^2.2.0", 50 | "rollup-plugin-vue": "^4.7.2", 51 | "tailwindcss": "^1.9.6", 52 | "vue": "^2.6.10", 53 | "vue-template-compiler": "^2.6.10" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /screenshots/uploader-v2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmed-aliraqi/laravel-file-uploader/36462cccf4a13e81c72007c5a962fe7095f92206/screenshots/uploader-v2.gif -------------------------------------------------------------------------------- /src/css/uploader.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; -------------------------------------------------------------------------------- /src/entry.js: -------------------------------------------------------------------------------- 1 | 2 | import component from "./file-uploader.vue"; 3 | import preview from "./file-preview.vue"; 4 | 5 | function install(Vue) { 6 | if (install.installed) return; 7 | install.installed = true; 8 | Vue.component("file-uploader", component); 9 | Vue.component("file-preview", preview); 10 | } 11 | 12 | const plugin = { 13 | install 14 | }; 15 | 16 | let GlobalVue = null; 17 | if (typeof window !== "undefined") { 18 | GlobalVue = window.Vue; 19 | } else if (typeof global !== "undefined") { 20 | GlobalVue = global.vue; 21 | } 22 | 23 | if (GlobalVue) { 24 | GlobalVue.use(plugin); 25 | } 26 | 27 | component.install = install; 28 | 29 | export default component; -------------------------------------------------------------------------------- /src/file-preview.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 88 | -------------------------------------------------------------------------------- /src/file-uploader.vue: -------------------------------------------------------------------------------- 1 | 143 | 144 | 438 | 439 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | prefix: 'uploader-', 3 | future: { 4 | purgeLayersByDefault: true, 5 | }, 6 | purge: { 7 | enabled: true, 8 | layers: ['utilities', 'components', 'base'], 9 | content: ['./src/file-uploader.vue'], 10 | }, 11 | theme: { 12 | inset: { 13 | '0': '0', 14 | '10': '10px', 15 | }, 16 | zIndex: { 17 | '999999999': 999999999, 18 | }, 19 | extend: { 20 | height: { 21 | '300-px': '300px', 22 | '200-px': '200px', 23 | } 24 | }, 25 | }, 26 | variants: {}, 27 | plugins: [], 28 | } 29 | --------------------------------------------------------------------------------