Skip to content

Commit e830fef

Browse files
rowanwinsrowanwins
committed
commit some stuff before i lose my laptop
1 parent 2bb9358 commit e830fef

File tree

2 files changed

+157
-147
lines changed

2 files changed

+157
-147
lines changed

‎src/App.vue‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@
33
<p>
44
Welcome to your Vue.js app with dropzone!
55
</p>
6-
<dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="success"></dropzone>
6+
<div v-if="ok">
7+
<dropzone ref="myVueDropzone" id="dropzone" url="https://httpbin.org/post"
8+
v-on:vdropzone-success="showSuccess"
9+
v-bind:dropzone-options="dropzoneOptions"
10+
v-bind:use-custom-dropzone-options="true">
11+
</dropzone>
12+
</div>
13+
<button v-on:click="process">process</button>
714
</div>
815
</template>
916

@@ -16,20 +23,19 @@
1623
},
1724
data () {
1825
return {
19-
processQueue: false,
20-
fa: true,
26+
ok: true,
27+
dropzoneOptions: {autoProcessQueue: false}
2128
}
2229
},
2330
methods: {
24-
'success': function (file) {
25-
console.log('A file was successfully uploaded')
31+
'showSuccess': function (file) {
32+
console.log('im added')
33+
console.log(this.$refs.myVueDropzone)
2634
},
2735
'process': function () {
28-
var newArr = this.$children.filter(function(item){
29-
return item.id === "myVueDropzone";
30-
});
31-
var component = newArr[0];
32-
component.processQueue()
36+
console.log(this.$refs.myVueDropzone)
37+
// this.$refs.myVueDropzone.setOption('maxFiles', this.$refs.myVueDropzone.dropzone.options.maxFiles + 1)
38+
console.log(this.$refs.myVueDropzone.dropzone.options.maxFiles)
3339
}
3440
}
3541
}

‎src/index.vue‎

Lines changed: 141 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88

99
<script>
1010
11-
export default {
12-
props: {
11+
export default {
12+
props: {
1313
id: {
1414
type: String,
1515
required: true
@@ -62,7 +62,7 @@
6262
},
6363
language: {
6464
type: Object,
65-
default: {}
65+
default: function () { return {} }
6666
},
6767
useCustomDropzoneOptions: {
6868
type: Boolean,
@@ -73,44 +73,48 @@
7373
}
7474
},
7575
methods: {
76-
manuallyAddFile: function (file, fileUrl, callback, crossOrigin) {
77-
var should_add_remove_links = this.dropzone.options['addRemoveLinks']; //Backup user choice
78-
this.dropzone.options['addRemoveLinks'] = false; //make it temprory false
79-
this.dropzone.emit("addedfile", file);
80-
this.dropzone.emit("thumbnail", file, fileUrl);
81-
this.dropzone.createThumbnailFromUrl(file, fileUrl, callback, crossOrigin);
82-
this.dropzone.emit("complete", file);
83-
this.$emit('vdropzone-file-added-manually', file)
84-
this.dropzone.options['maxFiles'] = this.dropzone.options['maxFiles'] - 1;
85-
this.dropzone.options['addRemoveLinks'] = should_add_remove_links; //restore user choice
86-
},
87-
setOption: function (option, value) {
88-
this.dropzone.options[option] = value
89-
},
90-
removeAllFiles: function () {
91-
this.dropzone.removeAllFiles(true)
92-
},
93-
processQueue: function () {
94-
this.dropzone.processQueue()
95-
},
96-
removeFile: function (file) {
97-
this.dropzone.removeFile(file)
98-
},
99-
getAcceptedFiles: function () {
100-
return this.dropzone.getAcceptedFiles();
101-
},
102-
getRejectedFiles: function () {
103-
return this.dropzone.getRejectedFiles();
104-
},
105-
getUploadingFiles:function () {
106-
return this.dropzone.getUploadingFiles();
76+
manuallyAddFile: function (file, fileUrl, callback, crossOrigin) {
77+
this.dropzone.emit("addedfile", file);
78+
this.dropzone.emit("thumbnail", file, fileUrl);
79+
this.dropzone.createThumbnailFromUrl(file, fileUrl, callback, crossOrigin);
80+
this.dropzone.emit("complete", file);
81+
this.$emit('vdropzone-file-added-manually', file)
82+
this.dropzone.options['maxFiles'] = this.dropzone.options['maxFiles'] - 1;
83+
},
84+
setOption: function (option, value) {
85+
this.dropzone.options[option] = value
86+
},
87+
removeAllFiles: function () {
88+
this.dropzone.removeAllFiles(true)
89+
},
90+
processQueue: function () {
91+
var dropzoneEle = this.dropzone
92+
this.dropzone.processQueue()
93+
this.dropzone.on("success", function() {
94+
dropzoneEle.options.autoProcessQueue = true
95+
})
96+
this.dropzone.on('queuecomplete', function() {
97+
dropzoneEle.options.autoProcessQueue = false
98+
})
99+
},
100+
removeFile: function (file) {
101+
this.dropzone.removeFile(file)
102+
},
103+
getAcceptedFiles: function () {
104+
return this.dropzone.getAcceptedFiles();
105+
},
106+
getRejectedFiles: function () {
107+
return this.dropzone.getRejectedFiles();
108+
},
109+
getUploadingFiles:function () {
110+
return this.dropzone.getUploadingFiles();
111+
},
112+
getQueuedFiles:function () {
113+
return this.dropzone.getQueuedFiles();
114+
}
107115
},
108-
getQueuedFiles:function () {
109-
return this.dropzone.getQueuedFiles();
110-
}
111-
},
112-
computed: {
113-
languageSettings(){
116+
computed: {
117+
languageSettings () {
114118
var defaultValues = {
115119
dictDefaultMessage: '<br>Drop files here to upload',
116120
dictCancelUpload: 'Cancel upload',
@@ -122,122 +126,122 @@ computed: {
122126
dictMaxFilesExceeded: 'You can not upload any more files. (max: {{maxFiles}})',
123127
dictRemoveFile: 'Remove',
124128
dictRemoveFileConfirmation: null,
125-
dictResponseError: 'Server responded with {{statusCode}} code.',
129+
dictResponseError: 'Server responded with {{statusCode}} code.'
130+
}
131+
for (var attrname in this.language) {
132+
defaultValues[attrname] = this.language[attrname]
133+
}
134+
return defaultValues
135+
},
136+
cloudIcon: function () {
137+
if (this.useFontAwesome) {
138+
return '<i class="fa fa-cloud-upload"></i>'
139+
} else {
140+
return '<i class="material-icons">cloud_upload</i>'
141+
}
142+
},
143+
doneIcon: function () {
144+
if (this.useFontAwesome) {
145+
return '<i class="fa fa-check"></i>'
146+
} else {
147+
return ' <i class="material-icons">done</i>'
148+
}
149+
},
150+
errorIcon: function () {
151+
if (this.useFontAwesome) {
152+
return '<i class="fa fa-close"></i>'
153+
} else {
154+
return ' <i class="material-icons">error</i>'
126155
}
127-
128-
for (var attrname in this.language) { defaultValues[attrname] = this.language[attrname]; }
129-
return defaultValues;
130-
},
131-
132-
cloudIcon: function () {
133-
if (this.useFontAwesome) {
134-
return '<i class="fa fa-cloud-upload"></i>'
135-
} else {
136-
return '<i class="material-icons">cloud_upload</i>'
137156
}
138157
},
139-
doneIcon: function () {
140-
if (this.useFontAwesome) {
141-
return '<i class="fa fa-check"></i>'
142-
} else {
143-
return ' <i class="material-icons">done</i>'
158+
mounted () {
159+
if (this.$isServer) {
160+
return
144161
}
145-
},
146-
errorIcon: function () {
147-
if (this.useFontAwesome) {
148-
return '<i class="fa fa-close"></i>'
162+
var Dropzone = require('dropzone')
163+
Dropzone.autoDiscover = false
164+
var element = document.getElementById(this.id)
165+
if (!this.useCustomDropzoneOptions) {
166+
this.dropzone = new Dropzone(element, {
167+
clickable: this.clickable,
168+
paramName: this.paramName,
169+
thumbnailWidth: this.thumbnailWidth,
170+
thumbnailHeight: this.thumbnailHeight,
171+
maxFiles: this.maxNumberOfFiles,
172+
maxFilesize: this.maxFileSizeInMB,
173+
addRemoveLinks: this.showRemoveLink,
174+
acceptedFiles: this.acceptedFileTypes,
175+
autoProcessQueue: this.autoProcessQueue,
176+
headers: this.headers,
177+
previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px"><img data-dz-thumbnail /></div> <div class="dz-details"> <div class="dz-size"><span data-dz-size></span></div> <div class="dz-filename"><span data-dz-name></span></div> </div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark">' + this.doneIcon + ' </div> <div class="dz-error-mark">' + this.errorIcon + '</div></div>',
178+
dictDefaultMessage: this.cloudIcon + this.languageSettings.dictDefaultMessage,
179+
dictCancelUpload: this.languageSettings.dictCancelUpload,
180+
dictCancelUploadConfirmation: this.languageSettings.dictCancelUploadConfirmation,
181+
dictFallbackMessage: this.languageSettings.dictFallbackMessage,
182+
dictFallbackText: this.languageSettings.dictFallbackText,
183+
dictFileTooBig: this.languageSettings.dictFileTooBig,
184+
dictInvalidFileType: this.languageSettings.dictInvalidFileType,
185+
dictMaxFilesExceeded: this.languageSettings.dictMaxFilesExceeded,
186+
dictRemoveFile: this.languageSettings.dictRemoveFile,
187+
dictRemoveFileConfirmation: this.languageSettings.dictRemoveFileConfirmation,
188+
dictResponseError: this.languageSettings.dictResponseError
189+
})
149190
} else {
150-
return ' <i class="material-icons">error</i>'
191+
this.dropzone = new Dropzone(element, this.dropzoneOptions)
151192
}
152-
}
153-
},
154-
mounted () {
155-
if (this.$isServer) {
156-
return
157-
}
158-
var Dropzone = require('dropzone')
159-
Dropzone.autoDiscover = false
160-
var element = document.getElementById(this.id)
161-
if (!this.useCustomDropzoneOptions) {
162-
this.dropzone = new Dropzone(element, {
163-
clickable: this.clickable,
164-
paramName: this.paramName,
165-
thumbnailWidth: this.thumbnailWidth,
166-
thumbnailHeight: this.thumbnailHeight,
167-
maxFiles: this.maxNumberOfFiles,
168-
maxFilesize: this.maxFileSizeInMB,
169-
addRemoveLinks: this.showRemoveLink,
170-
acceptedFiles: this.acceptedFileTypes,
171-
autoProcessQueue: this.autoProcessQueue,
172-
headers: this.headers,
173-
previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px"><img data-dz-thumbnail /></div> <div class="dz-details"> <div class="dz-size"><span data-dz-size></span></div> <div class="dz-filename"><span data-dz-name></span></div> </div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark">' + this.doneIcon + ' </div> <div class="dz-error-mark">' + this.errorIcon + '</div></div>',
174-
dictDefaultMessage: this.cloudIcon + this.languageSettings.dictDefaultMessage,
175-
dictCancelUpload: this.languageSettings.dictCancelUpload,
176-
dictCancelUploadConfirmation: this.languageSettings.dictCancelUploadConfirmation,
177-
dictFallbackMessage: this.languageSettings.dictFallbackMessage,
178-
dictFallbackText: this.languageSettings.dictFallbackText,
179-
dictFileTooBig: this.languageSettings.dictFileTooBig,
180-
dictInvalidFileType: this.languageSettings.dictInvalidFileType,
181-
dictMaxFilesExceeded: this.languageSettings.dictMaxFilesExceeded,
182-
dictRemoveFile: this.languageSettings.dictRemoveFile,
183-
dictRemoveFileConfirmation: this.languageSettings.dictRemoveFileConfirmation,
184-
dictResponseError: this.languageSettings.dictResponseError
193+
// Handle the dropzone events
194+
var vm = this
195+
this.dropzone.on('thumbnail', function (file) {
196+
vm.$emit('vdropzone-thumbnail', file)
185197
})
186-
} else {
187-
this.dropzone = new Dropzone(element, this.dropzoneOptions)
188-
}
189-
// Handle the dropzone events
190-
var vm = this
191-
this.dropzone.on('thumbnail', function (file) {
192-
vm.$emit('vdropzone-thumbnail', file)
193-
})
194198
195-
this.dropzone.on('addedfile', function (file) {
196-
vm.$emit('vdropzone-file-added', file)
197-
})
199+
this.dropzone.on('addedfile', function (file) {
200+
vm.$emit('vdropzone-file-added', file)
201+
})
198202
199-
this.dropzone.on('addedfiles', function (files) {
200-
vm.$emit('vdropzone-files-added', files)
201-
})
203+
this.dropzone.on('addedfiles', function (files) {
204+
vm.$emit('vdropzone-files-added', files)
205+
})
202206
203-
this.dropzone.on('removedfile', function (file) {
204-
vm.$emit('vdropzone-removed-file', file)
205-
})
207+
this.dropzone.on('removedfile', function (file) {
208+
vm.$emit('vdropzone-removed-file', file)
209+
})
206210
207-
this.dropzone.on('success', function (file, response) {
208-
vm.$emit('vdropzone-success', file, response)
209-
})
211+
this.dropzone.on('success', function (file, response) {
212+
vm.$emit('vdropzone-success', file, response)
213+
})
210214
211-
this.dropzone.on('successmultiple', function (file, response) {
212-
vm.$emit('vdropzone-success-multiple', file, response)
213-
})
215+
this.dropzone.on('successmultiple', function (file, response) {
216+
vm.$emit('vdropzone-success-multiple', file, response)
217+
})
214218
215-
this.dropzone.on('error', function (file, error, xhr) {
216-
vm.$emit('vdropzone-error', file, error, xhr)
217-
})
219+
this.dropzone.on('error', function (file, error, xhr) {
220+
vm.$emit('vdropzone-error', file, error, xhr)
221+
})
218222
219-
this.dropzone.on('sending', function(file, xhr, formData){
220-
vm.$emit('vdropzone-sending', file, xhr, formData)
221-
})
223+
this.dropzone.on('sending', function(file, xhr, formData){
224+
vm.$emit('vdropzone-sending', file, xhr, formData)
225+
})
222226
223-
this.dropzone.on('sendingmultiple', function(file, xhr, formData){
224-
vm.$emit('vdropzone-sending-multiple', file, xhr, formData)
225-
})
227+
this.dropzone.on('sendingmultiple', function(file, xhr, formData){
228+
vm.$emit('vdropzone-sending-multiple', file, xhr, formData)
229+
})
226230
227-
this.dropzone.on('queuecomplete', function(file, xhr, formData){
228-
vm.$emit('vdropzone-queue-complete', file, xhr, formData)
229-
})
231+
this.dropzone.on('queuecomplete', function(file, xhr, formData){
232+
vm.$emit('vdropzone-queue-complete', file, xhr, formData)
233+
})
230234
231-
this.dropzone.on('totaluploadprogress', function(totaluploadprogress, totalBytes, totalBytesSent){
232-
vm.$emit('vdropzone-total-upload-progress', totaluploadprogress, totalBytes, totalBytesSent)
233-
})
235+
this.dropzone.on('totaluploadprogress', function(totaluploadprogress, totalBytes, totalBytesSent){
236+
vm.$emit('vdropzone-total-upload-progress', totaluploadprogress, totalBytes, totalBytesSent)
237+
})
234238
235-
vm.$emit('vdropzone-mounted');
236-
},
237-
beforeDestroy () {
238-
this.dropzone.disable();
239-
}
239+
vm.$emit('vdropzone-mounted');
240+
},
241+
beforeDestroy () {
242+
this.dropzone.disable();
240243
}
244+
}
241245
242246
</script>
243247

0 commit comments

Comments
 (0)