see how many image have been uploaded yet and then update imageList

frontend/src/components/Upload.vue

@@ -18,7 +18,9 @@ export default defineComponent({
 		return {
 			file: null as FileList | null,
 			titleSendButton: "Envoyer",
-			classSendButton: ""
+			classSendButton: "",
+			requestSent: 0,
+			requestEnded: 0,
 		}
 	},
 	props: {
@@ -39,16 +41,15 @@ export default defineComponent({
 				this.classSendButton = "error"
 				return;
 			}
+			this.titleSendButton = "Envoi en cours (" + this.requestEnded + "/" + this.file.length + ")";
 			Array.from(this.file).forEach((file, id) => {
-
 				let formData = new FormData();
 				formData.append('file', file);
-				api.createImage(formData);
+				this.requestSent++;
+				const resp = api.createImage(formData);
+				resp.then(() => { this.requestEnded++; })
 			});
-			this.$emit('updateImageList');
 			this.resetFile();
-			this.titleSendButton = "Envoyé"
-			this.classSendButton = "sent"
 		},
 		handleFilesUpload(event: InputFileEvent) {
 			this.file = event.target.files;
@@ -89,6 +90,16 @@ export default defineComponent({
 					}
 				};
 			});
+		},
+		requestEnded() {
+			if (this.requestEnded === this.requestSent) {
+				this.titleSendButton = "Images envoyées"
+				this.classSendButton = "sent"
+				this.$emit('updateImageList');
+				this.requestSent = 0;
+				this.requestEnded = 0;
+			} else
+				this.titleSendButton = "Envoi en cours (" + this.requestEnded + "/" + this.requestSent + ")";
 		}
 	}
 })
@@ -99,7 +110,7 @@ export default defineComponent({
 		<div class="inputform" for="fileUpload">
 			<input style="position: absolute; left: -9999px; opacity: 0;" class="fileUpload" id="fileUpload" type="file"
 				@change="handleFilesUpload($event as InputFileEvent)" accept="image/png, image/jpeg" multiple />
-			<label class="button" for="fileUpload" id="labelInput">Choisir une ou plusieurs image(s)...</label>
+			<label class="button" for="fileUpload" id="labelInput"><span>Choisir une ou plusieurs image(s)...</span></label>
 			<label class="filename button" for="fileUpload">{{ nameLabelInput() }}</label>
 		</div>
 		<button class="button" :class="classSendButton" @click="submitImage()" @mouseleave="resetSendButton()">{{
@@ -126,6 +137,7 @@ img {
 	align-items: center;
 	justify-content: space-evenly;
 	gap: 20px;
+	flex-wrap: wrap;
 }
 
 label {
@@ -147,6 +159,7 @@ h2 {
 	color: black;
 	border: 1px solid #1a1a1a;
 	border-radius: 0 8px 8px 0;
+	/* white-space: nowrap; */
 }
 
 #labelInput {
@@ -154,6 +167,10 @@ h2 {
 	background-color: #1a1a1a;
 }
 
+.inputform {
+	flex-shrink: 0;
+}
+
 .inputform:hover label {
 	border-color: #646cff;
 }
@@ -164,6 +181,7 @@ h2 {
 	align-items: center;
 	justify-content: space-evenly;
 	flex-wrap: wrap;
+	white-space: nowrap;
 }
 
 .imagePreview {
@@ -194,4 +212,15 @@ h2 {
 	color: green;
 	font-weight: bold;
 }
+
+@media screen and (max-width: 600px) {
+	.filename {
+		display: none;
+	}
+
+	#labelInput {
+		border-radius: 8px;
+	}
+
+}
 </style>

frontend/src/http-api.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosResponse, AxiosError } from 'axios';
+import axios, { AxiosResponse, AxiosError, HttpStatusCode } from 'axios';
 import { ImageType } from '@/image';
 
 const instance = axios.create({
@@ -7,10 +7,11 @@ const instance = axios.create({
 });
 
 const responseBody = (response: AxiosResponse) => response.data;
+const responseStatus = (response: AxiosResponse) => response.status;
 
 const requests = {
 	get: (url: string, param: {}) => instance.get(url, param).then(responseBody),
-	post: (url: string, body: {}) => instance.post(url, body, { headers: { "Content-Type": "multipart/form-data" }, }).then(responseBody),
+	post: (url: string, body: {}) => instance.post(url, body, { headers: { "Content-Type": "multipart/form-data" }, }).then(responseStatus),
 	put: (url: string, body: {}) => instance.put(url, body).then(responseBody),
 	delete: (url: string) => instance.delete(url).then(responseBody)
 };
@@ -18,6 +19,6 @@ const requests = {
 export const api = {
 	getImageList: (): Promise<ImageType[]> => requests.get('images', {}),
 	getImage: (id: number): Promise<Blob> => requests.get(`images/${id}`, { responseType: "blob" }),
-	createImage: (form: FormData): Promise<ImageType> => requests.post('images', form),
+	createImage: (form: FormData): Promise<HttpStatusCode> => requests.post('images', form),
 	deleteImage: (id: number): Promise<void> => requests.delete(`images/${id}`),
 };