fix upload function
This commit is contained in:
jb-alvarado
parent
99339155eb
commit
7d9da750cd
1201
package-lock.json
generated
1201
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ffplayout-frontend",
|
||||
"version": "0.2.4",
|
||||
"version": "0.2.5",
|
||||
"description": "Web GUI for ffplayout",
|
||||
"author": "Jonathan Baecker",
|
||||
"private": true,
|
||||
@ -17,7 +17,7 @@
|
||||
"@popperjs/core": "^2.11.7",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"bootstrap": "^5.3.0-alpha2",
|
||||
"bootstrap-icons": "^1.10.3",
|
||||
"bootstrap-icons": "^1.10.4",
|
||||
"cookie-universal-nuxt": "^2.2.2",
|
||||
"dayjs": "^1.11.7",
|
||||
"jwt-decode": "^3.1.2",
|
||||
@ -25,21 +25,20 @@
|
||||
"mpegts.js": "^1.7.2",
|
||||
"pinia": "^2.0.33",
|
||||
"sortablejs": "^1.15.0",
|
||||
"sortablejs-vue3": "^1.2.8",
|
||||
"sortablejs-vue3": "^1.2.9",
|
||||
"splitpanes": "^3.1.5",
|
||||
"video.js": "^8.0.4",
|
||||
"vuedraggable": "^4.1.0"
|
||||
"video.js": "^8.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/eslint-config": "^12.0.0",
|
||||
"@types/bootstrap": "^5.2.6",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/lodash": "^4.14.192",
|
||||
"@types/splitpanes": "^2.2.1",
|
||||
"@types/video.js": "^7.3.51",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint": "^8.37.0",
|
||||
"eslint-plugin-nuxt": "^4.0.0",
|
||||
"nuxt": "3.3.2",
|
||||
"nuxt": "3.3.3",
|
||||
"sass": "^1.60.0",
|
||||
"sass-loader": "^13.2.1"
|
||||
"sass-loader": "^13.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -330,6 +330,7 @@
|
||||
<input
|
||||
class="form-control"
|
||||
type="file"
|
||||
ref="fileInputName"
|
||||
:accept="extensions"
|
||||
v-on:change="onFileChange"
|
||||
multiple
|
||||
@ -338,6 +339,18 @@
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<div class="row progress-row">
|
||||
<div class="col-1" style="min-width: 125px">Current:</div>
|
||||
<div class="col-10">
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar bg-warning"
|
||||
role="progressbar"
|
||||
:aria-valuenow="currentProgress"
|
||||
:style="`width: ${currentProgress}%`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100" />
|
||||
<div class="col-1" style="min-width: 125px">
|
||||
Overall ({{ currentNumber }}/{{ inputFiles.length }}):
|
||||
</div>
|
||||
@ -352,18 +365,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100" />
|
||||
<div class="col-1" style="min-width: 125px">Current:</div>
|
||||
<div class="col-10">
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar bg-warning"
|
||||
role="progressbar"
|
||||
:aria-valuenow="currentProgress"
|
||||
:style="`width: ${currentProgress}%`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100" />
|
||||
<div class="col-1" style="min-width: 125px">Uploading:</div>
|
||||
<div class="col-10">
|
||||
<strong>{{ uploadTask }}</strong>
|
||||
@ -427,6 +428,7 @@ const uploadModal = ref()
|
||||
const extensions = ref('')
|
||||
const folderName = ref('')
|
||||
const inputFiles = ref([] as File[])
|
||||
const fileInputName = ref()
|
||||
const currentNumber = ref(0)
|
||||
const uploadTask = ref('')
|
||||
const overallProgress = ref(0)
|
||||
@ -619,21 +621,11 @@ function onFileChange(evt: any) {
|
||||
inputFiles.value = files
|
||||
}
|
||||
|
||||
async function onSubmitUpload(evt: any) {
|
||||
evt.preventDefault()
|
||||
|
||||
lastPath.value = mediaStore.folderTree.source
|
||||
|
||||
for (let i = 0; i < inputFiles.value.length; i++) {
|
||||
const file = inputFiles.value[i]
|
||||
uploadTask.value = file.name
|
||||
currentNumber.value = i + 1
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append(file.name, file)
|
||||
|
||||
xhr.value = new XMLHttpRequest()
|
||||
|
||||
function upload(file: any): Promise<null> {
|
||||
const formData = new FormData()
|
||||
formData.append(file.name, file)
|
||||
xhr.value = new XMLHttpRequest()
|
||||
return new Promise(resolve => {
|
||||
xhr.value.open(
|
||||
'PUT',
|
||||
`/api/file/${configStore.configGui[configStore.configID].id}/upload/?path=${encodeURIComponent(
|
||||
@ -651,28 +643,48 @@ async function onSubmitUpload(evt: any) {
|
||||
indexStore.alertVariant = 'alert-danger'
|
||||
indexStore.alertMsg = `Upload error: ${xhr.value.status}`
|
||||
indexStore.showAlert = true
|
||||
resolve(undefined)
|
||||
}
|
||||
|
||||
// upload completed successfully
|
||||
xhr.value.onload = function () {
|
||||
overallProgress.value = (currentNumber.value * 100) / inputFiles.value.length
|
||||
currentProgress.value = 100
|
||||
resolve(xhr.response)
|
||||
}
|
||||
|
||||
xhr.value.send(formData)
|
||||
});
|
||||
}
|
||||
|
||||
async function onSubmitUpload(evt: any) {
|
||||
evt.preventDefault()
|
||||
|
||||
lastPath.value = mediaStore.folderTree.source
|
||||
|
||||
for (let i = 0; i < inputFiles.value.length; i++) {
|
||||
const file = inputFiles.value[i]
|
||||
uploadTask.value = file.name
|
||||
currentProgress.value = 0
|
||||
currentNumber.value = i + 1
|
||||
|
||||
await upload(file)
|
||||
|
||||
overallProgress.value = (currentNumber.value * 100) / inputFiles.value.length
|
||||
}
|
||||
|
||||
uploadTask.value = 'Done...'
|
||||
getPath(lastPath.value)
|
||||
|
||||
setTimeout(() => {
|
||||
fileInputName.value.value = null
|
||||
thisUploadModal.value.hide()
|
||||
currentNumber.value = 0
|
||||
currentProgress.value = 0
|
||||
overallProgress.value = 0
|
||||
inputFiles.value = []
|
||||
indexStore.showAlert = false
|
||||
}, 1000)
|
||||
uploadTask.value = ''
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
function onResetUpload(evt: any) {
|
||||
@ -687,7 +699,6 @@ function onResetUpload(evt: any) {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.browser-container .browser-item:hover {
|
||||
background-color: $item-hover;
|
||||
|
||||
@ -706,6 +717,14 @@ function onResetUpload(evt: any) {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
#deleteModal strong {
|
||||
display:inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-delete,
|
||||
.file-rename {
|
||||
margin-right: 0.8em;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user