44 * See COPYING.txt for license details.
55 */
66
7+ /* eslint-disable no-undef */
8+
79/**
810 * @api
911 */
@@ -15,11 +17,11 @@ define([
1517 'Magento_Ui/js/modal/alert' ,
1618 'Magento_Ui/js/form/element/file-uploader' ,
1719 'mage/translate' ,
18- 'jquery/file-uploader '
20+ 'jquery/uppy-core '
1921] , function ( $ , mageTemplate , alert , FileUploader ) {
2022 'use strict' ;
2123
22- var fileUploader = new FileUploader ( {
24+ let fileUploader = new FileUploader ( {
2325 dataScope : '' ,
2426 isMultipleFiles : true
2527 } ) ;
@@ -33,113 +35,149 @@ define([
3335 * @private
3436 */
3537 _create : function ( ) {
36- var self = this ,
38+ let self = this ,
39+ arrayFromObj = Array . from ,
3740 progressTmpl = mageTemplate ( '[data-template="uploader"]' ) ,
38- isResizeEnabled = this . options . isResizeEnabled ,
39- resizeConfiguration = {
40- action : 'resizeImage' ,
41- maxWidth : this . options . maxWidth ,
42- maxHeight : this . options . maxHeight
41+ uploaderElement = '#fileUploader' ,
42+ targetElement = this . element . find ( '.fileinput-button.form-buttons' ) [ 0 ] ,
43+ uploadUrl = $ ( uploaderElement ) . attr ( 'data-url' ) ,
44+ fileId = null ,
45+ allowedExt = [ 'jpeg' , 'jpg' , 'png' , 'gif' ] ,
46+ allowedResize = false ,
47+ options = {
48+ proudlyDisplayPoweredByUppy : false ,
49+ target : targetElement ,
50+ hideUploadButton : true ,
51+ hideRetryButton : true ,
52+ hideCancelButton : true ,
53+ inline : true ,
54+ debug :true ,
55+ showRemoveButtonAfterComplete : true ,
56+ showProgressDetails : false ,
57+ showSelectedFiles : false ,
58+ hideProgressAfterFinish : true
4359 } ;
4460
45- if ( ! isResizeEnabled ) {
46- resizeConfiguration = {
47- action : 'resizeImage'
48- } ;
49- }
61+ $ ( document ) . on ( 'click' , uploaderElement , function ( ) {
62+ $ ( uploaderElement ) . closest ( '.fileinput-button.form-buttons' )
63+ . find ( '.uppy-Dashboard-browse' ) . trigger ( 'click' ) ;
64+ } ) ;
5065
51- this . element . find ( 'input[type=file]' ) . fileupload ( {
52- dataType : 'json' ,
53- formData : {
54- 'form_key' : window . FORM_KEY
55- } ,
56- dropZone : this . element . find ( 'input[type=file]' ) . closest ( '[role="dialog"]' ) ,
57- sequentialUploads : true ,
58- acceptFileTypes : / ( \. | \/ ) ( g i f | j p e ? g | p n g ) $ / i,
59- maxFileSize : this . options . maxFileSize ,
60-
61- /**
62- * @param {Object } e
63- * @param {Object } data
64- */
65- add : function ( e , data ) {
66- var fileSize ,
66+ const uppy = new Uppy . Uppy ( {
67+ autoProceed : true ,
68+
69+ onBeforeFileAdded : ( currentFile ) => {
70+ let fileSize ,
6771 tmpl ;
6872
69- $ . each ( data . files , function ( index , file ) {
70- fileSize = typeof file . size == 'undefined' ?
71- $ . mage . __ ( 'We could not detect a size.' ) :
72- byteConvert ( file . size ) ;
73+ fileSize = typeof currentFile . size == 'undefined' ?
74+ $ . mage . __ ( 'We could not detect a size.' ) :
75+ byteConvert ( currentFile . size ) ;
7376
74- data . fileId = Math . random ( ) . toString ( 33 ) . substr ( 2 , 18 ) ;
77+ // check if file is allowed to upload and resize
78+ allowedResize = $ . inArray ( currentFile . extension , allowedExt ) !== - 1 ;
7579
76- tmpl = progressTmpl ( {
77- data : {
78- name : file . name ,
79- size : fileSize ,
80- id : data . fileId
81- }
82- } ) ;
80+ if ( ! allowedResize ) {
81+ fileUploader . aggregateError ( currentFile . name ,
82+ $ . mage . __ ( 'Disallowed file type.' ) ) ;
83+ fileUploader . onLoadingStop ( ) ;
84+ return false ;
85+ }
8386
84- $ ( tmpl ) . appendTo ( self . element ) ;
85- } ) ;
87+ fileId = Math . random ( ) . toString ( 33 ) . substr ( 2 , 18 ) ;
8688
87- $ ( this ) . fileupload ( 'process' , data ) . done ( function ( ) {
88- data . submit ( ) ;
89+ tmpl = progressTmpl ( {
90+ data : {
91+ name : currentFile . name ,
92+ size : fileSize ,
93+ id : fileId
94+ }
8995 } ) ;
96+
97+ // code to allow duplicate files from same folder
98+ const modifiedFile = {
99+ ...currentFile ,
100+ id : currentFile . id + '-' + fileId ,
101+ tempFileId : fileId
102+ } ;
103+
104+ $ ( tmpl ) . appendTo ( self . element ) ;
105+ return modifiedFile ;
90106 } ,
91107
92- /**
93- * @param {Object } e
94- * @param {Object } data
95- */
96- done : function ( e , data ) {
97- if ( data . result && ! data . result . error ) {
98- self . element . trigger ( 'addItem' , data . result ) ;
99- } else {
100- fileUploader . aggregateError ( data . files [ 0 ] . name , data . result . error ) ;
108+ meta : {
109+ 'form_key' : window . FORM_KEY ,
110+ isAjax : true
111+ }
112+ } ) ;
113+
114+ // initialize Uppy upload
115+ uppy . use ( Uppy . Dashboard , options ) ;
116+
117+ // Resize Image as per configuration
118+ if ( this . options . isResizeEnabled ) {
119+ uppy . use ( Uppy . Compressor , {
120+ maxWidth : this . options . maxWidth ,
121+ maxHeight : this . options . maxHeight ,
122+ quality : 0.92 ,
123+ beforeDraw ( ) {
124+ if ( ! allowedResize ) {
125+ this . abort ( ) ;
126+ }
101127 }
128+ } ) ;
129+ }
102130
103- self . element . find ( '#' + data . fileId ) . remove ( ) ;
131+ // drop area for file upload
132+ uppy . use ( Uppy . DropTarget , {
133+ target : targetElement ,
134+ onDragOver : ( ) => {
135+ // override Array.from method of legacy-build.min.js file
136+ Array . from = null ;
104137 } ,
138+ onDragLeave : ( ) => {
139+ Array . from = arrayFromObj ;
140+ }
141+ } ) ;
105142
106- /**
107- * @param {Object } e
108- * @param {Object } data
109- */
110- progress : function ( e , data ) {
111- var progress = parseInt ( data . loaded / data . total * 100 , 10 ) ,
112- progressSelector = '#' + data . fileId + ' .progressbar-container .progressbar' ;
143+ // upload files on server
144+ uppy . use ( Uppy . XHRUpload , {
145+ endpoint : uploadUrl ,
146+ fieldName : 'image'
147+ } ) ;
113148
114- self . element . find ( progressSelector ) . css ( 'width' , progress + '%' ) ;
115- } ,
149+ uppy . on ( 'upload-success' , ( file , response ) => {
150+ if ( response . body && ! response . body . error ) {
151+ self . element . trigger ( 'addItem' , response . body ) ;
152+ } else {
153+ fileUploader . aggregateError ( file . name , response . body . error ) ;
154+ }
116155
117- /**
118- * @param {Object } e
119- * @param {Object } data
120- */
121- fail : function ( e , data ) {
122- var progressSelector = '#' + data . fileId ;
123-
124- self . element . find ( progressSelector ) . removeClass ( 'upload-progress' ) . addClass ( 'upload-failure' )
125- . delay ( 2000 )
126- . hide ( 'highlight' )
127- . remove ( ) ;
128- } ,
156+ self . element . find ( '#' + file . tempFileId ) . remove ( ) ;
157+ } ) ;
129158
130- stop : fileUploader . uploaderConfig . stop
159+ uppy . on ( 'upload-progress' , ( file , progress ) => {
160+ let progressWidth = parseInt ( progress . bytesUploaded / progress . bytesTotal * 100 , 10 ) ,
161+ progressSelector = '#' + file . tempFileId + ' .progressbar-container .progressbar' ;
162+
163+ self . element . find ( progressSelector ) . css ( 'width' , progressWidth + '%' ) ;
131164 } ) ;
132165
133- this . element . find ( 'input[type=file]' ) . fileupload ( 'option' , {
134- processQueue : [ {
135- action : 'loadImage' ,
136- fileTypes : / ^ i m a g e \/ ( g i f | j p e g | p n g ) $ /
137- } ,
138- resizeConfiguration ,
139- {
140- action : 'saveImage'
141- } ]
166+ uppy . on ( 'upload-error' , ( error , file ) => {
167+ let progressSelector = '#' + file . tempFileId ;
168+
169+ self . element . find ( progressSelector ) . removeClass ( 'upload-progress' ) . addClass ( 'upload-failure' )
170+ . delay ( 2000 )
171+ . hide ( 'highlight' )
172+ . remove ( ) ;
142173 } ) ;
174+
175+ uppy . on ( 'complete' , ( ) => {
176+ fileUploader . uploaderConfig . stop ( ) ;
177+ $ ( window ) . trigger ( 'reload.MediaGallery' ) ;
178+ Array . from = arrayFromObj ;
179+ } ) ;
180+
143181 }
144182 } ) ;
145183
0 commit comments