11<template >
2- <input type =" file" name =" fileInput" id =" fileInput" @change =" uploadFile() " ref =" fileInput" :multiple =" multiple" ><br >
2+ <input type =" file" name =" fileInput" id =" fileInput" @change =" uploadFile" ref =" fileInput" :multiple =" multiple" ><br >
33 <progress ref =" progressBar" style =" width : 100% " :value =" imagesProgress" max =" 100" ></progress >
44</template >
55
@@ -16,18 +16,22 @@ export default {
1616 props: [' onUpload-success' , ' onUpload-error' , ' purpose' ],
1717 setup (props , { emit }) { // , { emit }) {
1818 /* View Methods */
19- const uploadFile = () => {
20- for (var i = 0 ; i < v .fileInput .files .length ; i++ ) {
21- var file = v .fileInput .files [i]
19+ const uploadFile = (e ) => {
20+ emit (' upload-error' , null ) // clear previous errors
21+
22+ let files = e .target .files || e .dataTransfer .files
23+ let images = []
24+ for (var i = 0 ; i < files .length ; i++ ) {
25+ let file = files[i]
2226 if (! file .type .match (/ image. * / )) continue
23- v . images .push (file)
27+ images .push (file)
2428 }
2529 console .log (props .purpose )
26- if (props .purpose === ' avatar' || props .purpose === ' logo' || props .purpose === ' favicon' ) { v . images = [v . images [0 ]] }
30+ if (props .purpose === ' avatar' || props .purpose === ' logo' || props .purpose === ' favicon' ) { images = [images[0 ]] }
2731
28- console .log (v . images )
32+ console .log (images)
2933
30- if (v . images .length > 0 ) {
34+ if (images .length > 0 ) {
3135 // if (v.fileInput.files.length > 10) {
3236 // return $timeout(function() { Alert.error('Error: Exceeded 10 images.'); });
3337 // }
@@ -49,7 +53,7 @@ export default {
4953 * url: {string} The url where the image is hosted (upon upload completion)
5054 */
5155 // prep each image
52- v . images .forEach (fsImage => {
56+ images .forEach (fsImage => {
5357 let image = {
5458 name: fsImage .name ,
5559 file: fsImage,
@@ -103,25 +107,27 @@ export default {
103107 if (err .status === 429 ) { message += ' Exceeded 10 images in batch upload.' }
104108 else { message += ' Error: ' + err .message }
105109 // Alert.error(message);
106- emit (' upload-error' , message)
107-
110+ handleError (message)
108111 }))
109112 .finally (() => index++ )
110113 })
111114 .then (function () {
112115 // log error images after all uploads finish
113116 if (errImages .length ) {
114- emit ( ' upload-error ' , v .warningMsg )
117+ handleError ( v .warningMsg )
115118 // TODO(akinsey) return $timeout(function() { Alert.warning(warningMsg); })
116119 }
117120 })
118121 })
119- .catch (() => {
120- emit (' upload-error' , v .warningMsg )
121- })
122+ .catch (() => handleError (v .warningMsg ))
122123 }
123124 }
124125
126+ const handleError = msg => {
127+ v .currentImages = []
128+ emit (' upload-error' , msg)
129+ }
130+
125131 // update loading status
126132 function updateImagesUploading (index , percent , url ) {
127133 // on successful update
0 commit comments