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