- Etes-vous sûr de vouloir uploader ce fichier ?
- Ce fichier sera stocké sur le CDN de Discord et sera à jamais accessible. Ne diffusez rien de sensible.
- {{ fileSelected.name }}
+ Etes-vous sûr de vouloir uploader ces fichiers ?
+ Ces fichiers seront stockés sur le CDN de Discord et seront à jamais accessibles. Ne diffusez rien de sensible.
+ {{ value.name }}
@@ -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 {
diff --git a/src/utils/SocketEnvironment.vue b/src/utils/SocketEnvironment.vue
index fa0ed2b..28f7f74 100644
--- a/src/utils/SocketEnvironment.vue
+++ b/src/utils/SocketEnvironment.vue
@@ -12,6 +12,7 @@ import { IOListener, IORequest } from '@/utils/IORequest';
import { useUserStore } from '@/stores/userStore';
import { useGlobalStore } from '@/stores/globalStore';
import events from '@/utils/Events.js';
+import Events from '@/utils/Events.js';
const router = useRouter();
const interuptionMessage = ref(null);
@@ -43,6 +44,7 @@ import events from '@/utils/Events.js';
IORequest("/GUILD/LIST", (response) => {
if(response) {
userStore.userInfo.guilds = response;
+ Events.emit("GUILD_LIST_UPDATE", response);
}
})
})