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,142 @@ 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 ,
67- tmpl ;
66+ const uppy = new Uppy . Uppy ( {
67+ autoProceed : true ,
6868
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 ) ;
69+ onBeforeFileAdded : ( currentFile ) => {
70+ let fileSize ,
71+ tmpl ;
7372
74- data . fileId = Math . random ( ) . toString ( 33 ) . substr ( 2 , 18 ) ;
73+ fileSize = typeof currentFile . size == 'undefined' ?
74+ $ . mage . __ ( 'We could not detect a size.' ) :
75+ byteConvert ( currentFile . size ) ;
7576
76- tmpl = progressTmpl ( {
77- data : {
78- name : file . name ,
79- size : fileSize ,
80- id : data . fileId
81- }
82- } ) ;
77+ fileId = Math . random ( ) . toString ( 33 ) . substr ( 2 , 18 ) ;
8378
84- $ ( tmpl ) . appendTo ( self . element ) ;
79+ tmpl = progressTmpl ( {
80+ data : {
81+ name : currentFile . name ,
82+ size : fileSize ,
83+ id : fileId
84+ }
8585 } ) ;
8686
87- $ ( this ) . fileupload ( 'process' , data ) . done ( function ( ) {
88- data . submit ( ) ;
89- } ) ;
87+ // code to allow duplicate files from same folder
88+ const modifiedFile = {
89+ ...currentFile ,
90+ id : currentFile . id + '-' + fileId ,
91+ tempFileId : fileId
92+ } ;
93+
94+ // check if resize allowed for file extension
95+ allowedResize = $ . inArray ( currentFile . extension , allowedExt ) !== - 1 ;
96+
97+ $ ( tmpl ) . appendTo ( self . element ) ;
98+ return modifiedFile ;
9099 } ,
91100
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 ) ;
101+ meta : {
102+ 'form_key' : window . FORM_KEY ,
103+ isAjax : true
104+ }
105+ } ) ;
106+
107+ // initialize Uppy upload
108+ uppy . use ( Uppy . Dashboard , options ) ;
109+
110+ // Resize Image as per configuration
111+ if ( this . options . isResizeEnabled ) {
112+ uppy . use ( Uppy . Compressor , {
113+ maxWidth : this . options . maxWidth ,
114+ maxHeight : this . options . maxHeight ,
115+ quality : 0.92 ,
116+ beforeDraw ( ) {
117+ if ( ! allowedResize ) {
118+ this . abort ( ) ;
119+ }
101120 }
121+ } ) ;
122+ }
102123
103- self . element . find ( '#' + data . fileId ) . remove ( ) ;
124+ // drop area for file upload
125+ uppy . use ( Uppy . DropTarget , {
126+ target : targetElement ,
127+ onDragOver : ( ) => {
128+ // override Array.from method of legacy-build.min.js file
129+ Array . from = null ;
104130 } ,
131+ onDragLeave : ( ) => {
132+ Array . from = arrayFromObj ;
133+ }
134+ } ) ;
105135
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' ;
136+ // upload files on server
137+ uppy . use ( Uppy . XHRUpload , {
138+ endpoint : uploadUrl ,
139+ fieldName : 'image'
140+ } ) ;
113141
114- self . element . find ( progressSelector ) . css ( 'width' , progress + '%' ) ;
115- } ,
142+ uppy . on ( 'upload-success' , ( file , response ) => {
143+ if ( response . body && ! response . body . error ) {
144+ self . element . trigger ( 'addItem' , response . body ) ;
145+ } else {
146+ fileUploader . aggregateError ( file . name , response . body . error ) ;
147+ }
116148
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- } ,
149+ self . element . find ( '#' + file . tempFileId ) . remove ( ) ;
150+ } ) ;
129151
130- stop : fileUploader . uploaderConfig . stop
152+ uppy . on ( 'upload-progress' , ( file , progress ) => {
153+ let progressWidth = parseInt ( progress . bytesUploaded / progress . bytesTotal * 100 , 10 ) ,
154+ progressSelector = '#' + file . tempFileId + ' .progressbar-container .progressbar' ;
155+
156+ self . element . find ( progressSelector ) . css ( 'width' , progressWidth + '%' ) ;
131157 } ) ;
132158
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- } ]
159+ uppy . on ( 'upload-error' , ( error , file ) => {
160+ let progressSelector = '#' + file . tempFileId ;
161+
162+ self . element . find ( progressSelector ) . removeClass ( 'upload-progress' ) . addClass ( 'upload-failure' )
163+ . delay ( 2000 )
164+ . hide ( 'highlight' )
165+ . remove ( ) ;
142166 } ) ;
167+
168+ uppy . on ( 'complete' , ( ) => {
169+ fileUploader . uploaderConfig . stop ( ) ;
170+ $ ( window ) . trigger ( 'reload.MediaGallery' ) ;
171+ Array . from = arrayFromObj ;
172+ } ) ;
173+
143174 }
144175 } ) ;
145176
0 commit comments