add folder upload with drag&drop (#147)

* add folder upload with drag&drop

* remove semicolons

* remove whitespaces and use arrow function
This commit is contained in:
ahaenggli
2020-11-02 11:32:06 +01:00
committed by GitHub
parent 8196cce153
commit 19dd7be1c8
2 changed files with 15 additions and 7 deletions

View File

@@ -8,7 +8,7 @@
<Upload v-if="can('upload')" v-show="dropZone == false" :files="files" :drop-zone="dropZone" /> <Upload v-if="can('upload')" v-show="dropZone == false" :files="files" :drop-zone="dropZone" />
<b-upload v-if="dropZone && ! isLoading" multiple drag-drop @input="files = $event"> <b-upload v-if="dropZone && ! isLoading" multiple drag-drop>
<b class="drop-info">{{ lang('Drop files to upload') }}</b> <b class="drop-info">{{ lang('Drop files to upload') }}</b>
</b-upload> </b-upload>

View File

@@ -76,10 +76,7 @@ export default {
}, },
watch: { watch: {
'files' (files) { 'files' (files) {
this.visible = true
this.progressVisible = true
_.forEach(files, file => { _.forEach(files, file => {
file.relativePath = this.$store.state.cwd.location
this.resumable.addFile(file) this.resumable.addFile(file)
}) })
}, },
@@ -92,6 +89,7 @@ export default {
}, },
withCredentials: true, withCredentials: true,
simultaneousUploads: this.$store.state.config.upload_simultaneous, simultaneousUploads: this.$store.state.config.upload_simultaneous,
minFileSize: 0,
chunkSize: this.$store.state.config.upload_chunk_size, chunkSize: this.$store.state.config.upload_chunk_size,
maxFileSize: this.$store.state.config.upload_max_size, maxFileSize: this.$store.state.config.upload_max_size,
maxFileSizeErrorCallback: (file) => { maxFileSizeErrorCallback: (file) => {
@@ -104,7 +102,7 @@ export default {
} }
}) })
if (! this.resumable.support) { if (!this.resumable.support) {
this.$dialog.alert({ this.$dialog.alert({
type: 'is-danger', type: 'is-danger',
message: this.lang('Browser not supported.'), message: this.lang('Browser not supported.'),
@@ -112,11 +110,21 @@ export default {
return return
} }
this.resumable.on('fileAdded', () => { this.resumable.assignDrop(document.getElementById('dropzone'))
if (! this.paused) {
this.resumable.on('fileAdded', (file) => {
this.visible = true
this.progressVisible = true
if(file.relativePath === undefined || file.relativePath === null || file.relativePath == file.fileName) file.relativePath = this.$store.state.cwd.location
else file.relativePath = [this.$store.state.cwd.location, file.relativePath].join('/').replace('//', '/').replace(file.fileName, '').replace(/\/$/, '')
if (!this.paused) {
this.resumable.upload() this.resumable.upload()
} }
}) })
this.resumable.on('fileSuccess', (file) => { this.resumable.on('fileSuccess', (file) => {
file.file.uploadingError = false file.file.uploadingError = false
this.$forceUpdate() this.$forceUpdate()