Skip to content

Commit

Permalink
Refactor uppy code
Browse files Browse the repository at this point in the history
  • Loading branch information
@JammingBen
JammingBen committed Apr 13, 2022
1 parent ee9aab9 commit 81aec9f
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 96 deletions.
2 changes: 1 addition & 1 deletion packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -615,7 +615,7 @@ export default defineComponent({
onFilesSelected(files: File[]) {
const conflicts = []
const uppyResources: UppyResource[] = this.inputFilesToUppyFiles(files) // @TODO call composable
const uppyResources: UppyResource[] = this.inputFilesToUppyFiles(files)
for (const file of uppyResources) {
const relativeFilePath = file.meta.relativeFilePath
if (relativeFilePath) {
Expand Down
5 changes: 4 additions & 1 deletion packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ export default {
}
},
mounted() {
this.$uppyService.addNewFileInputEventListener(this.$refs.input)
this.$uppyService.registerUploadInput(this.$refs.input)
},
beforeDestroy() {
this.$uppyService.removeUploadInput(this.$refs.input.id)
},
methods: {
triggerUpload() {
Expand Down
5 changes: 4 additions & 1 deletion packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@
<script>
export default {
mounted() {
this.$uppyService.addNewFileInputEventListener(this.$refs.input)
this.$uppyService.registerUploadInput(this.$refs.input)
},
beforeDestroy() {
this.$uppyService.removeUploadInput(this.$refs.input.id)
},
methods: {
triggerUpload() {
Expand Down
147 changes: 61 additions & 86 deletions packages/web-app-files/src/views/FilesDrop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,44 @@ import { linkRoleUploaderFolder } from '../helpers/share'
import { createLocationOperations, createLocationPublic } from '../router'
import FileUpload from '../components/AppBar/Upload/FileUpload.vue'
import {
getCurrentInstance,
onMounted,
onUnmounted
} from '@vue/composition-api/dist/vue-composition-api'
import { useUpload } from 'web-runtime/src/composables/upload'
export default {
components: {
FileUpload
},
setup() {
const instance = getCurrentInstance().proxy
const uppyService = instance.$uppyService
onMounted(() => {
uppyService.$on('filesSelected', instance.onFilesSelected)
uppyService.$on('uploadSuccess', instance.onFileSuccess)
uppyService.$on('uploadError', instance.onFileError)
uppyService.useDropTarget({
targetSelector: '#files-drop-container',
uppyService
})
})
onUnmounted(() => {
uppyService.$off('filesSelected', instance.onFilesSelected)
uppyService.$off('uploadSuccess', instance.onFileSuccess)
uppyService.$off('uploadError', instance.onFileError)
})
return {
...useUpload({
uppyService
})
}
},
data() {
return {
loading: true,
Expand Down Expand Up @@ -115,92 +148,6 @@ export default {
return this.uploadedFilesChangeTracker && this.uploadedFiles.values()
}
},
// watch: {
// loading: {
// handler: async function (value) {
// if (!value) {
// await this.$nextTick()
//
// const uppy = uppyService.getUppyInstance({
// uploadPath: this.url,
// capabilities: this.capabilities,
// configuration: this.configuration,
// headers: this.$client.helpers.buildHeaders(),
// $gettext: this.$gettext,
// customTus: CustomTus
// })
//
// this.$refs.fileUpload.$refs.input.addEventListener('change', (event) => {
// const files = Array.from(event.target.files)
//
// files.forEach((file) => {
// try {
// uppy.addFile({
// source: 'file input',
// name: file.name,
// type: file.type,
// data: file
// })
// } catch (err) {
// console.error('error upload file:', file)
// if (err.isRestriction) {
// // handle restrictions
// console.log('Restriction error:', err)
// } else {
// // handle other errors
// console.error(err)
// }
// }
// })
// })
//
// uppy.use(DropTarget, {
// target: '#files-drop-container'
// })
//
// uppy.on('file-added', (file) => {
// if (uppy.getPlugin('XHRUpload')) {
// const filePath = file.name
// uppy.setFileState(file.id, {
// xhrUpload: {
// endpoint: `${this.url.replace(/\/+$/, '')}/${filePath.replace(/^\/+/, '')}`
// }
// })
// }
// })
//
// uppy.on('upload-error', (file, error, response) => {
// console.error(error)
// this.showMessage({
// title: this.$gettext('Failed to upload'),
// status: 'danger'
// })
// })
//
// uppy.on('upload', ({ id, fileIDs }) => {
// if (fileIDs.length) {
// this.$root.$emit('fileUploadStarted')
// }
// })
//
// uppy.on('cancel-all', () => {
// this.$root.$emit('fileUploadsCancelled')
// })
//
// uppy.on('complete', (result) => {
// this.$root.$emit('fileUploadCompleted')
//
// result.successful.forEach((file) => {
// this.$root.$emit('fileUploadedSuccessfully', file)
// this.uploadedFiles.push(file)
// uppy.removeFile(file.id)
// })
// })
// }
// },
// immediate: true
// }
// },
mounted() {
this.resolvePublicLink()
},
Expand Down Expand Up @@ -251,6 +198,34 @@ export default {
triggerUpload() {
this.$refs.fileInput.click()
},
onFilesSelected(files) {
const uppyResources = files.map((file) => ({
source: 'FileDrop',
name: file.name,
type: file.type,
data: file,
meta: {
tusEndpoint: this.url,
relativePath: file.webkitRelativePath || file.relativePath || ''
}
}))
this.$uppyService.uploadFiles(uppyResources)
},
onFileSuccess(file) {
this.uploadedFiles.push(file)
this.$uppyService.$emit('fileUploadedSuccessfully', file)
},
onFileError(error) {
console.error(error)
this.showMessage({
title: this.$gettext('Failed to upload'),
status: 'danger'
})
}
}
}
Expand Down
15 changes: 10 additions & 5 deletions packages/web-runtime/src/components/UploadInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,16 +142,21 @@ export default {
return {}
}
console.log('TARGWET', targetRoute)
return {
const strippedPath = path.replace(/^\//, '')
const route = {
name: targetRoute.name,
query: targetRoute.query,
params: {
item: path.replace(/^\//, ''),
...targetRoute.params,
...(storageId && { storageId })
...(storageId && path && { storageId })
}
}
if (strippedPath) {
route.params = { ...targetRoute.params }
route.params.item = strippedPath
}
return route
}
}
}
Expand Down
14 changes: 12 additions & 2 deletions packages/web-runtime/src/services/uppyService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export class UppyService extends Vue {
constructor() {
super()
this.uppy = new Uppy({
debug: true,
debug: true, // @TODO
autoProceed: true
})
this.setUpEvents()
Expand Down Expand Up @@ -95,6 +95,10 @@ export class UppyService extends Vue {
targetSelector: string
getText: (msgid: string) => string
}) {
if (this.uppy.getPlugin('StatusBar')) {
return
}

this.uppy.use(StatusBar, {
id: 'StatusBar',
target: targetSelector,
Expand Down Expand Up @@ -153,6 +157,7 @@ export class UppyService extends Vue {
this.$emit('uploadCompleted')
result.successful.forEach((file) => {
this.$emit('uploadSuccess', file)
console.log('SUCCESS FOR: ', file.name)
this.uppy.removeFile(file.id)
})

Expand Down Expand Up @@ -182,7 +187,7 @@ export class UppyService extends Vue {
})
}

addNewFileInputEventListener(el: HTMLInputElement) {
registerUploadInput(el: HTMLInputElement) {
const listenerRegistered = el.getAttribute('listener')
if (listenerRegistered !== 'true') {
el.setAttribute('listener', 'true')
Expand All @@ -195,9 +200,14 @@ export class UppyService extends Vue {
}
}

removeUploadInput(elementId: string) {
this.uploadInputs = this.uploadInputs.filter((el) => el.id !== elementId)
}

uploadFiles(files: UppyResource[]) {
files.forEach((file) => {
try {
console.log('START UPLOAD FOR: ', file.name)
this.uppy.addFile(file)
} catch (err) {
console.error('error upload file:', file)
Expand Down

0 comments on commit 81aec9f

Please sign in to comment.