Procházet zdrojové kódy

fix # 175223 Reset file selection state after custom logo deletion

hikaruNAKANO před 4 měsíci
rodič
revize
a64101ebec

+ 10 - 23
apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -28,16 +28,15 @@ const CustomizeLogoSetting = (): JSX.Element => {
   const [isImageCropModalShow, setIsImageCropModalShow] = useState<boolean>(false);
   const [isDefaultLogoSelected, setIsDefaultLogoSelected] = useState<boolean>(isDefaultLogo ?? true);
   const [retrieveError, setRetrieveError] = useState<any>();
-  const [isFileSelected, setIsFileSelected] = useState<boolean>(false)
+  const [isFileSelected, setIsFileSelected] = useState<boolean>(false);
   const [isImageCropped, setIsImageCropped] = useState<boolean>(false);
-  const [fileInputKey, setFileInputKey] = useState<string>(Date.now().toString());
+
 
   const onSelectFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     const hasFile = files != null && files.length > 0;
 
     setIsFileSelected(hasFile);
-    console.log('1. ファイル選択時 - isFileSelected:', hasFile);
     setIsImageCropped(false);
 
     if (hasFile) {
@@ -63,6 +62,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
       await apiv3Delete('/customize-setting/delete-brand-logo');
       setIsCustomizedLogoUploaded(false);
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.current_logo'), ns: 'commons' }));
+      setIsFileSelected(false);
     }
     catch (err) {
       toastError(err);
@@ -71,10 +71,6 @@ const CustomizeLogoSetting = (): JSX.Element => {
     }
   }, [setIsCustomizedLogoUploaded, t]);
 
-  const resetFileInput = useCallback(() => {
-    setFileInputKey(Date.now().toString());
-}, []);
-
   const processImageCompletedHandler = useCallback(async (croppedImage) => {
     try {
       const formData = new FormData();
@@ -82,20 +78,16 @@ const CustomizeLogoSetting = (): JSX.Element => {
       await apiv3PostForm('/customize-setting/upload-brand-logo', formData);
       setIsImageCropped(true);
       setIsCustomizedLogoUploaded(true);
-      setIsFileSelected(true)
-      console.log('2. アップロード成功時 - isImageCropped:', true);
+      setIsFileSelected(true);
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.current_logo'), ns: 'commons' }));
-      resetFileInput();
     }
     catch (err) {
       toastError(err);
       setRetrieveError(err);
-      setIsFileSelected(false); // エラー時はリセット
-      resetFileInput(); // 失敗時もファイル入力をリセット
-      console.log('2. アップロード失敗時 - isImageCropped:', false);
+      setIsFileSelected(false);
       throw new Error('Failed to upload brand logo');
     }
-  }, [setIsCustomizedLogoUploaded, t, resetFileInput, setIsFileSelected]);
+  }, [setIsCustomizedLogoUploaded, t, setIsFileSelected]);
 
   return (
     <React.Fragment>
@@ -162,7 +154,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
                     {t('admin:customize_settings.upload_new_logo')}
                   </label>
                   <div className="col-sm-8 col-12">
-                    <input key={fileInputKey} type="file" onChange={onSelectFile} name="brandLogo" accept="image/*" />
+                    <input type="file" onChange={onSelectFile} name="brandLogo" accept="image/*" />
                   </div>
                 </div>
               </div>
@@ -176,14 +168,9 @@ const CustomizeLogoSetting = (): JSX.Element => {
         isShow={isImageCropModalShow}
         src={uploadLogoSrc}
         onModalClose={() => {
-          setIsImageCropModalShow(false)
-          console.log('3. モーダルクローズ時 - isImageCropped (OLD):', isImageCropped);
-          if(!isImageCropped){
-            console.log('3. モーダルクローズ時 - 処理: キャンセル/エラーとしてリセット実行');
-            setIsFileSelected(false)
-            resetFileInput();
-          } else {
-            console.log('3. モーダルクローズ時 - 処理: アップロード成功としてリセット処理をスキップ');
+          setIsImageCropModalShow(false);
+          if (!isImageCropped) {
+            setIsFileSelected(false);
           }
           setIsImageCropped(false);
         }}