Merge pull request #112 from tempfiles-Team/111-파일-드래그-업로드

111 파일 드래그 업로드

Author: ananjaemin

src/components/common/FileFind/index.tsx

@@ -4,12 +4,24 @@ import * as S from './styled';
 
 type FileFindProps = {
   handleChangeFile: any;
+  handleDrop: any;
+  handleDragOver: any;
   fileProps: any;
 };
 
-export const FileFind: React.FC<FileFindProps> = ({ handleChangeFile, fileProps }) => (
+export const FileFind: React.FC<FileFindProps> = ({
+  handleChangeFile,
+  fileProps,
+  handleDrop,
+  handleDragOver,
+}) => (
   <S.FileFindContainer>
-    <S.FileFindTextBox>
+    <S.FileFindLabelBox
+      id="label-file-upload"
+      htmlFor="input-file-upload"
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
       {fileProps.filename != '' && fileProps.size != '' && fileProps.fileType != ''
         ? '이름:' +
           fileProps.filename +
@@ -18,9 +30,14 @@ export const FileFind: React.FC<FileFindProps> = ({ handleChangeFile, fileProps
           ' / 타입:' +
           fileProps.fileType
         : '업로드 할 파일을 선택해주세요....'}
-    </S.FileFindTextBox>
+    </S.FileFindLabelBox>
 
-    <S.FileFindButton htmlFor="file">찾아보기</S.FileFindButton>
-    <input type={'file'} id="file" style={{ display: 'none' }} onChange={handleChangeFile} />
+    <S.FileFindButton htmlFor="input-file-upload">찾아보기</S.FileFindButton>
+    <input
+      id="input-file-upload"
+      type={'file'}
+      style={{ display: 'none' }}
+      onChange={handleChangeFile}
+    />
   </S.FileFindContainer>
 );

src/components/common/FileFind/styled.ts

@@ -7,7 +7,7 @@ export const FileFindContainer = styled.div`
   margin-top: 2rem;
 `;
 
-export const FileFindTextBox = styled.div`
+export const FileFindLabelBox = styled.label`
   border: 0.4rem solid var(--color-border);
   border-radius: 1rem;
   width: 45rem;

src/pages/main/index.tsx

@@ -47,6 +47,7 @@ export const MainPage: React.FC = () => {
   const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
 
   const handleChangeFile = (event: any) => {
+    event.preventDefault();
     setFileProps({
       filename: event.target.files[0].name,
       size: getFileSize(event.target.files[0].size),
@@ -56,6 +57,22 @@ export const MainPage: React.FC = () => {
     });
   };
 
+  const handleDrop = function (event: any) {
+    event.preventDefault();
+    setFileProps({
+      filename: event.dataTransfer.files[0].name,
+      size: getFileSize(event.dataTransfer.files[0].size),
+      fileType:
+        event.dataTransfer.files[0].type === ''
+          ? 'application/actet-stream'
+          : event.dataTransfer.files[0].type,
+      fileData: event.dataTransfer.files[0],
+    });
+  };
+  const dragOver = (event: any) => {
+    event.preventDefault();
+  };
+
   const UpLoad = async () => {
     if (fileProps.filename != '' && fileProps.size != '') {
       const formdata = new FormData();
@@ -168,7 +185,12 @@ export const MainPage: React.FC = () => {
               placeholder="비밀번호를 입력해주세요."
             />
           )}
-          <FileFind handleChangeFile={handleChangeFile} fileProps={fileProps} />
+          <FileFind
+            handleDrop={handleDrop}
+            handleDragOver={dragOver}
+            handleChangeFile={handleChangeFile}
+            fileProps={fileProps}
+          />
           <UpLoadButton type={'button'} value={'업로드'} onClick={UpLoad} />
         </>
       ) : (

src/utils/getDate.ts

@@ -10,7 +10,7 @@ export const getExpireTime = (date: string) => {
   const differenceTime = expireTime.getTime() - today.getTime();
   const differenceTimeDay =
     differenceTime / (1000 * 60 * 60 * 24) >= 0 ? differenceTime / (1000 * 60 * 60 * 24) : 0;
-  console.log(differenceTimeDay);
+
   let differenceTimeHour = differenceTime / (1000 * 60 * 60);
   while (true) {
     differenceTimeHour %= 24;