✨ File bundle
This commit is contained in:
50
DysonNetwork.Drive/Client/src/components/BundleSelect.vue
Normal file
50
DysonNetwork.Drive/Client/src/components/BundleSelect.vue
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<n-select
|
||||||
|
v-model:value="selectedBundle"
|
||||||
|
:options="options"
|
||||||
|
placeholder="Select a bundle"
|
||||||
|
@update:value="handleBundleChange"
|
||||||
|
filterable
|
||||||
|
remote
|
||||||
|
:loading="loading"
|
||||||
|
@search="handleSearch"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { NSelect } from 'naive-ui'
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:bundle'])
|
||||||
|
|
||||||
|
const selectedBundle = ref<string | null>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
const options = ref<any[]>([])
|
||||||
|
|
||||||
|
async function fetchBundles(term: string | null = null) {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const resp = await fetch(`/api/bundles/me?${term ? `term=${term}` : ''}`)
|
||||||
|
const data = await resp.json()
|
||||||
|
options.value = data.map((bundle: any) => ({
|
||||||
|
label: bundle.name,
|
||||||
|
value: bundle.id,
|
||||||
|
}))
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch bundles:', error)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSearch(query: string) {
|
||||||
|
fetchBundles(query)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBundleChange(value: string) {
|
||||||
|
emit('update:bundle', value)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => fetchBundles())
|
||||||
|
</script>
|
@@ -89,7 +89,7 @@ import type { SnFilePool } from '@/types/pool'
|
|||||||
|
|
||||||
import * as tus from 'tus-js-client'
|
import * as tus from 'tus-js-client'
|
||||||
|
|
||||||
const props = defineProps<{ filePool: string | null; modeAdvanced: boolean; pools: SnFilePool[] }>()
|
const props = defineProps<{ filePool: string | null; modeAdvanced: boolean; pools: SnFilePool[]; bundleId?: string }>()
|
||||||
|
|
||||||
const filePass = ref<string>('')
|
const filePass = ref<string>('')
|
||||||
const fileExpire = ref<number | null>(null)
|
const fileExpire = ref<number | null>(null)
|
||||||
@@ -117,6 +117,7 @@ function customRequest({
|
|||||||
if (props.filePool) requestHeaders['X-FilePool'] = props.filePool
|
if (props.filePool) requestHeaders['X-FilePool'] = props.filePool
|
||||||
if (filePass.value) requestHeaders['X-FilePass'] = filePass.value
|
if (filePass.value) requestHeaders['X-FilePass'] = filePass.value
|
||||||
if (fileExpire.value) requestHeaders['X-FileExpire'] = fileExpire.value.toString()
|
if (fileExpire.value) requestHeaders['X-FileExpire'] = fileExpire.value.toString()
|
||||||
|
if (props.bundleId) requestHeaders['X-FileBundle'] = props.bundleId
|
||||||
const upload = new tus.Upload(file.file, {
|
const upload = new tus.Upload(file.file, {
|
||||||
endpoint: '/api/tus',
|
endpoint: '/api/tus',
|
||||||
retryDelays: [0, 3000, 5000, 10000, 20000],
|
retryDelays: [0, 3000, 5000, 10000, 20000],
|
||||||
|
@@ -15,6 +15,11 @@ const router = createRouter({
|
|||||||
name: 'files',
|
name: 'files',
|
||||||
component: () => import('../views/files.vue'),
|
component: () => import('../views/files.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/bundles/:bundleId',
|
||||||
|
name: 'bundleDetails',
|
||||||
|
component: () => import('../views/bundles.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/dashboard',
|
path: '/dashboard',
|
||||||
name: 'dashboard',
|
name: 'dashboard',
|
||||||
@@ -78,4 +83,4 @@ router.beforeEach(async (to, from, next) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
@@ -19,7 +19,7 @@ export const useServicesStore = defineStore('services', () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getSerivceUrl(serviceName: string, ...parts: string[]): string | null {
|
function getSerivceUrl(serviceName: string, ...parts: string[]): string | null {
|
||||||
let baseUrl = services.value[serviceName] || null
|
const baseUrl = services.value[serviceName] || null
|
||||||
return baseUrl ? `${baseUrl}/${parts.join('/')}` : null
|
return baseUrl ? `${baseUrl}/${parts.join('/')}` : null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
142
DysonNetwork.Drive/Client/src/views/bundles.vue
Normal file
142
DysonNetwork.Drive/Client/src/views/bundles.vue
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<template>
|
||||||
|
<section class="min-h-full relative flex items-center justify-center">
|
||||||
|
<n-spin v-if="!bundleInfo && !error" />
|
||||||
|
<n-result
|
||||||
|
status="404"
|
||||||
|
title="No bundle was found"
|
||||||
|
:description="error"
|
||||||
|
v-else-if="error === '404'"
|
||||||
|
/>
|
||||||
|
<n-card class="max-w-md my-4 mx-8" v-else-if="error === '403'">
|
||||||
|
<n-result
|
||||||
|
status="403"
|
||||||
|
title="Access Denied"
|
||||||
|
description="This bundle is protected by a passcode"
|
||||||
|
class="mt-5 mb-2"
|
||||||
|
>
|
||||||
|
<template #footer>
|
||||||
|
<n-alert v-if="passcodeError" type="error" class="mb-3">
|
||||||
|
{{ passcodeError }}
|
||||||
|
</n-alert>
|
||||||
|
<n-input
|
||||||
|
v-model:value="passcode"
|
||||||
|
type="password"
|
||||||
|
show-password-on="mousedown"
|
||||||
|
placeholder="Passcode"
|
||||||
|
@keyup.enter="fetchBundleInfo"
|
||||||
|
class="mb-3"
|
||||||
|
/>
|
||||||
|
<n-button type="primary" block @click="fetchBundleInfo">Access Bundle</n-button>
|
||||||
|
</template>
|
||||||
|
</n-result>
|
||||||
|
</n-card>
|
||||||
|
<n-card class="max-w-4xl my-4 mx-8" v-else>
|
||||||
|
<n-grid cols="1 m:2" x-gap="16" y-gap="16" responsive="screen">
|
||||||
|
<n-gi>
|
||||||
|
<n-card title="Content" size="small">
|
||||||
|
<n-list size="small" v-if="bundleInfo.files && bundleInfo.files.length > 0" no-padding>
|
||||||
|
<n-list-item v-for="file in bundleInfo.files" :key="file.id">
|
||||||
|
<n-thing :title="file.name" :description="formatBytes(file.size)">
|
||||||
|
<template #header-extra>
|
||||||
|
<n-button text type="primary" @click="goToFileDetails(file.id)">View</n-button>
|
||||||
|
</template>
|
||||||
|
</n-thing>
|
||||||
|
</n-list-item>
|
||||||
|
</n-list>
|
||||||
|
<n-empty v-else description="No files in this bundle" />
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
|
||||||
|
<n-gi>
|
||||||
|
<n-card size="small">
|
||||||
|
<h3 class="text-lg">{{ bundleInfo.name }}</h3>
|
||||||
|
<p class="mb-3" v-if="bundleInfo.description">{{ bundleInfo.description }}</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="flex-grow-1 flex items-center gap-2">
|
||||||
|
<n-icon>
|
||||||
|
<calendar-today-round />
|
||||||
|
</n-icon>
|
||||||
|
Expires At
|
||||||
|
</span>
|
||||||
|
<span>{{
|
||||||
|
bundleInfo.expiredAt ? new Date(bundleInfo.expiredAt).toLocaleString() : 'Never'
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="flex-grow-1 flex items-center gap-2">
|
||||||
|
<n-icon>
|
||||||
|
<lock-round />
|
||||||
|
</n-icon>
|
||||||
|
Passcode Protected
|
||||||
|
</span>
|
||||||
|
<span>{{ bundleInfo.passcode ? 'Yes' : 'No' }}</span>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</n-card>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
NCard,
|
||||||
|
NResult,
|
||||||
|
NSpin,
|
||||||
|
NIcon,
|
||||||
|
NGrid,
|
||||||
|
NGi,
|
||||||
|
NList,
|
||||||
|
NListItem,
|
||||||
|
NThing,
|
||||||
|
NButton,
|
||||||
|
NEmpty,
|
||||||
|
NInput,
|
||||||
|
NAlert,
|
||||||
|
} from 'naive-ui'
|
||||||
|
import { CalendarTodayRound, LockRound } from '@vicons/material'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
import { formatBytes } from './format' // Assuming format.ts is in the same directory
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const error = ref<string | null>(null)
|
||||||
|
const bundleId = route.params.bundleId
|
||||||
|
const passcode = ref<string>('')
|
||||||
|
const passcodeError = ref<string | null>(null)
|
||||||
|
|
||||||
|
const bundleInfo = ref<any>(null)
|
||||||
|
async function fetchBundleInfo() {
|
||||||
|
try {
|
||||||
|
let url = '/api/bundles/' + bundleId
|
||||||
|
if (passcode.value) {
|
||||||
|
url += `?passcode=${passcode.value}`
|
||||||
|
}
|
||||||
|
const resp = await fetch(url)
|
||||||
|
if (resp.status === 403) {
|
||||||
|
error.value = '403'
|
||||||
|
bundleInfo.value = null
|
||||||
|
if (passcode.value) {
|
||||||
|
passcodeError.value = 'Incorrect passcode.'
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!resp.ok) {
|
||||||
|
throw new Error('Failed to fetch bundle info: ' + resp.statusText)
|
||||||
|
}
|
||||||
|
bundleInfo.value = await resp.json()
|
||||||
|
error.value = null
|
||||||
|
passcodeError.value = null
|
||||||
|
} catch (err) {
|
||||||
|
error.value = (err as Error).message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(() => fetchBundleInfo())
|
||||||
|
|
||||||
|
function goToFileDetails(fileId: string) {
|
||||||
|
router.push({ path: `/files/${fileId}`, query: { passcode: passcode.value } })
|
||||||
|
}
|
||||||
|
</script>
|
@@ -50,17 +50,12 @@ const tableColumns: DataTableColumns<any> = [
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
maxWidth: 80,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Description',
|
title: 'Description',
|
||||||
key: 'description',
|
key: 'description',
|
||||||
},
|
maxWidth: 180,
|
||||||
{
|
|
||||||
title: 'Files',
|
|
||||||
key: 'files',
|
|
||||||
render(row: any) {
|
|
||||||
return row.files.length
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Expired At',
|
title: 'Expired At',
|
||||||
|
@@ -99,6 +99,7 @@ const tableColumns: DataTableColumns<any> = [
|
|||||||
{
|
{
|
||||||
title: 'Name',
|
title: 'Name',
|
||||||
key: 'name',
|
key: 'name',
|
||||||
|
maxWidth: 180,
|
||||||
render(row: any) {
|
render(row: any) {
|
||||||
return h(
|
return h(
|
||||||
NButton,
|
NButton,
|
||||||
|
@@ -165,6 +165,7 @@ const error = ref<string | null>(null)
|
|||||||
|
|
||||||
const filePass = ref<string>('')
|
const filePass = ref<string>('')
|
||||||
const fileId = route.params.fileId
|
const fileId = route.params.fileId
|
||||||
|
const passcode = route.query.passcode as string | undefined
|
||||||
|
|
||||||
const progress = ref<number | undefined>(0)
|
const progress = ref<number | undefined>(0)
|
||||||
|
|
||||||
@@ -177,7 +178,11 @@ const currentUrl = window.location.href
|
|||||||
const fileInfo = ref<any>(null)
|
const fileInfo = ref<any>(null)
|
||||||
async function fetchFileInfo() {
|
async function fetchFileInfo() {
|
||||||
try {
|
try {
|
||||||
const resp = await fetch('/api/files/' + fileId + '/info')
|
let url = '/api/files/' + fileId + '/info'
|
||||||
|
if (passcode) {
|
||||||
|
url += `?passcode=${passcode}`
|
||||||
|
}
|
||||||
|
const resp = await fetch(url)
|
||||||
if (!resp.ok) {
|
if (!resp.ok) {
|
||||||
throw new Error('Failed to fetch file info: ' + resp.statusText)
|
throw new Error('Failed to fetch file info: ' + resp.statusText)
|
||||||
}
|
}
|
||||||
@@ -192,7 +197,13 @@ const fileType = computed(() => {
|
|||||||
if (!fileInfo.value) return 'unknown'
|
if (!fileInfo.value) return 'unknown'
|
||||||
return fileInfo.value.mime_type?.split('/')[0] || 'unknown'
|
return fileInfo.value.mime_type?.split('/')[0] || 'unknown'
|
||||||
})
|
})
|
||||||
const fileSource = computed(() => `/api/files/${fileId}`)
|
const fileSource = computed(() => {
|
||||||
|
let url = `/api/files/${fileId}`
|
||||||
|
if (passcode) {
|
||||||
|
url += `?passcode=${passcode}`
|
||||||
|
}
|
||||||
|
return url
|
||||||
|
})
|
||||||
|
|
||||||
function downloadFile() {
|
function downloadFile() {
|
||||||
if (fileInfo.value.is_encrypted && !filePass.value) {
|
if (fileInfo.value.is_encrypted && !filePass.value) {
|
||||||
|
@@ -1,133 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="h-full relative flex items-center justify-center">
|
<section class="h-full relative flex flex-col items-center justify-center">
|
||||||
<n-card class="max-w-lg my-4 mx-8" title="About" v-if="!userStore.user">
|
<n-card class="max-w-lg my-4 mx-8" title="About" v-if="!userStore.user">
|
||||||
<p>Welcome to the <b>Solar Drive</b></p>
|
<p>Welcome to the <b>Solar Drive</b></p>
|
||||||
<p>We help you upload, collect, and share files with ease in mind.</p>
|
<p>We help you upload, collect, and share files with ease in mind.</p>
|
||||||
<p>To continue, login first.</p>
|
<p>To continue, login first.</p>
|
||||||
|
|
||||||
<p class="mt-4 opacity-75 text-xs">
|
|
||||||
<span v-if="version == null">Loading...</span>
|
|
||||||
<span v-else>
|
|
||||||
v{{ version.version }} @
|
|
||||||
{{ version.commit.substring(0, 6) }}
|
|
||||||
{{ version.updatedAt }}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card class="max-w-2xl" title="Upload to Solar Network" v-else>
|
|
||||||
<template #header-extra>
|
|
||||||
<div class="flex gap-2 items-center">
|
|
||||||
<p>Advance Mode</p>
|
|
||||||
<n-switch v-model:value="modeAdvanced" size="small" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<n-collapse-transition :show="showRecycleHint">
|
<n-card class="max-w-2xl" v-else content-style="padding: 0;">
|
||||||
<n-alert size="small" type="warning" title="Recycle Enabled" class="mb-3">
|
<n-tabs type="line" animated :tabs-padding="20" pane-style="padding: 20px">
|
||||||
You're uploading to a pool which enabled recycle. If the file you uploaded didn't
|
<template #suffix>
|
||||||
referenced from the Solar Network. It will be marked and will be deleted some while later.
|
<div class="flex gap-2 items-center me-4">
|
||||||
</n-alert>
|
<p>Advance Mode</p>
|
||||||
</n-collapse-transition>
|
<n-switch v-model:value="modeAdvanced" size="small" />
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<file-pool-select v-model="filePool" @update:pool="currentFilePool = $event" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<n-collapse-transition :show="modeAdvanced">
|
|
||||||
<n-card title="Advance Options" size="small" class="mb-3">
|
|
||||||
<div class="flex flex-col gap-3">
|
|
||||||
<div>
|
|
||||||
<p class="pl-1 mb-0.5">File Password</p>
|
|
||||||
<n-input
|
|
||||||
v-model:value="filePass"
|
|
||||||
:disabled="!currentFilePool?.allow_encryption"
|
|
||||||
placeholder="Enter password to protect the file"
|
|
||||||
show-password-toggle
|
|
||||||
size="large"
|
|
||||||
type="password"
|
|
||||||
class="mb-2"
|
|
||||||
/>
|
|
||||||
<p class="pl-1 text-xs opacity-75 mt-[-4px]">
|
|
||||||
Only available for Stellar Program and certian file pool.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="pl-1 mb-0.5">File Expiration Date</p>
|
|
||||||
<n-date-picker
|
|
||||||
v-model:value="fileExpire"
|
|
||||||
type="datetime"
|
|
||||||
clearable
|
|
||||||
:is-date-disabled="disablePreviousDate"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</n-card>
|
</template>
|
||||||
</n-collapse-transition>
|
|
||||||
|
|
||||||
<n-upload
|
<n-tab-pane name="direct" tab="Direct Upload" :disabled="isBundleMode">
|
||||||
multiple
|
<div class="mb-3">
|
||||||
directory-dnd
|
<file-pool-select v-model="filePool" @update:pool="currentFilePool = $event" />
|
||||||
with-credentials
|
</div>
|
||||||
show-preview-button
|
<upload-area
|
||||||
list-type="image"
|
:filePool="filePool"
|
||||||
show-download-button
|
:pools="pools as SnFilePool[]"
|
||||||
:custom-request="customRequest"
|
:modeAdvanced="modeAdvanced"
|
||||||
:custom-download="customDownload"
|
/>
|
||||||
:create-thumbnail-url="createThumbnailUrl"
|
</n-tab-pane>
|
||||||
@preview="customPreview"
|
<n-tab-pane name="bundle" tab="Bundle Upload">
|
||||||
>
|
<div class="mb-3">
|
||||||
<n-upload-dragger>
|
<bundle-select v-model:bundle="selectedBundleId" :disabled="isBundleMode" />
|
||||||
<div style="margin-bottom: 12px">
|
|
||||||
<n-icon size="48" :depth="3">
|
|
||||||
<cloud-upload-round />
|
|
||||||
</n-icon>
|
|
||||||
</div>
|
</div>
|
||||||
<n-text style="font-size: 16px"> Click or drag a file to this area to upload </n-text>
|
|
||||||
<n-p depth="3" style="margin: 8px 0 0 0">
|
|
||||||
Strictly prohibit from uploading sensitive information. For example, your bank card PIN
|
|
||||||
or your credit card expiry date.
|
|
||||||
</n-p>
|
|
||||||
</n-upload-dragger>
|
|
||||||
</n-upload>
|
|
||||||
|
|
||||||
<p class="mt-4 opacity-75 text-xs">
|
<n-modal v-model:show="showCreateBundleModal" preset="dialog" title="Create New Bundle">
|
||||||
<span v-if="version == null">Loading...</span>
|
<bundle-form ref="bundleFormRef" :value="newBundle" />
|
||||||
<span v-else>
|
<template #action>
|
||||||
v{{ version.version }} @
|
<n-button @click="showCreateBundleModal = false">Cancel</n-button>
|
||||||
{{ version.commit.substring(0, 6) }}
|
<n-button type="primary" @click="createBundle">Create</n-button>
|
||||||
{{ version.updatedAt }}
|
</template>
|
||||||
</span>
|
</n-modal>
|
||||||
</p>
|
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<n-button @click="showCreateBundleModal = true" class="mb-3" :disabled="isBundleMode">
|
||||||
|
Create New Bundle
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
:disabled="!selectedBundleId && !newBundleId && !isBundleMode"
|
||||||
|
@click="isBundleMode ? cancelBundleUpload() : proceedToBundleUpload()"
|
||||||
|
>
|
||||||
|
{{ isBundleMode ? 'Cancel' : 'Proceed to Upload' }}
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="bundleUploadMode" class="mt-3">
|
||||||
|
<upload-area
|
||||||
|
:filePool="filePool"
|
||||||
|
:pools="pools as SnFilePool[]"
|
||||||
|
:modeAdvanced="modeAdvanced"
|
||||||
|
:bundleId="currentBundleId!"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</n-tab-pane>
|
||||||
|
</n-tabs>
|
||||||
</n-card>
|
</n-card>
|
||||||
|
|
||||||
|
<p class="mt-4 opacity-75 text-xs">
|
||||||
|
<span v-if="version == null">Loading...</span>
|
||||||
|
<span v-else>
|
||||||
|
v{{ version.version }} @
|
||||||
|
{{ version.commit.substring(0, 6) }}
|
||||||
|
{{ version.updatedAt }}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import { NCard, NSwitch, NTabs, NTabPane, NButton, NModal } from 'naive-ui'
|
||||||
NCard,
|
|
||||||
NUpload,
|
|
||||||
NUploadDragger,
|
|
||||||
NIcon,
|
|
||||||
NText,
|
|
||||||
NP,
|
|
||||||
NInput,
|
|
||||||
NSwitch,
|
|
||||||
NCollapseTransition,
|
|
||||||
NDatePicker,
|
|
||||||
NAlert,
|
|
||||||
type UploadCustomRequestOptions,
|
|
||||||
type UploadSettledFileInfo,
|
|
||||||
type UploadFileInfo,
|
|
||||||
useMessage,
|
|
||||||
} from 'naive-ui'
|
|
||||||
import { computed, onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { CloudUploadRound } from '@vicons/material'
|
|
||||||
import { useUserStore } from '@/stores/user'
|
import { useUserStore } from '@/stores/user'
|
||||||
import type { SnFilePool } from '@/types/pool'
|
import type { SnFilePool } from '@/types/pool'
|
||||||
|
|
||||||
import FilePoolSelect from '@/components/FilePoolSelect.vue'
|
import FilePoolSelect from '@/components/FilePoolSelect.vue'
|
||||||
|
import UploadArea from '@/components/UploadArea.vue'
|
||||||
import * as tus from 'tus-js-client'
|
import BundleSelect from '@/components/BundleSelect.vue'
|
||||||
|
import BundleForm from '@/components/form/BundleForm.vue'
|
||||||
|
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
|
||||||
@@ -150,105 +105,57 @@ onMounted(() => fetchPools())
|
|||||||
const modeAdvanced = ref(false)
|
const modeAdvanced = ref(false)
|
||||||
|
|
||||||
const filePool = ref<string | null>(null)
|
const filePool = ref<string | null>(null)
|
||||||
const filePass = ref<string>('')
|
|
||||||
const fileExpire = ref<number | null>(null)
|
|
||||||
|
|
||||||
const currentFilePool = computed(() => {
|
const currentFilePool = computed(() => {
|
||||||
if (!filePool.value) return null
|
if (!filePool.value) return null
|
||||||
return pools.value?.find((pool) => pool.id === filePool.value) ?? null
|
return pools.value?.find((pool) => pool.id === filePool.value) ?? null
|
||||||
})
|
})
|
||||||
const showRecycleHint = computed(() => {
|
|
||||||
if (!filePool.value) return true
|
|
||||||
return currentFilePool.value.policy_config?.enable_recycle || false
|
|
||||||
})
|
|
||||||
|
|
||||||
const messageDisplay = useMessage()
|
const bundles = ref<any>([])
|
||||||
|
const selectedBundleId = ref<string | null>(null)
|
||||||
|
const showCreateBundleModal = ref(false)
|
||||||
|
const newBundle = ref<any>({})
|
||||||
|
const bundleFormRef = ref<any>(null)
|
||||||
|
const bundleUploadMode = ref(false)
|
||||||
|
const currentBundleId = ref<string | null>(null)
|
||||||
|
const newBundleId = ref<string | null>(null)
|
||||||
|
const isBundleMode = ref(false)
|
||||||
|
|
||||||
function customRequest({
|
async function createBundle() {
|
||||||
file,
|
try {
|
||||||
headers,
|
await bundleFormRef.value?.formRef?.validate()
|
||||||
withCredentials,
|
const resp = await fetch('/api/bundles', {
|
||||||
onFinish,
|
method: 'POST',
|
||||||
onError,
|
headers: {
|
||||||
onProgress,
|
'Content-Type': 'application/json',
|
||||||
}: UploadCustomRequestOptions) {
|
},
|
||||||
const requestHeaders: Record<string, string> = {}
|
body: JSON.stringify(newBundle.value),
|
||||||
if (filePool.value) requestHeaders['X-FilePool'] = filePool.value
|
})
|
||||||
if (filePass.value) requestHeaders['X-FilePass'] = filePass.value
|
if (!resp.ok) {
|
||||||
if (fileExpire.value) requestHeaders['X-FileExpire'] = fileExpire.value.toString()
|
throw new Error('Failed to create bundle')
|
||||||
const upload = new tus.Upload(file.file, {
|
|
||||||
endpoint: '/api/tus',
|
|
||||||
retryDelays: [0, 3000, 5000, 10000, 20000],
|
|
||||||
removeFingerprintOnSuccess: false,
|
|
||||||
uploadDataDuringCreation: false,
|
|
||||||
metadata: {
|
|
||||||
filename: file.name,
|
|
||||||
'content-type': file.type ?? 'application/octet-stream',
|
|
||||||
},
|
|
||||||
headers: {
|
|
||||||
'X-DirectUpload': 'true',
|
|
||||||
...requestHeaders,
|
|
||||||
...headers,
|
|
||||||
},
|
|
||||||
onShouldRetry: () => false,
|
|
||||||
onError: function (error) {
|
|
||||||
if (error instanceof tus.DetailedError) {
|
|
||||||
const failedBody = error.originalResponse?.getBody()
|
|
||||||
if (failedBody != null)
|
|
||||||
messageDisplay.error(`Upload failed: ${failedBody}`, {
|
|
||||||
duration: 10000,
|
|
||||||
closable: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
console.error('[DRIVE] Upload failed:', error)
|
|
||||||
onError()
|
|
||||||
},
|
|
||||||
onProgress: function (bytesUploaded, bytesTotal) {
|
|
||||||
onProgress({ percent: (bytesUploaded / bytesTotal) * 100 })
|
|
||||||
},
|
|
||||||
onSuccess: function (payload) {
|
|
||||||
const rawInfo = payload.lastResponse.getHeader('x-fileinfo')
|
|
||||||
const jsonInfo = JSON.parse(rawInfo as string)
|
|
||||||
console.log('[DRIVE] Upload successful: ', jsonInfo)
|
|
||||||
file.url = `/api/files/${jsonInfo.id}`
|
|
||||||
file.type = jsonInfo.mime_type
|
|
||||||
onFinish()
|
|
||||||
},
|
|
||||||
onBeforeRequest: function (req) {
|
|
||||||
const xhr = req.getUnderlyingObject()
|
|
||||||
xhr.withCredentials = withCredentials
|
|
||||||
},
|
|
||||||
})
|
|
||||||
upload.findPreviousUploads().then(function (previousUploads) {
|
|
||||||
if (previousUploads.length) {
|
|
||||||
upload.resumeFromPreviousUpload(previousUploads[0])
|
|
||||||
}
|
}
|
||||||
upload.start()
|
const createdBundle = await resp.json()
|
||||||
})
|
bundles.value.push(createdBundle)
|
||||||
|
selectedBundleId.value = createdBundle.id
|
||||||
|
newBundleId.value = createdBundle.id
|
||||||
|
showCreateBundleModal.value = false
|
||||||
|
newBundle.value = {}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to create bundle:', error)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function createThumbnailUrl(
|
function proceedToBundleUpload() {
|
||||||
_file: File | null,
|
currentBundleId.value = selectedBundleId.value || newBundleId.value
|
||||||
fileInfo: UploadSettledFileInfo,
|
bundleUploadMode.value = true
|
||||||
): string | undefined {
|
isBundleMode.value = true
|
||||||
if (!fileInfo) return undefined
|
|
||||||
return fileInfo.url ?? undefined
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function customDownload(file: UploadFileInfo) {
|
function cancelBundleUpload() {
|
||||||
const { url } = file
|
bundleUploadMode.value = false
|
||||||
if (!url) return
|
isBundleMode.value = false
|
||||||
window.open(url.replace('/api', ''), '_blank')
|
currentBundleId.value = null
|
||||||
}
|
selectedBundleId.value = null
|
||||||
|
newBundleId.value = null
|
||||||
function customPreview(file: UploadFileInfo, detail: { event: MouseEvent }) {
|
|
||||||
detail.event.preventDefault()
|
|
||||||
const { url } = file
|
|
||||||
if (!url) return
|
|
||||||
window.open(url.replace('/api', ''), '_blank')
|
|
||||||
}
|
|
||||||
|
|
||||||
function disablePreviousDate(ts: number) {
|
|
||||||
return ts <= Date.now()
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@@ -20,7 +20,7 @@ public class BundleController(AppDatabase db) : ControllerBase
|
|||||||
|
|
||||||
public Instant? ExpiredAt { get; set; }
|
public Instant? ExpiredAt { get; set; }
|
||||||
}
|
}
|
||||||
|
|
||||||
[HttpGet("{id:guid}")]
|
[HttpGet("{id:guid}")]
|
||||||
[Authorize]
|
[Authorize]
|
||||||
public async Task<ActionResult<FileBundle>> GetBundle([FromRoute] Guid id, [FromQuery] string? passcode)
|
public async Task<ActionResult<FileBundle>> GetBundle([FromRoute] Guid id, [FromQuery] string? passcode)
|
||||||
@@ -35,13 +35,14 @@ public class BundleController(AppDatabase db) : ControllerBase
|
|||||||
.FirstOrDefaultAsync();
|
.FirstOrDefaultAsync();
|
||||||
if (bundle is null) return NotFound();
|
if (bundle is null) return NotFound();
|
||||||
if (!bundle.VerifyPasscode(passcode)) return Forbid();
|
if (!bundle.VerifyPasscode(passcode)) return Forbid();
|
||||||
|
|
||||||
return Ok(bundle);
|
return Ok(bundle);
|
||||||
}
|
}
|
||||||
|
|
||||||
[HttpGet("me")]
|
[HttpGet("me")]
|
||||||
[Authorize]
|
[Authorize]
|
||||||
public async Task<ActionResult<List<FileBundle>>> ListBundles(
|
public async Task<ActionResult<List<FileBundle>>> ListBundles(
|
||||||
|
[FromQuery] string? term,
|
||||||
[FromQuery] int offset = 0,
|
[FromQuery] int offset = 0,
|
||||||
[FromQuery] int take = 20
|
[FromQuery] int take = 20
|
||||||
)
|
)
|
||||||
@@ -53,10 +54,12 @@ public class BundleController(AppDatabase db) : ControllerBase
|
|||||||
.Where(e => e.AccountId == accountId)
|
.Where(e => e.AccountId == accountId)
|
||||||
.OrderByDescending(e => e.CreatedAt)
|
.OrderByDescending(e => e.CreatedAt)
|
||||||
.AsQueryable();
|
.AsQueryable();
|
||||||
|
if (!string.IsNullOrEmpty(term))
|
||||||
|
query = query.Where(e => EF.Functions.ILike(e.Name, $"%{term}%"));
|
||||||
|
|
||||||
var total = await query.CountAsync();
|
var total = await query.CountAsync();
|
||||||
Response.Headers.Append("X-Total", total.ToString());
|
Response.Headers.Append("X-Total", total.ToString());
|
||||||
|
|
||||||
var bundles = await query
|
var bundles = await query
|
||||||
.Skip(offset)
|
.Skip(offset)
|
||||||
.Take(take)
|
.Take(take)
|
||||||
@@ -114,7 +117,7 @@ public class BundleController(AppDatabase db) : ControllerBase
|
|||||||
return StatusCode(403, "You must have a subscription to change the slug of a bundle");
|
return StatusCode(403, "You must have a subscription to change the slug of a bundle");
|
||||||
bundle.Slug = request.Slug;
|
bundle.Slug = request.Slug;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (request.Name != null) bundle.Name = request.Name;
|
if (request.Name != null) bundle.Name = request.Name;
|
||||||
if (request.Description != null) bundle.Description = request.Description;
|
if (request.Description != null) bundle.Description = request.Description;
|
||||||
if (request.ExpiredAt != null) bundle.ExpiredAt = request.ExpiredAt;
|
if (request.ExpiredAt != null) bundle.ExpiredAt = request.ExpiredAt;
|
||||||
|
@@ -1,9 +1,9 @@
|
|||||||
using System.ComponentModel.DataAnnotations;
|
using System.ComponentModel.DataAnnotations;
|
||||||
using System.ComponentModel.DataAnnotations.Schema;
|
using System.ComponentModel.DataAnnotations.Schema;
|
||||||
|
using System.Text.Json.Serialization;
|
||||||
using DysonNetwork.Shared.Data;
|
using DysonNetwork.Shared.Data;
|
||||||
using DysonNetwork.Shared.Proto;
|
using DysonNetwork.Shared.Proto;
|
||||||
using Google.Protobuf;
|
using Google.Protobuf;
|
||||||
using Newtonsoft.Json;
|
|
||||||
using NodaTime;
|
using NodaTime;
|
||||||
using NodaTime.Serialization.Protobuf;
|
using NodaTime.Serialization.Protobuf;
|
||||||
|
|
||||||
|
@@ -22,7 +22,6 @@
|
|||||||
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.7" />
|
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.7" />
|
||||||
<PackageReference Include="Microsoft.Extensions.Hosting" Version="9.0.7" />
|
<PackageReference Include="Microsoft.Extensions.Hosting" Version="9.0.7" />
|
||||||
<PackageReference Include="NetTopologySuite" Version="2.6.0" />
|
<PackageReference Include="NetTopologySuite" Version="2.6.0" />
|
||||||
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
|
|
||||||
<PackageReference Include="NodaTime" Version="3.2.2" />
|
<PackageReference Include="NodaTime" Version="3.2.2" />
|
||||||
<PackageReference Include="NodaTime.Serialization.JsonNet" Version="3.2.0" />
|
<PackageReference Include="NodaTime.Serialization.JsonNet" Version="3.2.0" />
|
||||||
<PackageReference Include="NodaTime.Serialization.Protobuf" Version="2.0.2" />
|
<PackageReference Include="NodaTime.Serialization.Protobuf" Version="2.0.2" />
|
||||||
|
@@ -34,7 +34,6 @@
|
|||||||
<PrivateAssets>all</PrivateAssets>
|
<PrivateAssets>all</PrivateAssets>
|
||||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||||
</PackageReference>
|
</PackageReference>
|
||||||
<PackageReference Include="Newtonsoft.Json" Version="13.0.3"/>
|
|
||||||
<PackageReference Include="NodaTime" Version="3.2.2"/>
|
<PackageReference Include="NodaTime" Version="3.2.2"/>
|
||||||
<PackageReference Include="NodaTime.Serialization.JsonNet" Version="3.2.0"/>
|
<PackageReference Include="NodaTime.Serialization.JsonNet" Version="3.2.0"/>
|
||||||
<PackageReference Include="NodaTime.Serialization.SystemTextJson" Version="1.3.0"/>
|
<PackageReference Include="NodaTime.Serialization.SystemTextJson" Version="1.3.0"/>
|
||||||
|
Reference in New Issue
Block a user