[FEAT] basic pop-up and upload a single file (can not read)

back/src/org/kar/karusic/api/TrackResource.java

@@ -10,17 +10,13 @@ import java.util.UUID;
 import org.glassfish.jersey.media.multipart.FormDataContentDisposition;
 import org.glassfish.jersey.media.multipart.FormDataParam;
 import org.kar.archidata.annotation.AsyncType;
+import org.kar.archidata.annotation.FormDataOptional;
 import org.kar.archidata.annotation.TypeScriptProgress;
 import org.kar.archidata.dataAccess.DataAccess;
-import org.kar.archidata.dataAccess.QueryCondition;
 import org.kar.archidata.dataAccess.addOn.AddOnDataJson;
 import org.kar.archidata.dataAccess.addOn.AddOnManyToMany;
-import org.kar.archidata.dataAccess.options.Condition;
 import org.kar.archidata.model.Data;
 import org.kar.archidata.tools.DataTools;
-import org.kar.karusic.model.Album;
-import org.kar.karusic.model.Artist;
-import org.kar.karusic.model.Gender;
 import org.kar.karusic.model.Track;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -66,7 +62,8 @@ public class TrackResource {
 	@Path("{id}")
 	@RolesAllowed("ADMIN")
 	@Consumes(MediaType.APPLICATION_JSON)
-	public Track patch(@PathParam("id") final Long id, @AsyncType(Track.class) final String jsonRequest) throws Exception {
+	public Track patch(@PathParam("id") final Long id, @AsyncType(Track.class) final String jsonRequest)
+			throws Exception {
 		DataAccess.updateWithJson(Track.class, id, jsonRequest);
 		return DataAccess.get(Track.class, id);
 	}
@@ -90,7 +87,8 @@ public class TrackResource {
 	@DELETE
 	@Path("{id}/artist/{trackId}")
 	@RolesAllowed("ADMIN")
-	public Track removeTrack(@PathParam("id") final Long id, @PathParam("artistId") final Long artistId) throws Exception {
+	public Track removeTrack(@PathParam("id") final Long id, @PathParam("artistId") final Long artistId)
+			throws Exception {
 		AddOnManyToMany.removeLink(Track.class, id, "artist", artistId);
 		return DataAccess.get(Track.class, id);
 	}
@@ -113,7 +111,8 @@ public class TrackResource {
 	@DELETE
 	@Path("{id}/cover/{coverId}")
 	@RolesAllowed("ADMIN")
-	public Track removeCover(@PathParam("id") final Long id, @PathParam("coverId") final UUID coverId) throws Exception {
+	public Track removeCover(@PathParam("id") final Long id, @PathParam("coverId") final UUID coverId)
+			throws Exception {
 		AddOnDataJson.removeLink(Track.class, id, "covers", coverId);
 		return DataAccess.get(Track.class, id);
 	}
@@ -125,32 +124,29 @@ public class TrackResource {
 	// Formatter:off
 	@AsyncType(Track.class)
 	@TypeScriptProgress
-	public Response uploadTrack(@FormDataParam("fileName") String fileName, //
+	public Response uploadTrack( //
-			@FormDataParam("gender") String gender, //
-			@FormDataParam("artist") String artist, //
-			// @FormDataParam("seriesId") String seriesId, Not used ...
-			@FormDataParam("album") String album, //
-			@AsyncType(Long.class) @FormDataParam("trackId") String trackId, //
 			@FormDataParam("title") String title, //
+			@FormDataOptional @AsyncType(Long.class) @FormDataParam("genderId") String genderId, //
+			@FormDataOptional @AsyncType(Long.class) @FormDataParam("artistId") String artistId, //
+			@FormDataOptional @AsyncType(Long.class) @FormDataParam("albumId") String albumId, //
+			@FormDataOptional @AsyncType(Long.class) @FormDataParam("trackId") String trackId, //
 			@FormDataParam("file") final InputStream fileInputStream, //
 			@FormDataParam("file") final FormDataContentDisposition fileMetaData //
 	) {
 		// Formatter:on
 		try {
 			// correct input string stream :
-			fileName = DataTools.multipartCorrection(fileName);
-			gender = DataTools.multipartCorrection(gender);
-			artist = DataTools.multipartCorrection(artist);
-			album = DataTools.multipartCorrection(album);
 			trackId = DataTools.multipartCorrection(trackId);
+			albumId = DataTools.multipartCorrection(albumId);
+			artistId = DataTools.multipartCorrection(artistId);
+			genderId = DataTools.multipartCorrection(genderId);
 			title = DataTools.multipartCorrection(title);
 
 			// public NodeSmall uploadFile(final FormDataMultiPart form) {
 			LOGGER.info("Upload media file: " + fileMetaData);
-			LOGGER.info("    > fileName: " + fileName);
+			LOGGER.info("    > genderId: " + genderId);
-			LOGGER.info("    > gender: " + gender);
+			LOGGER.info("    > artistId: " + artistId);
-			LOGGER.info("    > artist: " + artist);
+			LOGGER.info("    > albumId: " + albumId);
-			LOGGER.info("    > album: " + album);
 			LOGGER.info("    > trackId: " + trackId);
 			LOGGER.info("    > title: " + title);
 			LOGGER.info("    > fileInputStream: " + fileInputStream);
@@ -164,7 +160,7 @@ public class TrackResource {
 				LOGGER.info("Need to add the data in the BDD ... ");
 
 				try {
-					data = DataTools.createNewData(tmpUID, fileName, sha512);
+					data = DataTools.createNewData(tmpUID, fileMetaData.getFileName(), sha512);
 				} catch (final IOException ex) {
 					DataTools.removeTemporaryFile(tmpUID);
 					ex.printStackTrace();
@@ -181,60 +177,18 @@ public class TrackResource {
 			} else {
 				LOGGER.info("Data already exist ... all good");
 			}
-			// Fist step: retrieve all the Id of each parents:...
-			LOGGER.info("Find typeNode");
-			Gender genderElem = null;
-			if (gender != null) {
-				genderElem = DataAccess.getWhere(Gender.class, new Condition(new QueryCondition("name", "=", gender)));
-				if (genderElem == null) {
-					genderElem = new Gender();
-					genderElem.name = gender;
-					genderElem = DataAccess.insert(genderElem);
-				}
-			}
-			// NodeSmall typeNode = TypeResource.getWithId(Long.parseLong(typeId));
-			// if (typeNode == null) {
-			// DataTools.removeTemporaryFile(tmpUID);
-			// return Response.notModified("TypeId does not exist ...").build();
-			// }
-			LOGGER.info("    ==> genderElem={}", genderElem);
-
-			Artist artistElem = null;
-			if (artist != null) {
-				LOGGER.info("    Try to find Artist: '{}'", artist);
-				artistElem = DataAccess.getWhere(Artist.class, new Condition(new QueryCondition("name", "=", artist)));
-				if (artistElem == null) {
-					LOGGER.info("        ** Create a new one...");
-					artistElem = new Artist();
-					artistElem.name = artist;
-					artistElem = DataAccess.insert(artistElem);
-				}
-			}
-			LOGGER.info("    ==> artistElem={}", artistElem);
-
-			Album albumElem = null;
-			if (album != null) {
-				albumElem = DataAccess.getWhere(Album.class, new Condition(new QueryCondition("name", "=", album)));
-				if (albumElem == null) {
-					albumElem = new Album();
-					albumElem.name = album;
-					albumElem = DataAccess.insert(albumElem);
-				}
-			}
-			LOGGER.info("    ==> " + album);
-
 			LOGGER.info("add media");
 
 			Track trackElem = new Track();
 			trackElem.name = title;
 			trackElem.track = trackId != null ? Long.parseLong(trackId) : null;
-			trackElem.albumId = albumElem != null ? albumElem.id : null;
+			trackElem.albumId = albumId != null ? Long.parseLong(albumId) : null;
-			trackElem.genderId = genderElem != null ? genderElem.id : null;
+			trackElem.genderId = genderId != null ? Long.parseLong(genderId) : null;
 			trackElem.dataId = data.uuid;
 			// Now list of artist has an internal management:
-			if (artistElem != null) {
+			if (artistId != null) {
 				trackElem.artists = new ArrayList<>();
-				trackElem.artists.add(artistElem.id);
+				trackElem.artists.add(artistId != null ? Long.parseLong(artistId) : null);
 			}
 			trackElem = DataAccess.insert(trackElem);
 			/* Old mode of artist insertion (removed due to the slowlest request of getting value if (artistElem != null) { DataAccess.addLink(Track.class, trackElem.id, "artist", artistElem.id); } */

front/src/back-api/api/track-resource.ts

@@ -228,12 +228,11 @@ export namespace TrackResource {
 		}: {
 		restConfig: RESTConfig,
 		data: {
-			fileName: string,
 			file: File,
-			gender: string,
+			trackId?: Long,
-			artist: string,
+			genderId?: Long,
-			album: string,
+			albumId?: Long,
-			trackId: Long,
+			artistId?: Long,
 			title: string,
 		},
 		callbacks?: RESTCallbacks,

front/src/components/form/Formidable.tsx

@@ -86,6 +86,10 @@ export const useFormidable = <TYPE extends object = object>({
     setIsModify,
     setIsFormModified,
   ]);
+  const reset = useCallback(() => {
+    setValues({ ...initialData });
+  },
+    [setValues, initialData]);
   const setValuesExternal = useCallback(
     (data: object) => {
       //console.log(`FORMIDABLE: setValuesExternal(${JSON.stringify(data)}) ==> keys=${Object.keys(data)}`);
@@ -151,12 +155,13 @@ export const useFormidable = <TYPE extends object = object>({
     [isModify, values]
   );
   return {
-    values,
-    isModify,
-    isFormModified,
-    setValues: setValuesExternal,
     getDeltaData,
+    isFormModified,
+    isModify,
+    reset,
     restoreValue,
+    setValues: setValuesExternal,
+    values,
   };
 };
 

front/src/components/popup/PopUpUploadProgress.tsx

@@ -0,0 +1,92 @@
+import { ReactElement, useRef, useState } from 'react';
+
+import {
+  Button,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Progress,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+import {
+  MdAdminPanelSettings,
+  MdDeleteForever,
+  MdEdit,
+  MdWarning,
+} from 'react-icons/md';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { Artist, ArtistResource } from '@/back-api';
+import { FormCovers } from '@/components/form/FormCovers';
+import { FormGroup } from '@/components/form/FormGroup';
+import { FormInput } from '@/components/form/FormInput';
+import { FormTextarea } from '@/components/form/FormTextarea';
+import { useFormidable } from '@/components/form/Formidable';
+import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
+import { useArtistService, useSpecificArtist } from '@/service/Artist';
+import { useServiceContext } from '@/service/ServiceContext';
+import { useCountTracksOfAnArtist } from '@/service/Track';
+import { isNullOrUndefined } from '@/utils/validator';
+
+export type PopUpUploadProgressProps = {
+  title: string;
+  // current size send or receive
+  currentSize: number;
+  // Total size to transfer
+  totalSize: number;
+  // index of the file to transfer
+  index: number;
+  // List of element to Transfer
+  elements: string[];
+  onAbort: () => void;
+  onClose: () => void;
+};
+
+export const PopUpUploadProgress = ({
+  title,
+  currentSize,
+  totalSize,
+  index,
+  elements,
+  onAbort,
+  onClose,
+}: PopUpUploadProgressProps) => {
+  const disclosure = useDisclosure();
+  const initialRef = useRef(null);
+  const finalRef = useRef(null);
+  return (
+    <Modal
+      initialFocusRef={initialRef}
+      finalFocusRef={finalRef}
+      closeOnOverlayClick={false}
+      onClose={onClose}
+      isOpen={true}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalCloseButton ref={finalRef} />
+
+        <ModalBody pb={6} paddingLeft="18px">
+          <Flex direction="column" gap="10px">
+            <Text fontSize="20px" fontWeight="bold">[{index}/{elements.length}] {elements[index]}</Text>
+            <Progress colorScheme='green' hasStripe value={currentSize} isAnimated max={totalSize} height='24px' />
+            <Flex><Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text><Text marginLeft="auto">{totalSize.toLocaleString('fr-FR')} Bytes</Text></Flex>
+          </Flex>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme="red" mr={3} onClick={onAbort} ref={initialRef}>
+            Abort
+          </Button>
+          <Button onClick={onClose}>Close</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

front/src/components/select/SelectSingle.tsx

@@ -50,10 +50,9 @@ export const SelectSingle = ({
     onCreate ? suggestion : undefined
   );
   useEffect(() => {
-    if (suggestion) {
+    console.log(`Update suggestion : ${onCreate} ${suggestion} ==> ${onCreate ? suggestion : undefined} .. ${onCreate && !isNullOrUndefined(suggestion) ? true : false}`);
-      setCurrentSearch(suggestion);
+    setCurrentSearch(onCreate ? suggestion : undefined);
-      setHasSuggestion(true);
+    setHasSuggestion(onCreate && !isNullOrUndefined(suggestion) ? true : false);
-    }
   }, [suggestion]);
   const refFocus = ref ?? useRef<HTMLInputElement | null>(null);
   const selectedOptions = useMemo(() => {
@@ -111,7 +110,7 @@ export const SelectSingle = ({
           onFocus={() => setShowList(true)}
           onBlur={() => setTimeout(() => setShowList(false), 200)}
           value={
-            showList ? (currentSearch ?? '') : (selectedOptions?.name ?? hasSuggestion ? `suggest: ${currentSearch}` : '')
+            showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : ''))
           }
           backgroundColor={
             showList || !selectedOptions ? undefined : 'green.500'

front/src/scene/home/AddPage.tsx

@@ -1,8 +1,9 @@
-import { Album, AlbumResource, Artist, ArtistResource, Gender, GenderResource } from '@/back-api';
+import { Album, AlbumResource, Artist, ArtistResource, Gender, GenderResource, RestErrorResponse, Track, TrackResource } from '@/back-api';
 import { useFormidable } from '@/components/form/Formidable';
 import { FormInput } from '@/components/form/FormInput';
 import { FormSelect } from '@/components/form/FormSelect';
 import { PageLayout } from '@/components/Layout/PageLayout';
+import { PopUpUploadProgress } from '@/components/popup/PopUpUploadProgress';
 import { TopBar } from '@/components/TopBar/TopBar';
 import { useAlbumService, useOrderedAlbums } from '@/service/Album';
 import { useArtistService, useOrderedArtists } from '@/service/Artist';
@@ -47,7 +48,7 @@ export class FileFailParsedElement {
 
 type FormInsertData = {
   genderId?: number;
-  artistId?: number[];
+  artistId?: number;
   titleAlbum?: string;
 }
 
@@ -57,17 +58,8 @@ export const AddPage = () => {
   const [parsedElement, setParsedElement] = useState<FileParsedElement[]>([]);
   const [parsedFailedElement, setParsedFailedElement] = useState<FileFailParsedElement[] | undefined>(undefined);
 
-  const [uploadFileValue, setUploadFileValue] = useState<string>('');
-  const [selectedFiles, setSelectedFiles] = useState<FileList | undefined>(undefined);
-  const [genderId, setGenderId] = useState<number | undefined>(undefined);
-  const [artistId, setArtistId] = useState<number | undefined>(undefined);
-  const [albumId, setAlbumId] = useState<number | undefined>(undefined);
   const [needSend, setNeedSend] = useState<boolean>(false);
 
-  const [globalGender, setGlobalGender] = useState<string | undefined>(undefined);
-  const [globalArtist, setGlobalArtist] = useState<string | undefined>(undefined);
-  const [globalAlbum, setGlobalAlbum] = useState<string | undefined>(undefined);
-
   // list of all files already registered in the bdd to compare with the current list of files.
   const [listFileInBdd, setListFileInBdd] = useState<any[] | undefined>(undefined);
 
@@ -79,6 +71,8 @@ export const AddPage = () => {
   const { store: storeAlbum } = useAlbumService();
   const { session } = useServiceContext();
 
+  const form = useFormidable<FormInsertData>({});
+
   const updateNeedSend = () => {
     if (parsedElement.length === 0) {
       setNeedSend(false);
@@ -93,107 +87,8 @@ export const AddPage = () => {
     setNeedSend(tmp);
   }
 
-  const onGender = (value: any): void => {
-    // this.globalGender = value;
-    // let self = this;
-    // if (this.globalGender !== '') {
-    // 	this.genderService.getLike(this.globalGender)
-    // 		.then((response: any[]) => {
-    // 			console.log(`find element: ${response.length}`);
-    // 			for (let iii = 0; iii < response.length; iii++) {
-    // 				console.log(`    - ${JSON.stringify(response[iii])}`);
-    // 			}
-    // 			if (response.length === 0) {
-    // 				self.genderId = undefined;
-    // 			} else if (response.length === 1) {
-    // 				self.genderId = response[0].id;
-    // 			}
-    // 		}).catch((response) => {
-    // 			console.log('CAN NOT find element: ');
-    // 			self.genderId = undefined;
-    // 		});
-    // }
-    // updateNeedSend();
-  }
 
 
-  const onChangeGender = (value: any): void => {
-    // this.globalGender = value;
-    // if (!isNullOrUndefined(value)) {
-    // 	for (let iii = 0; iii < this.listGender.length; iii++) {
-    // 		if (this.listGender[iii].value === value) {
-    // 			this.globalGender = this.listGender[iii].label;
-    // 			break;
-    // 		}
-    // 	}
-    // }
-    // updateNeedSend();
-  }
-
-  const updateTheListOfAlbum = () => {
-    // this.listAlbum = [{ value: null, label: '---' }];
-    // if (isNullOrUndefined(this.artistId)) {
-    // 	return;
-    // }
-    // let self = this;
-    // this.trackService.getAlbumIdsOfAnArtist(this.artistId)
-    // 	.then((listAlbumIds: number[]) => {
-    // 		this.albumService.getAll(listAlbumIds)
-    // 			.then((response2) => {
-    // 				for (let iii = 0; iii < response2.length; iii++) {
-    // 					self.listAlbum.push({ value: response2[iii].id, label: response2[iii].name });
-    // 				}
-    // 			}).catch((response2) => {
-    // 				console.log(`get response22 : ${JSON.stringify(response2, null, 2)}`);
-    // 			});
-    // 	});
-  }
-  const onArtist = (value: any): void => {
-    // this.globalArtist = value;
-    // let self = this;
-    // if (this.globalArtist !== '') {
-    // 	console.log(`update artist List Element: ${this.globalArtist}`);
-    // 	this.artistService.getLike(this.globalArtist)
-    // 		.then((response: any[]) => {
-    // 			console.log(`  ==> find artist like ${this.globalArtist} : ${JSON.stringify(response, null, 2)}`);
-    // 			if (response.length === 0) {
-    // 				self.artistId = undefined;
-    // 			} else if (response.length === 1) {
-    // 				self.artistId = response[0].id;
-    // 				self.updateTheListOfAlbum();
-    // 			}
-    // 			if (!isNullOrUndefined(this.globalAlbum)) {
-    // 				this.onAlbum(this.globalAlbum)
-    // 			} else {
-    // 				self.updateListOfTrackToCheck();
-    // 			}
-    // 		}).catch((response) => {
-    // 			console.log(`  ==> CAN NOT find artist like ${this.globalArtist} : ${response.length}`);
-    // 			self.artistId = undefined;
-    // 		});
-    // }
-    // updateNeedSend();
-  }
-  const onChangeArtist = (value: any): void => {
-    // this.artistId = value;
-    // if (!isNullOrUndefined(value)) {
-    // 	for (let iii = 0; iii < this.listArtist.length; iii++) {
-    // 		if (this.listArtist[iii].value === value) {
-    // 			this.globalArtist = this.listArtist[iii].label;
-    // 			break;
-    // 		}
-    // 	}
-    // }
-    // updateNeedSend();
-    // updateListOfTrackToCheck();
-  }
-  const onAlbum = (value: any): void => {
-    // this.globalAlbum = value;
-    // // console.log("change episode ID: " + value + " ==> " + this.parseAlbum.toString());
-    // updateNeedSend();
-    // updateListOfTrackToCheck();
-  }
-
   const onTitle = (data: FileParsedElement, value: any): void => {
     data.title = value;
     setParsedElement([...parsedElement]);
@@ -216,22 +111,17 @@ export const AddPage = () => {
   const onTrackId = (data: FileParsedElement, value: any): void => {
     data.trackId = value;
     setParsedElement([...parsedElement]);
-    // // console.log("change episode ID: " + value + " ==> " + this.parseEpisode.toString());
     updateNeedSend();
   }
 
 
   const clearData = () => {
-    setGlobalGender(undefined);
-    setGlobalArtist(undefined);
-    setGlobalAlbum(undefined);
     setParsedElement([]);
     setParsedFailedElement(undefined);
     setListFileInBdd(undefined);
 
-    setGenderId(undefined);
+    setSuggestedArtist(undefined);
-    setArtistId(undefined);
+    setSuggestedAlbum(undefined);
-    setAlbumId(undefined);
   }
 
   const addFileWithMetaData = (file: File) => {
@@ -241,6 +131,8 @@ export const AddPage = () => {
     let trackIdNumber: number | undefined = undefined;
     let title: string = '';
 
+    form.reset();
+
     console.log(`select file ${file.name}`);
     let tmpName = file.name.replace(/[ \t]*-[ \t]*/g, '-');
     //tmpName = tmpName.replace(/_/g, '-');
@@ -318,7 +210,6 @@ export const AddPage = () => {
     setParsedFailedElement(parsedFailedElementTmp);
     console.log(`check : ${JSON.stringify(parsedElementTmp[0])}`)
 
-    setGlobalArtist(parsedElementTmp[0].artist);
     // find artistId:
     console.log(`try find artist : ${parsedElementTmp[0].artist}`);
     let artistFound = false;
@@ -330,10 +221,11 @@ export const AddPage = () => {
       }
     })
     if (!artistFound) {
+      console.log(`    set Suggested artist : ${parsedElementTmp[0].artist}`);
       setSuggestedArtist(parsedElementTmp[0].artist);
+    } else {
+      setSuggestedArtist(undefined);
     }
-
-    setGlobalAlbum(parsedElementTmp[0].album);
     // try to find album
     console.log(`try find album : ${parsedElementTmp[0].album}`);
     let albumFound = false;
@@ -345,201 +237,61 @@ export const AddPage = () => {
       }
     })
     if (!albumFound) {
+      console.log(`    set Suggested album : ${parsedElementTmp[0].album}`);
       setSuggestedAlbum(parsedElementTmp[0].album);
     }
     updateNeedSend();
-    setArtistId(undefined);
+  }
-    setAlbumId(undefined);
+
-    onArtist(globalArtist);
+  const [indexUpload, setIndexUpload] = useState<number | undefined>(undefined);
+  const [listValues, setListValues] = useState<string[]>([]);
+  const [currentPosition, setCurrentPosition] = useState<number>(0);
+  const [totalPosition, setTotalPosition] = useState<number>(0);
+
+  function progressUpload(count: number, total: number): void {
+    setTotalPosition(total);
+    setCurrentPosition(count);
+  }
+
+  const uploadNext = (): void => {
+
+    setIndexUpload((previous) => (previous ?? -1 + 1));
+
+    TrackResource.uploadTrack({
+      restConfig: session.getRestConfig(),
+      data: {
+        title: parsedElement[0].title,
+        file: parsedElement[0].file,
+        albumId: form.values['albumId'],
+        artistId: form.values['artistId'],
+        genderId: form.values['genderId'],
+        trackId: parsedElement[0].trackId,
+      }, callbacks: {
+        progressUpload: progressUpload
+      }
+    }).then((data: Track) => {
+      // TODO: add the element in the local base...
+      console.log(`element added: ${JSON.stringify(data, null, 2)}`);
+    }).catch((error: RestErrorResponse) => {
+      // TODO: manage error
+      console.log(`element error: ${JSON.stringify(error, null, 2)}`);
+    });
   }
 
   const sendFile = (): void => {
-    // console.log(`Send file requested ... ${this.parsedElement.length}`);
+    console.log(`Send file requested ... ${parsedElement.length}`);
-    // this.upload = new UploadProgress();
+    setListValues(parsedElement.map((element) => element.file.name));
-    // // display the upload pop-in
+    uploadNext();
-    // this.popInService.open('popin-upload-progress');
-    // this.globalUpLoad(0, this.parsedElement.length);
   }
 
-  const globalUpLoad = (id: number, total: number): void => {
+  function onUploadAbort(): void {
-    // let self = this;
+    //throw new Error('Function not implemented.');
-    // this.uploadFile(this.parsedElement[id], id, total, () => {
-    // 	let id2 = id + 1;
-    // 	if (id2 < total) {
-    // 		self.globalUpLoad(id2, total);
-    // 	} else {
-    // 		self.upload.result = 'Media creation done';
-    // 	}
-    // }, (value: string) => {
-    // 	self.upload.error = `Error in the upload of the data...${value}`;
-    // });
-  }
-  const uploadFile = (element: FileParsedElement, id: number, total: number, sendDone: any, errorOccurred: any): void => {
-    // let self = this;
-
-    // self.upload.labelMediaTitle = '';
-    // // add gender
-    // /*
-    // if(self.globalGender !== null) {
-    // 	self.upload.labelMediaTitle = self.upload.labelMediaTitle + self.globalGender;
-    // }
-    // */
-    // // add artist
-    // if (!isNullOrUndefined(self.globalArtist)) {
-    // 	if (self.upload.labelMediaTitle.length !== 0) {
-    // 		self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}:`;
-    // 	}
-    // 	self.upload.labelMediaTitle = self.upload.labelMediaTitle + self.globalArtist;
-    // }
-    // // add album
-    // if (!isNullOrUndefined(self.globalAlbum) && self.globalAlbum.toString().length !== 0) {
-    // 	if (self.upload.labelMediaTitle.length !== 0) {
-    // 		self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
-    // 	}
-    // 	self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}s${self.globalAlbum.toString()}`;
-    // }
-    // // add episode ID
-    // if (!isNullOrUndefined(element.trackId) && element.trackId.toString().length !== 0) {
-    // 	if (self.upload.labelMediaTitle.length !== 0) {
-    // 		self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
-    // 	}
-    // 	self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}e${element.trackId.toString()}`;
-    // }
-    // // add title
-    // if (self.upload.labelMediaTitle.length !== 0) {
-    // 	self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
-    // }
-    // self.upload.labelMediaTitle = `[${id + 1}/${total}]${self.upload.labelMediaTitle}${element.title}`;
-
-    // self.trackService.uploadFile(element.file,
-    // 	self.globalGender,
-    // 	self.globalArtist,
-    // 	self.globalAlbum,
-    // 	element.trackId,
-    // 	element.title,
-    // 	(count, totalTmp) => {
-    // 		// console.log("upload : " + count*100/totalTmp);
-    // 		self.upload.mediaSendSize = count;
-    // 		self.upload.mediaSize = totalTmp;
-    // 	})
-    // 	.then((response) => {
-    // 		console.log(`get response of track : ${JSON.stringify(response, null, 2)}`);
-    // 		sendDone();
-    // 	}).catch((response) => {
-    // 		// self.error = "Can not get the data";
-    // 		console.log('Can not add the data in the system...');
-    // 		errorOccurred(JSON.stringify(response, null, 2));
-    // 	});
   }
 
-  const checkSimilarString = (valueA: string, valueB: string): boolean => {
+  function OnUploadClose(): void {
-    // let valueAL = valueA.toLowerCase();
+    //throw new Error('Function not implemented.');
-    // let valueBL = valueB.toLowerCase();
-    // valueAL = valueAL.replace(/[ \t\n\r-_#~@]/g, '');
-    // valueBL = valueBL.replace(/[ \t\n\r-_#~@]/g, '');
-    // if (valueAL === valueBL) {
-    // 	return true;
-    // }
-    // if (valueAL.startsWith(valueBL)) {
-    // 	return true;
-    // }
-    // if (valueBL.startsWith(valueAL)) {
-    // 	return true;
-    // }
-    return false;
   }
 
-  const checkConcordance = (): void => {
-    // if (isNullOrUndefined(this.parsedElement)) {
-    // 	return;
-    // }
-    // // ckear checker
-    // for (let iii = 0; iii < this.parsedElement.length; iii++) {
-    // 	this.parsedElement[iii].nameDetected = false;
-    // 	this.parsedElement[iii].trackIdDetected = false;
-    // }
-    // if (isNullOrUndefined(this.listFileInBdd)) {
-    // 	return;
-    // }
-    // for (let iii = 0; iii < this.listFileInBdd.length; iii++) {
-    // 	this.listFileInBdd[iii].nameDetected = false;
-    // 	this.listFileInBdd[iii].trackIdDetected = false;
-    // }
-    // for (let iii = 0; iii < this.parsedElement.length; iii++) {
-    // 	for (let jjj = 0; jjj < this.listFileInBdd.length; jjj++) {
-    // 		if (this.checkSimilarString(this.parsedElement[iii].title, this.listFileInBdd[jjj].name)) {
-    // 			this.parsedElement[iii].nameDetected = true;
-    // 			this.listFileInBdd[jjj].nameDetected = true;
-    // 		}
-    // 		if (this.parsedElement[iii].trackId === this.listFileInBdd[jjj].episode) {
-    // 			this.parsedElement[iii].trackIdDetected = true;
-    // 			this.listFileInBdd[jjj].trackIdDetected = true;
-    // 		}
-    // 	}
-    // }
-  }
-
-  const updateListOfTrackToCheck = (): void => {
-    // // No artist ID set ==> nothing to do.
-    // if (isNullOrUndefined(this.artistId)) {
-    // 	this.listFileInBdd = undefined;
-    // 	return;
-    // }
-    // let self = this;
-    // // no album check only the artist files.
-    // if (isNullOrUndefined(this.globalAlbum)) {
-    // 	console.error(`NO ALBUM ==> check artist ID...`);
-    // 	self.trackService.getTracksOfAnArtist(self.artistId)
-    // 		.then((response: any[]) => {
-    // 			self.listFileInBdd = response;
-    // 			console.error(`find track: ${JSON.stringify(response, null, 2)}`);
-    // 			// for (let iii = 0; iii<response.length; iii++) {
-    // 			//	console.log("    - " + JSON.stringify(response[iii]));
-    // 			// }
-    // 			self.checkConcordance();
-    // 		}).catch((response) => {
-    // 			self.listFileInBdd = undefined;
-    // 		});
-    // 	return;
-    // }
-
-    // self.albumId = undefined;
-    // console.error(`ALBUM ==> check album values...`);
-    // // set 1 find the ID of the album:
-    // this.trackService.getAlbumIdsOfAnArtist(this.artistId)
-    // 	.then((listAlbumIds: number[]) => {
-    // 		this.artistService.getAll(listAlbumIds)
-    // 			.then((response: Artist[]) => {
-    // 				for (let iii = 0; iii < response.length; iii++) {
-    // 					// console.log("    - " + JSON.stringify(response[iii]) + 'compare with : ' + JSON.stringify(self.globalAlbum));
-    // 					if (response[iii].name === `${self.globalAlbum}`) {
-    // 						self.albumId = response[iii].id;
-    // 						break;
-    // 					}
-    // 				}
-    // 				if (isNullOrUndefined(self.albumId)) {
-    // 					return;
-    // 				}
-    // 				self.trackService.getTracksWithAlbumId(self.albumId)
-    // 					.then((response2: any[]) => {
-    // 						self.listFileInBdd = response2;
-    // 						console.log(`find album: ${JSON.stringify(response, null, 2)}`);
-    // 						// console.log("find track: " + response2.length);
-    // 						// for (let iii = 0; iii<response2.length; iii++) {
-    // 						//	console.log("    - " + JSON.stringify(response2[iii]));
-    // 						// }
-    // 						self.checkConcordance();
-    // 					}).catch((response3) => {
-    // 						self.listFileInBdd = undefined;
-    // 					});
-    // 			})
-    // 	}).catch((response4) => {
-    // 		self.listFileInBdd = undefined;
-    // 	});
-  }
-
-  const form = useFormidable<FormInsertData>({});
-
   const addNewGender = (data: string): Promise<Gender> => {
     return storeGender.update(GenderResource.post({
       restConfig: session.getRestConfig(),
@@ -565,11 +317,11 @@ export const AddPage = () => {
     }));
   }
 
+
   return (
     <>
       <TopBar title="Add new media" />
       <PageLayout>
-
         <Flex
           direction="column"
           width="80%"
@@ -685,7 +437,18 @@ export const AddPage = () => {
             </TableContainer>
           </>)}
         </Flex>
+        {indexUpload !== undefined &&
+          <PopUpUploadProgress
+            title="Upload File(s)"
+            currentSize={currentPosition}
+            totalSize={totalPosition}
+            index={indexUpload}
+            elements={listValues}
+            onAbort={onUploadAbort}
+            onClose={OnUploadClose} />
+        }
       </PageLayout >
     </>
   );
 };
+