subsonics/chopin-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version 1.1.0 - Modification et ajout de fonctionnalités
All checks were successful
Frontend Deployment / deploy-frontend (push) Successful in 34s
Details

Browse Source
This commit is contained in:
Raphael
2025-09-06 15:47:05 +02:00
parent febe1f90a2
commit b2a95c0241
9 changed files with 163 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/Widget/View/UploadFiles.vue
View File

@@ -4,7 +4,7 @@
<h2><Icon icon="fa-folder"/> Mes fichiers</h2>
<Box box-class="area-container" padding="close" level="second">
<div class="upload-area">
<Button :color-lower="status === 'download'" :disabled="status === 'download'" class="upload-button" @click="uploadFile()"><Icon icon="fa-upload"/> Ajouter un fichier</Button>
<Button :color-lower="status === 'download'" :disabled="status === 'download'" class="upload-button" @click="uploadFile()"><Icon icon="fa-upload"/> Ajouter des fichiers</Button>
<p v-if="status === 'download'" class="upload-file-name" ref="uploadStatus"><Icon icon='fa-spinner' spin-pulse/> Téléchargement en cours...</p>
<p v-else-if="status === 'error'" class="upload-status" ref="uploadStatus"><Error>Erreur lors du téléchargement</Error></p>
<p v-else-if="status === 'toohigh'" class="upload-status" ref="uploadStatus"><Error>Le fichier est trop volumineux</Error></p>
@@ -14,15 +14,17 @@
<p class="text-secondary infosup"><Icon icon="fa-circle-info"/> Ce système n'est pas un stockage permanent de données car il dépend du CDN de Discord. Vos fichiers peuvent exprirer à tout moment.</p>
</Box>
</div>
<div v-if="myFiles && myFiles.length > 0" class="uploaded-files">
<div v-if="myFiles && myFiles.length > 0" class="uploaded-files-container">
<div class="uploaded-files">
<span v-for="file in myFiles" :key="file.id"><VideoComposable :video="file" delete/></span>
</div>
</div>
<p v-else-if="isLoading" class="none"><Icon icon="fa-spinner" spin-pulse/> Chargement des fichiers...</p>
<p v-else class="none"><Icon icon="fa-circle-xmark"/> Aucun fichier enregistré</p>
<Modal icon="fa-upload" title="Uploader un fichier" ref="uploadModal">
<p>Etes-vous sûr de vouloir uploader ce fichier ?</p>
<p class="text-secondary">Ce fichier sera stocké sur le CDN de Discord et sera à jamais accessible. Ne diffusez rien de sensible.</p>
<p v-if="fileSelected" class="upload-modal-name"><Icon icon="fa-file"/> {{ fileSelected.name }}</p>
<p>Etes-vous sûr de vouloir uploader ces fichiers ?</p>
<p class="text-secondary">Ces fichiers seront stockés sur le CDN de Discord et seront à jamais accessibles. Ne diffusez rien de sensible.</p>
<p v-if="fileSelected.length > 0" v-for="value in fileSelected" class="upload-modal-name"><Icon icon="fa-file"/> {{ value.name }}</p>
<div class="upload-actions">
<Button @click="closeModal()">Annuler</Button>
<Button @click="confirmUpload()">Confirmer</Button>
@@ -41,7 +43,7 @@ import { IORequest } from '@/utils/IORequest';
import { onMounted, onUnmounted, ref } from 'vue';
import Events from '@/utils/Events';
const fileSelected = ref(null);
const fileSelected = ref([]);
const status = ref(false);
const uploadModal = ref(null);
const myFiles = ref([]);
@@ -66,53 +68,68 @@ function uploadFile() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.mp3,.wav,.ogg'; // Accept audio files
input.multiple = true;
input.onchange = (event) => {
const file = event.target.files[0];
if (file) {
fileSelected.value = file;
// Here you would typically handle the file upload to the server
console.log(`File selected: ${file.name}`);
// Reset the input for future uploads
const files = Array.from(event.target.files);
if (files.length > 0) {
fileSelected.value = files;
console.log(`Files selected:`, files.map(f => f.name));
input.value = '';
// destroy input
input.remove();
uploadModal.value.open();
} else {
fileSelected.value = null;
fileSelected.value = [];
}
};
input.click();
}
function confirmUpload() {
console.log(`Uploading file: ${fileSelected.value.name}`);
async function confirmUpload() {
if (fileSelected.value.length === 0) return;
status.value = 'download';
uploadModal.value.close();
if(fileSelected.value) {
// Send the file to the server
const reader = new FileReader();
reader.onload = () => {
const fileBuffer = reader.result;
// If it's higher than 300mb
let errorOccurred = false;
for (const file of fileSelected.value) {
try {
const fileBuffer = await readFileAsArrayBuffer(file);
if (fileBuffer.byteLength > 300 * 1024 * 1024) {
status.value = 'toohigh';
console.error('File is too large');
return;
errorOccurred = true;
continue;
}
IORequest('/UPLOAD/FILE', (response) => {
if(!response) {
status.value = 'error';
} else if(response === "TOOHIGH") {
status.value = 'toohigh';
} else {
status.value = 'success';
}
refreshUploadedFiles();
}, {name: fileSelected.value.name, file: fileBuffer})
fileSelected.value = null;
};
reader.readAsArrayBuffer(fileSelected.value);
await new Promise(resolve => {
IORequest('/UPLOAD/FILE', (response) => {
if (!response || response === "TOOHIGH") {
errorOccurred = true;
status.value = (response === "TOOHIGH") ? 'toohigh' : 'error';
}
resolve();
}, { name: file.name, file: fileBuffer });
});
} catch (err) {
console.error("Erreur upload fichier:", file.name, err);
errorOccurred = true;
}
}
status.value = errorOccurred ? status.value : 'success';
refreshUploadedFiles();
fileSelected.value = [];
}
// Petite fonction utilitaire pour transformer FileReader en promesse
function readFileAsArrayBuffer(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
}
@@ -149,6 +166,17 @@ function refreshUploadedFiles() {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
position: absolute;
width: 100%;
}
.uploaded-files-container {
position: relative;
flex: 1;
display: flex;
width: 100%;
height: 100%;
overflow-y: auto;
}
.none {