✨ FIle detail page
This commit is contained in:
1
DysonNetwork.Drive/Client/.gitignore
vendored
1
DysonNetwork.Drive/Client/.gitignore
vendored
@@ -8,6 +8,7 @@ pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
node_modules/highlight.js
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
|
||||
@@ -10,7 +10,7 @@ const router = createRouter({
|
||||
component: () => import('../views/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/files',
|
||||
path: '/files/:fileId',
|
||||
name: 'files',
|
||||
component: () => import('../views/files.vue'),
|
||||
}
|
||||
|
||||
35
DysonNetwork.Drive/Client/src/types/pool.ts
Normal file
35
DysonNetwork.Drive/Client/src/types/pool.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
export interface SnFilePool {
|
||||
id: string;
|
||||
name: string;
|
||||
storage_config: StorageConfig;
|
||||
billing_config: BillingConfig;
|
||||
public_indexable: boolean;
|
||||
public_usable: boolean;
|
||||
no_optimization: boolean;
|
||||
no_metadata: boolean;
|
||||
allow_encryption: boolean;
|
||||
allow_anonymous: boolean;
|
||||
require_privilege: number;
|
||||
account_id: null;
|
||||
resource_identifier: string;
|
||||
created_at: Date;
|
||||
updated_at: Date;
|
||||
deleted_at: null;
|
||||
}
|
||||
|
||||
export interface BillingConfig {
|
||||
cost_multiplier: number;
|
||||
}
|
||||
|
||||
export interface StorageConfig {
|
||||
region: string;
|
||||
bucket: string;
|
||||
endpoint: string;
|
||||
secret_id: string;
|
||||
secret_key: string;
|
||||
enable_signed: boolean;
|
||||
enable_ssl: boolean;
|
||||
image_proxy: null;
|
||||
access_proxy: null;
|
||||
expiration: null;
|
||||
}
|
||||
@@ -1,36 +1,182 @@
|
||||
<template>
|
||||
<section class="h-full relative flex items-center justify-center">
|
||||
<n-card class="max-w-lg" title="Download file">
|
||||
<div class="flex flex-col gap-3" v-if="!progress">
|
||||
<n-input placeholder="File ID" v-model:value="fileId" />
|
||||
<n-input placeholder="Password" v-model:value="filePass" type="password" />
|
||||
<n-button @click="downloadFile">Download</n-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<n-progress :percentage="progress" />
|
||||
</div>
|
||||
<section class="min-h-full relative flex items-center justify-center">
|
||||
<n-spin v-if="!fileInfo && !error" />
|
||||
<n-result status="404" title="No file was found" :description="error" v-else-if="error" />
|
||||
<n-card class="max-w-4xl my-4" v-else>
|
||||
<n-grid :cols="2" x-gap="16">
|
||||
<n-gi>
|
||||
<div v-if="fileInfo.is_encrypted">
|
||||
<n-alert type="info" size="small" title="Encrypted file">
|
||||
The file has been encrypted. Preview not available. Please enter the password to
|
||||
download it.
|
||||
</n-alert>
|
||||
</div>
|
||||
<div v-else>
|
||||
<n-image v-if="fileType === 'image'" :src="fileSource" />
|
||||
</div>
|
||||
</n-gi>
|
||||
|
||||
<n-gi>
|
||||
<div class="mb-3">
|
||||
<n-card title="File Infomation" size="small">
|
||||
<div class="flex gap-2">
|
||||
<span class="flex-grow-1 flex items-center gap-2">
|
||||
<n-icon>
|
||||
<info-round />
|
||||
</n-icon>
|
||||
File Type
|
||||
</span>
|
||||
<span>{{ fileInfo.mime_type }} ({{ fileType }})</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="flex-grow-1 flex items-center gap-2">
|
||||
<n-icon>
|
||||
<data-usage-round />
|
||||
</n-icon>
|
||||
File Size
|
||||
</span>
|
||||
<span>{{ formatBytes(fileInfo.size) }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="flex-grow-1 flex items-center gap-2">
|
||||
<n-icon>
|
||||
<file-upload-outlined />
|
||||
</n-icon>
|
||||
Uploaded At
|
||||
</span>
|
||||
<span>{{ new Date(fileInfo.created_at).toLocaleString() }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="flex-grow-1 flex items-center gap-2">
|
||||
<n-icon>
|
||||
<details-round />
|
||||
</n-icon>
|
||||
Techical Info
|
||||
</span>
|
||||
<n-button text size="small" @click="showTechDetails = !showTechDetails">
|
||||
{{ showTechDetails ? 'Hide' : 'Show' }}
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<n-collapse-transition :show="showTechDetails">
|
||||
<div v-if="showTechDetails" class="mt-2 flex flex-col gap-1">
|
||||
<p class="text-xs opacity-75">#{{ fileInfo.id }}</p>
|
||||
|
||||
<n-card size="small" content-style="padding: 0" embedded>
|
||||
<div class="overflow-x-auto px-4 py-2">
|
||||
<n-code
|
||||
:code="JSON.stringify(fileInfo.file_meta, null, 4)"
|
||||
language="json"
|
||||
:hljs="hljs"
|
||||
/>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</n-collapse-transition>
|
||||
</n-card>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3" v-if="!progress">
|
||||
<n-input
|
||||
v-if="fileInfo.is_encrypted"
|
||||
placeholder="Password"
|
||||
v-model:value="filePass"
|
||||
type="password"
|
||||
/>
|
||||
<n-button @click="downloadFile">Download</n-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<n-progress processing :percentage="progress" />
|
||||
</div>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-card>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NCard, NInput, NButton, NProgress, useMessage } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
NCard,
|
||||
NInput,
|
||||
NButton,
|
||||
NProgress,
|
||||
NResult,
|
||||
NSpin,
|
||||
NImage,
|
||||
NAlert,
|
||||
NIcon,
|
||||
NCollapseTransition,
|
||||
NCode,
|
||||
NGrid,
|
||||
NGi,
|
||||
useMessage,
|
||||
} from 'naive-ui'
|
||||
import { DataUsageRound, InfoRound, DetailsRound, FileUploadOutlined } from '@vicons/material'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import { downloadAndDecryptFile } from './secure'
|
||||
|
||||
import hljs from 'highlight.js/lib/core'
|
||||
import json from 'highlight.js/lib/languages/json'
|
||||
|
||||
hljs.registerLanguage('json', json)
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
const filePass = ref<string>('')
|
||||
const fileId = ref<string>('')
|
||||
const fileId = route.params.fileId
|
||||
|
||||
const progress = ref<number | undefined>(0)
|
||||
|
||||
const showTechDetails = ref<boolean>(false)
|
||||
|
||||
const messageDisplay = useMessage()
|
||||
|
||||
const fileInfo = ref<any>(null)
|
||||
async function fetchFileInfo() {
|
||||
try {
|
||||
const resp = await fetch('/api/files/' + fileId + '/info')
|
||||
if (!resp.ok) {
|
||||
throw new Error('Failed to fetch file info: ' + resp.statusText)
|
||||
}
|
||||
fileInfo.value = await resp.json()
|
||||
} catch (err) {
|
||||
error.value = (err as Error).message
|
||||
}
|
||||
}
|
||||
onMounted(() => fetchFileInfo())
|
||||
|
||||
const fileType = computed(() => {
|
||||
if (!fileInfo.value) return 'unknown'
|
||||
return fileInfo.value.mime_type?.split('/')[0] || 'unknown'
|
||||
})
|
||||
const fileSource = computed(() => `/api/files/${fileId}`)
|
||||
|
||||
function downloadFile() {
|
||||
downloadAndDecryptFile('/api/files/' + fileId.value, filePass.value, (p: number) => {
|
||||
progress.value = p * 100
|
||||
}).catch((err) => {
|
||||
messageDisplay.error('Download failed: ' + err.message, { closable: true, duration: 10000 })
|
||||
})
|
||||
if (fileInfo.value.is_encrypted && !filePass.value) {
|
||||
messageDisplay.error('Please enter the password to download the file.')
|
||||
return
|
||||
}
|
||||
if (fileInfo.value.is_encrypted) {
|
||||
downloadAndDecryptFile(fileSource.value, filePass.value, (p: number) => {
|
||||
progress.value = p * 100
|
||||
}).catch((err) => {
|
||||
messageDisplay.error('Download failed: ' + err.message, { closable: true, duration: 10000 })
|
||||
})
|
||||
} else {
|
||||
window.open(fileSource.value, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number, decimals = 2): string {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const dm = decimals < 0 ? 0 : decimals
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -22,17 +22,38 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="mb-3" v-if="modeAdvanced">
|
||||
<n-input
|
||||
v-model:value="filePass"
|
||||
placeholder="Enter password to protect the file"
|
||||
<div class="mb-3">
|
||||
<n-select
|
||||
v-model:value="filePool"
|
||||
:options="pools ?? []"
|
||||
:render-label="renderPoolSelectLabel"
|
||||
:render-tag="renderSingleSelectTag"
|
||||
value-field="id"
|
||||
label-field="name"
|
||||
placeholder="Select a file pool to upload"
|
||||
clearable
|
||||
size="large"
|
||||
type="password"
|
||||
class="mb-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<n-collapse-transition :show="modeAdvanced">
|
||||
<n-card title="Advance Options" size="small" class="mb-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>
|
||||
</n-card>
|
||||
</n-collapse-transition>
|
||||
|
||||
<n-upload
|
||||
multiple
|
||||
directory-dnd
|
||||
@@ -45,7 +66,7 @@
|
||||
<n-upload-dragger>
|
||||
<div style="margin-bottom: 12px">
|
||||
<n-icon size="48" :depth="3">
|
||||
<upload-outlined />
|
||||
<cloud-upload-round />
|
||||
</n-icon>
|
||||
</div>
|
||||
<n-text style="font-size: 16px"> Click or drag a file to this area to upload </n-text>
|
||||
@@ -78,30 +99,131 @@ import {
|
||||
NP,
|
||||
NInput,
|
||||
NSwitch,
|
||||
NSelect,
|
||||
NTag,
|
||||
NCollapseTransition,
|
||||
NFormItem,
|
||||
type UploadCustomRequestOptions,
|
||||
type UploadSettledFileInfo,
|
||||
type SelectOption,
|
||||
type SelectRenderTag,
|
||||
} from 'naive-ui'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { UploadOutlined } from '@vicons/material'
|
||||
import { computed, h, onMounted, ref } from 'vue'
|
||||
import { CloudUploadRound } from '@vicons/material'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import type { SnFilePool } from '@/types/pool'
|
||||
|
||||
import * as tus from 'tus-js-client'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const version = ref<any>(null)
|
||||
|
||||
async function fetchVersion() {
|
||||
const resp = await fetch('/api/version')
|
||||
version.value = await resp.json()
|
||||
}
|
||||
|
||||
onMounted(() => fetchVersion())
|
||||
|
||||
type SnFilePoolOption = SnFilePool & any
|
||||
|
||||
const pools = ref<SnFilePoolOption[] | undefined>()
|
||||
async function fetchPools() {
|
||||
const resp = await fetch('/api/pools')
|
||||
pools.value = await resp.json()
|
||||
}
|
||||
onMounted(() => fetchPools())
|
||||
|
||||
const renderSingleSelectTag: SelectRenderTag = ({ option }) => {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
},
|
||||
[option.name as string],
|
||||
)
|
||||
}
|
||||
|
||||
function renderPoolSelectLabel(option: SelectOption & SnFilePool, selected: boolean) {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
padding: '8px 2px',
|
||||
},
|
||||
},
|
||||
[
|
||||
h('div', null, [option.name as string]),
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
gap: '0.25rem',
|
||||
marginTop: '2px',
|
||||
marginLeft: '-2px',
|
||||
marginRight: '-2px',
|
||||
},
|
||||
},
|
||||
[
|
||||
option.public_usable &&
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
type: 'info',
|
||||
size: 'small',
|
||||
round: true,
|
||||
},
|
||||
{ default: () => 'Public Shared' },
|
||||
),
|
||||
option.public_indexable &&
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
type: 'success',
|
||||
size: 'small',
|
||||
round: true,
|
||||
},
|
||||
{ default: () => 'Public Indexable' },
|
||||
),
|
||||
option.allow_encryption &&
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
type: 'warning',
|
||||
size: 'small',
|
||||
round: true,
|
||||
},
|
||||
{ default: () => 'Allow Encryption' },
|
||||
),
|
||||
option.allow_anonymous &&
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
type: 'info',
|
||||
size: 'small',
|
||||
round: true,
|
||||
},
|
||||
{ default: () => 'Allow Anonymous' },
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
)
|
||||
}
|
||||
|
||||
const modeAdvanced = ref(false)
|
||||
|
||||
const filePool = ref<string | null>(null)
|
||||
const filePass = ref<string>('')
|
||||
|
||||
const currentFilePool = computed(() => {
|
||||
if (!filePool.value) return null
|
||||
return pools.value?.find((pool) => pool.id === filePool.value) ?? null
|
||||
})
|
||||
|
||||
function customRequest({
|
||||
file,
|
||||
data,
|
||||
@@ -112,6 +234,9 @@ function customRequest({
|
||||
onError,
|
||||
onProgress,
|
||||
}: UploadCustomRequestOptions) {
|
||||
const requestHeaders: Record<string, string> = {}
|
||||
if (filePool.value) requestHeaders['X-FilePool'] = filePool.value
|
||||
if (filePass.value) requestHeaders['X-FilePass'] = filePass.value
|
||||
const upload = new tus.Upload(file.file, {
|
||||
endpoint: '/api/tus',
|
||||
retryDelays: [0, 3000, 5000, 10000, 20000],
|
||||
@@ -120,7 +245,7 @@ function customRequest({
|
||||
filetype: file.type ?? 'application/octet-stream',
|
||||
},
|
||||
headers: {
|
||||
'X-FilePass': filePass.value,
|
||||
...requestHeaders,
|
||||
...headers,
|
||||
},
|
||||
onError: function (error) {
|
||||
@@ -151,7 +276,10 @@ function customRequest({
|
||||
})
|
||||
}
|
||||
|
||||
function createThumbnailUrl(_file: File | null, fileInfo: UploadSettledFileInfo): string | undefined {
|
||||
function createThumbnailUrl(
|
||||
_file: File | null,
|
||||
fileInfo: UploadSettledFileInfo,
|
||||
): string | undefined {
|
||||
if (!fileInfo) return undefined
|
||||
return fileInfo.url ?? undefined
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user