add extension dropdown for image convert

src/app/components/UploadSectionFile.tsx

@@ -6,8 +6,9 @@ import { fileUpload, cancelUpload, chunkUpload, checkChunkStatus } from '@/app/a
 import { useTranslations } from 'next-intl';
 import { useNavigationBlocker } from '@/app/hooks/useNavigationBlocker';
 import { useQueryClient } from '@tanstack/react-query';
+import DropDownListForImageConvert from '@/app/components/DropDownListForImageConvert';
 
-interface SelectedFile {
+export interface SelectedFile {
 	file: File;
 	preview: string | undefined;
 	name: string;
@@ -20,7 +21,7 @@ interface SelectedFile {
 	progress: number;
 	status: 'pending' | 'uploading' | 'completed' | 'error' | 'cancelled';
 	error?: string;
-	needConvert?: boolean;
+	convertTo?: string | null;
 }
 
 interface FileUploadInitResponse {
@@ -239,7 +240,7 @@ export default function UploadSectionFile({
 				file_size: fileInfo.file.size
 			};
 
-			const response = await fileUpload(initMessageBody, fileInfo.needConvert) as FileUploadInitResponse;
+			const response = await fileUpload(initMessageBody, fileInfo.convertTo) as FileUploadInitResponse;
 
 			if (!response?.upload_id) {
 				throw new Error('Failed to get upload_id');
@@ -393,12 +394,15 @@ export default function UploadSectionFile({
 		}
 	});
 
-	function converButtonHandler(file: SelectedFile) {
+	function converButtonHandler(value: {
+		convertTo: string;
+		file: SelectedFile
+	}): void {
 		setSelectedFiles(selectedFiles.map(selectedFile => {
-			if (selectedFile.name === file.name) {
+			if (selectedFile.name === value.file.name) {
 				return {
 					...selectedFile,
-					needConvert: !selectedFile.needConvert
+					convertTo: value.convertTo
 				};
 			}
 			return selectedFile;
@@ -544,14 +548,31 @@ export default function UploadSectionFile({
 												<div className="selected-file-right-block">
 													{
 														(fileType === 'image' && file.status === 'pending') && (
-															<button
-																className={`btn-convert ${file.needConvert ? 'active' : ''}`}
-																onClick={() => {
-																	converButtonHandler(file);
-																}}
-															>
-																{t('convert-image')} jpg
-															</button>
+															<>
+																<DropDownListForImageConvert
+																	value={file.convertTo}
+																	translatedValue={file.convertTo === 'reject' ? t('do-not-convert') : file.convertTo}
+																	callBack={converButtonHandler}
+																	selectedFiles={selectedFiles}
+																>
+																	<li data-file={file.name} data-convert-to="reject">
+																		{t('do-not-convert')}
+																	</li>
+																	{
+																		allowedExtensions && allowedExtensions.map(extension => {
+																			if (extension === 'gif') {
+																				return null
+																			}
+
+																			return (
+																				<li key={extension} data-file={file.name} data-convert-to={extension}>
+																					{t('convert-to')} {extension}
+																				</li>
+																			)
+																		})
+																	}
+																</DropDownListForImageConvert>
+															</>
 														)
 													}
 													<div>