Merge pull request #101 from Yangjaecheon-Otter-Guardians/feature/ima…

…ge-upload Feature/image heic적응
Yangjaecheon-Otter-Guardians · Feb 27, 2023 · 3a04cd7 · 3a04cd7
2 parents f3e7619 + c017862
commit 3a04cd7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
     "@types/react-toastify": "^4.1.0",
     "axios": "^1.3.4",
     "downloadjs": "^1.4.7",
+    "heic2any": "^0.0.3",
     "html-to-image": "^1.11.11",
     "react": "^18.2.0",
     "react-color": "^2.19.3",

diff --git a/frontend/src/components/ImageUploader.tsx b/frontend/src/components/ImageUploader.tsx
@@ -1,14 +1,29 @@
 import { Icon } from '@iconify/react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { isImageBright, previewImage } from '../atom';
+import heic2jpeg from 'heic2any';
+import heic2any from 'heic2any';
 
 const ImageUploader = () => {
   const setImageSrc = useSetRecoilState(previewImage);
   const [isBright, setIsBright] = useRecoilState(isImageBright);
   const insertImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const reader = new FileReader();
-    if (e.target?.files?.[0]) {
-      reader.readAsDataURL(e.target.files[0]);
+    const file = e.target?.files?.[0] as File;
+    if (file.name.split('.')[1] === 'heic') {
+      const blob = file;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      heic2any({ blob: blob, toType: 'image/jpeg' }).then(function (resultBlob: any) {
+        const newFile = new File([resultBlob], file.name.split('.')[0] + '.jpg', {
+          type: 'image/jpeg',
+          lastModified: new Date().getTime(),
+        });
+        reader.readAsDataURL(newFile);
+      });
+    } else {
+      if (e.target?.files?.[0]) {
+        reader.readAsDataURL(e.target.files[0]);
+      }
     }
     reader.onloadend = () => {
       const previewImgUrl = reader.result as string;