첨부파일 DRAG and Drop에서 특정 파일만 업로드하기

👌 첨부파일 input에서는 아래 코드 처럼 accept를 이용하여 특정파일만 받을 수 있다.

            <input 
                type='file'
                name="image"
                accept="image/png, image/jpeg"
                multiple
            />

😢 DRAG and Drop을 이용해서 특정파일만 업로드할 수 있는 첨부파일를 구현하려면 따로 코드를 작성해주어야 한다.

import { useNavigate } from "react-router-dom";
import {useRef, useState} from 'react' 
import {GrDropbox} from 'react-icons/gr'

const Page3Ul=()=>{
    const navigate= useNavigate();
    const Back=()=>{
        navigate(-1)
    }

    const Submit=()=>{
        navigate('/page4')
    }

    //첨부파일 코드
        const [Files, setFiles]= useState([]);
        const inputRef= useRef();

        const handleDragOver=(e)=>{
            e.preventDefault();
        }

        const handleDrop=(e)=>{
            e.preventDefault();
            
            // png랑 jpeg만 넣을 수 있게 하는 코드
          //1.먼저 드래그해서 받은 파일을 배열에 담아 filter을 이용해
          //  file.type이 imaga/jpeg와 image/png가 이면 image에 담아주었다.
            let image= Array.from(e.dataTransfer.files)
            .filter((file)=>(file.type==='image/png'||file.type==='image/jpeg'))
            // 2.반대로 file.type이 imaga/jpeg와 image/png가 아니면 alret변수명에 담아주었다.
            let alret= Array.from(e.dataTransfer.files)
            .filter((file)=>(file.type!=='image/png'&&file.type!=='image/jpeg'))
            // 3. image는 setFiles에 담아 브라우저에 출력하고
            setFiles(image)
          //4. 만약 alret 배열에 원소가 있으면 alert으로 알려주었다.
            if(alret.length){
             return alert('이미지만 업로드 가능합니다.')
            }
        }

        // Files에 파일이 있으면 이렇게 출력
        if(Files.length) return(
            <div >
                <ul>
                    {Array.from(Files).map((file,idx)=><li key={idx}>{file.name}</li>)}
                </ul>
                <div className="actions">
                  // 삭제 버튼
                    <button onClick={()=>setFiles([])}>Cancel</button>
                </div>
            </div>
        )


      //Files에 파일이 없을 경우 이렇게 출력
    return(
        <>
            <div
            className="dropzone"
                onDragOver={handleDragOver}
                onDrop={handleDrop}
            >
                <div>
                    <GrDropbox size='70'/>
                    <h1>Drop images</h1>
                    <p>or</p>
                    <h1>Click here to select them</h1>
                </div>
            <input 
                type='file'
                name="image"
                accept="image/png, image/jpeg"
                multiple
                onChange={e=>setFiles(e.target.files)}
                ref={inputRef}
            />
            </div>
            <button onClick={Back}>Back</button>
            <button onClick={Submit}>Submit</button>
        </>

    )
}

export default Page3Ul;

참고 파일

https://github.com/iradualbert/drag-and-drop-demo/blob/main/src/components/DragDropFiles.js