add image conver button

src/app/components/UploadSectionFile.tsx

@@ -20,6 +20,7 @@ interface SelectedFile {
 	progress: number;
 	status: 'pending' | 'uploading' | 'completed' | 'error' | 'cancelled';
 	error?: string;
+	needConvert?: boolean;
 }
 
 interface FileUploadInitResponse {
@@ -238,7 +239,7 @@ export default function UploadSectionFile({
 				file_size: fileInfo.file.size
 			};
 
-			const response = await fileUpload(initMessageBody) as FileUploadInitResponse;
+			const response = await fileUpload(initMessageBody, fileInfo.needConvert) as FileUploadInitResponse;
 
 			if (!response?.upload_id) {
 				throw new Error('Failed to get upload_id');
@@ -392,6 +393,18 @@ export default function UploadSectionFile({
 		}
 	});
 
+	function converButtonHandler(file: SelectedFile) {
+		setSelectedFiles(selectedFiles.map(selectedFile => {
+			if (selectedFile.name === file.name) {
+				return {
+					...selectedFile,
+					needConvert: !selectedFile.needConvert
+				};
+			}
+			return selectedFile;
+		}));
+	}
+
 
 	return (
 		<div className="upload-section" >
@@ -529,34 +542,54 @@ export default function UploadSectionFile({
 													}
 												</div>
 												<div className="selected-file-right-block">
-													<span className={
-														`upload-progress ${file.status === 'completed' ? 'text-green-600' :
-															file.status === 'uploading' ? 'text-blue-600' :
-																'text-gray-600'
-														}`
-													}>
-														{file.progress} %
-													</span>
-													< button
-														className="btn btn-cancel"
-														onClick={() => handleClearFile(file.uploadId || file.name)}
-														type="button"
-													>
-														{t('remove')}
-													</button>
+													{
+														(fileType === 'image' && file.status === 'pending') && (
+															<button
+																className={`btn-convert ${file.needConvert ? 'active' : ''}`}
+																onClick={() => {
+																	converButtonHandler(file);
+																}}
+															>
+																{t('convert-image')} jpg
+															</button>
+														)
+													}
+													<div>
+														<span className={
+															`upload-progress ${file.status === 'completed' ? 'text-green-600' :
+																file.status === 'uploading' ? 'text-blue-600' :
+																	'text-gray-600'
+															}`
+														}>
+															{file.progress} %
+														</span>
+														< button
+															className="btn btn-cancel"
+															onClick={() => handleClearFile(file.uploadId || file.name)}
+															type="button"
+														>
+															{t('remove')}
+														</button>
+													</div>
 												</div>
 											</div>
 
 											{
 												(fileType === 'image' && file.preview) && (
-													<img
-														src={file.preview}
-														alt="Предпросмотр загруженного изображения"
-														className="uploaded-image"
-														onError={() => setError('Не удалось загрузить превью изображения')
-														}
-													/>
-												)}
+													<div
+														className="image-preview-wrapper"
+													>
+														<img
+															src={file.preview}
+															alt="Предпросмотр загруженного изображения"
+															className="uploaded-image"
+															onError={() => setError('Не удалось загрузить превью изображения')
+															}
+														/>
+													</div>
+
+												)
+											}
 
 											{
 												file.status === 'pending' && (