added FilesCard implemented file API access
This commit is contained in:
parent
6533a39ede
commit
58dac185c0
|
|
@ -4,48 +4,220 @@
|
|||
<div class="text-h6">Home</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-none">
|
||||
<div class="q-pa-none">
|
||||
<q-table title="File system" :rows="data.file_list" :columns="columns" row-key="name" selection="single"
|
||||
v-model:selected="selected" :flat="true" :bordered="false" :rows-per-page-options="[10, 20, 30, 0]" />
|
||||
</div>
|
||||
<div class="q-pa-md">
|
||||
<q-table title="File system" :rows="data.file_list" :columns="columns" row-key="name" />
|
||||
<div><q-file v-model="file" label="Select file to upload" /></div>
|
||||
</div>
|
||||
<div class="q-pa-md">
|
||||
<q-btn class="btn q-ma-xs" flat label="DOWNLOAD" @click="DownloadFile"></q-btn>
|
||||
<q-btn class="btn q-ma-xs" flat label="UPLOAD" @click="UploadFile"></q-btn>
|
||||
<q-btn class="btn q-ma-xs" flat label="DELETE" @click="DeleteFile"></q-btn>
|
||||
<q-btn class="btn q-ma-xs" flat label="TEST SAVE" @click="SaveFile"></q-btn>
|
||||
</div>
|
||||
<div class="row q-pa-md">
|
||||
|
||||
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onUnmounted, reactive, onMounted } from "vue";
|
||||
import { computed, onUnmounted, reactive, onMounted, ref } from "vue";
|
||||
import { PostData } from "components/webguicomp//network";
|
||||
import { secondsToHms } from "components/webguicomp/helpers"
|
||||
import { useQuasar, Dialog } from 'quasar';
|
||||
const $q = useQuasar();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'fname',
|
||||
required: true,
|
||||
label: 'File name',
|
||||
align: 'left',
|
||||
field: 'name',
|
||||
sortable: true
|
||||
},
|
||||
{ name: 'ftype', label: 'File type', field: 'type', sortable: true },
|
||||
{ name: 'fsize', label: 'Size ', field: 'size' }
|
||||
{ name: 'fname', required: true, label: 'File name', align: 'left', field: 'name', sortable: true },
|
||||
{ name: 'fsize', label: 'Size ', align: 'left', field: 'size' }
|
||||
]
|
||||
|
||||
defineOptions({
|
||||
name: 'FilesCard'
|
||||
})
|
||||
|
||||
const BLOCK_SIZE = 5120;
|
||||
const init_list = [
|
||||
{
|
||||
sel: false,
|
||||
name: '',
|
||||
type: '',
|
||||
size: '',
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
async function SaveFile(data, fn) {
|
||||
let blobData = new Blob([data]);
|
||||
let url = window.URL.createObjectURL(blobData);
|
||||
let a = document.createElement("a");
|
||||
a.style = "display: none";
|
||||
document.body.appendChild(a);
|
||||
a.href = url;
|
||||
a.download = fn;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(urlFile);
|
||||
a.remove();
|
||||
}
|
||||
|
||||
function ReceiveChunk(cur, total, chunk) {
|
||||
let foper;
|
||||
if (total == 1) foper = 3;
|
||||
else if (cur == 0) foper = 1;
|
||||
else if (cur == (total - 1)) foper = 2;
|
||||
else foper = 0;
|
||||
let data = {
|
||||
raw_data: {
|
||||
opertype: 1,
|
||||
operphase: foper,
|
||||
mem_object: selected.value[0].name,
|
||||
size: BLOCK_SIZE,
|
||||
dat: ''
|
||||
}
|
||||
};
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log(`Receive chunk ${cur} from ${total}`)
|
||||
PostData(data, 1, 0, () => resolve(data))
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function base64ToArrayBuffer(base64) {
|
||||
var binaryString = atob(base64);
|
||||
var bytes = new Uint8Array(binaryString.length);
|
||||
for (var i = 0; i < binaryString.length; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
return bytes;
|
||||
}
|
||||
|
||||
async function ReveiveFileChunks(buf) {
|
||||
let chunksnum = Math.floor(selected.value[0].size / BLOCK_SIZE);
|
||||
if (selected.value[0].size % BLOCK_SIZE)
|
||||
chunksnum++;
|
||||
console.log(`Found ${chunksnum} blocks in file ${selected.value[0].name}`)
|
||||
let i;
|
||||
let chunk, resp;
|
||||
const dialog = Dialog.create({ message: 'Downloaded 0%', progress: true, persistent: true, ok: false, style: 'border: none; box-shadow: none;' })
|
||||
for (i = 0; i < chunksnum; i++) {
|
||||
resp = await ReceiveChunk(i, chunksnum, chunk);
|
||||
let decoded = base64ToArrayBuffer(resp.raw_data.dat);
|
||||
for (let k = 0; k < decoded.byteLength; k++)
|
||||
buf[i * BLOCK_SIZE + k] = decoded[k];
|
||||
dialog.update({ message: `Downloaded ${Math.floor(i * 100 / chunksnum)}%` })
|
||||
}
|
||||
dialog.hide();
|
||||
}
|
||||
|
||||
async function DownloadFile() {
|
||||
if (selected.value[0]) {
|
||||
const buf = new Uint8Array(selected.value[0].size);
|
||||
await ReveiveFileChunks(buf);
|
||||
SaveFile(buf, selected.value[0].name);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function ToBase64(bytes) {
|
||||
var binary = '';
|
||||
var len = bytes.byteLength;
|
||||
for (var i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return window.btoa(binary);
|
||||
}
|
||||
|
||||
function SendChunk(cur, total, reader) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let arr;
|
||||
if (cur == (total - 1))
|
||||
arr = new Uint8Array(reader.result, cur * BLOCK_SIZE);
|
||||
else
|
||||
arr = new Uint8Array(reader.result, cur * BLOCK_SIZE, BLOCK_SIZE);
|
||||
let encode = ToBase64(arr);
|
||||
let length = encode.length;
|
||||
|
||||
let foper;
|
||||
if (total == 1) foper = 3;
|
||||
else if (cur == 0) foper = 1;
|
||||
else if (cur == (total - 1)) foper = 2;
|
||||
else foper = 0;
|
||||
|
||||
let data = {
|
||||
raw_data: {
|
||||
opertype: 3,
|
||||
operphase: foper,
|
||||
mem_object: file.value.name,
|
||||
size: length,
|
||||
dat: encode
|
||||
}
|
||||
};
|
||||
|
||||
console.log(`Send chunk ${cur} from ${total} length ${arr.byteLength}`)
|
||||
PostData(data, 1, 0, () => resolve())
|
||||
})
|
||||
}
|
||||
|
||||
async function SendFileChunks(reader) {
|
||||
let chunksnum = Math.floor(reader.result.byteLength / BLOCK_SIZE);
|
||||
if (reader.result.byteLength % BLOCK_SIZE)
|
||||
chunksnum++;
|
||||
console.log(`Found ${chunksnum} blocks in file`)
|
||||
let i;
|
||||
const dialog = Dialog.create({ message: 'Uploaded 0%', progress: true, persistent: true, ok: false, style: 'border: none; box-shadow: none;' })
|
||||
for (i = 0; i < chunksnum; i++) {
|
||||
await SendChunk(i, chunksnum, reader);
|
||||
dialog.update({ message: `Uploaded ${Math.floor(i * 100 / chunksnum)}%` })
|
||||
}
|
||||
dialog.update({ message: 'Done.Refreshing file list...' });
|
||||
PostData(data, 2, 0, () => { dialog.hide() });
|
||||
}
|
||||
|
||||
function UploadFile() {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
console.log(`File "${file.value.name}" with size ${file.value.size} byte`);
|
||||
if (reader.result.byteLength == 0)
|
||||
return;
|
||||
SendFileChunks(reader);
|
||||
}
|
||||
reader.readAsArrayBuffer(file.value);
|
||||
}
|
||||
|
||||
function DeleteFile() {
|
||||
if (selected.value[0]) {
|
||||
$q.dialog({
|
||||
title: 'Confirm delete file',
|
||||
message: `Are you really wan to delete file "${selected.value[0].name}"?`,
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
const dialog = Dialog.create({ message: 'Waiting for delete finished...', progress: true, persistent: true, ok: false, style: 'border: none; box-shadow: none;' })
|
||||
|
||||
PostData({
|
||||
raw_data: {
|
||||
opertype: 2,
|
||||
operphase: 3,
|
||||
mem_object: selected.value[0].name,
|
||||
offset: 0,
|
||||
size: 0
|
||||
}
|
||||
}, 1, 0, () => { PostData(data, 2, 0, () => { dialog.hide(); }) })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const init = {
|
||||
file_list: [init_list]
|
||||
}
|
||||
|
||||
const data = reactive(init);
|
||||
const selected = ref([]);
|
||||
const file = ref(null);
|
||||
|
||||
PostData(data, 2, 0, null);
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user