웹 개발 영역에서는 사용자 입력을 수집할 때 파일을 업로드하는 방법이 여러 가지가 있습니다. 방법 중 하나는 복사-붙여넣기입니다. 파일 입력용 복사-붙여넣기는 사용자로부터 파일을 업로드하는 매우 직관적인 방법입니다. 복사-붙여넣기 파일 입력 방식은 사용자가 업로드하려는 파일의 위치를 ​​기억할 필요성을 덜어줍니다. 이 글에서는 웹사이트에서 복사-붙여넣기로 파일 입력을 구현하는 방법에 대해 설명합니다.

ClipboadEvent 및 EventTarget 인터페이스를 활용하여 복사-붙여넣기 파일 입력을 구현하겠습니다. ClipboardEvent 인터페이스는 붙여넣기 이벤트에 대한 정보를 제공하고 EventTarget 인터페이스를 사용하면 붙여넣기 이벤트를 수신할 수 있습니다.

paste 이벤트를 수신하는 동안 붙여넣은 항목으로 무엇을 할지 결정하는 이벤트 핸들러 함수를 첨부합니다. 우리의 경우에는 붙여넣은 파일을 가져와서 브라우저에 완전히 로드된 후 즉시 렌더링하겠습니다. HTML과 스타일부터 시작하겠습니다.

HTML과 스타일

붙여넣기 영역의 HTML 마크업을 생성하는 것부터 시작하겠습니다. 아래 코드 조각은 HTML 마크업입니다.

    
    
    
    


    

        Paste your file here
    
    

    

위의 코드 조각은 파일을 붙여넣을 수 있는 직사각형 컨테이너를 렌더링합니다. 컨테이너에는 true로 설정된 contenteditable이라는 속성이 있습니다. contenteditable 속성은 컨테이너에 파일이나 기타 항목을 붙여넣을 수 있도록 하는 데 중요합니다. contenteditable 속성이 false로 변경되거나 제거되면 붙여넣기 작업이 예상대로 작동하지 않습니다. 또한 ID가 미리보기인 컨테이너도 있습니다. 미리보기 컨테이너를 사용하여 사용자가 붙여넣은 이미지를 미리 봅니다.

style.css의 마크업에 몇 가지 기본 스타일을 추가해 보겠습니다.

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

위의 마크업과 스타일 시트는 아래 스크린샷과 같이 간단한 프롬프트 텍스트가 있는 간단한 대시 경계 컨테이너를 만듭니다.

이제 UI를 만들었으니 다음 섹션에서 JavaScript를 사용하여 몇 가지 유용한 기능을 추가해 보겠습니다.

스크립트

이 섹션에서는 JavaScript를 사용하여 붙여넣기 영역에 붙여넣기 이벤트 리스너를 추가하겠습니다. 이벤트 리스너를 연결하기 위해 DOM에서 붙여넣기 영역을 가져오기 전에 먼저 아래 코드 조각과 같이 DOM 콘텐츠가 로드될 때까지 기다립니다.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

위의 코드 조각에서는 DOMContentLoaded 이벤트에 대한 리스너를 추가했습니다. 이를 통해 DOM 요소를 가져오기 전에 DOM 트리가 생성될 때까지 기다릴 수 있습니다. 다음으로 붙여넣기 영역 컨테이너를 선택하고 여기에 붙여넣기 이벤트 리스너를 추가합니다.

붙여넣은 항목에서 파일 가져오기

paste 이벤트 핸들러는 이전 코드 조각에서 구현되지 않은 상태로 남아 있습니다. 이벤트 객체에서 데이터를 가져와서 콘솔에 기록하여 구현해 보겠습니다. 기사 뒷부분에서 데이터를 사용하여 더 많은 작업을 수행할 것입니다. 지금은 항목을 붙여넣기 영역에 붙여넣을 때 파일이 수신되는지 확인하려고 합니다. 아래 코드 조각은 붙여넣기 이벤트 핸들러의 최소 구현을 보여줍니다.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

위의 코드 조각에서는 event.clipboardData 개체에서 항목을 가져옵니다. event.clipboardData.items는 붙여넣은 항목의 내용을 포함하는 목록형 객체인 DataTransferItemList입니다. 사용자가 한 번에 여러 항목을 복사하여 붙여넣을 수 있으므로 항목은 목록에 저장됩니다.

다음으로 for ...of 루프를 사용하여 항목을 반복합니다. 루프에서는 각 항목이 파일인지 확인합니다. 항목이 '파일' 왕인 경우 파일로 가져와 브라우저 콘솔에 인쇄합니다.

콘솔에서 파일 정보를 인쇄하는 것은 웹 페이지 사용자에게 그다지 유용하지 않습니다. 다음 섹션에서는 좀 더 흥미로운 작업을 해보겠습니다.

업로드된 파일 미리보기

클립보드에 항목을 붙여넣은 후 아무데도 표시하지 않으면 사용자가 파일 업로드가 성공했는지 알기 어려울 수 있습니다. 성공을 나타내는 내용을 표시하여 파일이 성공적으로 업로드되었음을 나타내는 것이 중요합니다. 업로드된 파일 자체를 표시하는 것보다 업로드 성공을 나타내는 더 좋은 방법이 있을까요?

이 섹션에서는 붙여넣기 이벤트 핸들러를 확장하여 수신된 파일에서 URL을 생성합니다. 파일이 브라우저에 로드되면 생성된 URL을 사용하여 파일을 렌더링합니다. FileReader API를 활용하여 아래 코드 조각에 코딩된 대로 파일에서 URL을 생성하겠습니다.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

위의 코드 조각에서는 FileReader의 인스턴스를 생성하고 이를 사용하여 데이터 URL을 생성했습니다. 또한 읽기 결과를 콘솔에 기록하는 FileReader 객체에 loadend 이벤트 리스너를 추가했습니다. 이는 파일 미리보기를 위한 첫 번째 단계입니다. 이제 URL을 사용하여 파일을 표시할 수 있습니다.

사용자가 이미지 파일을 붙여넣었다고 가정하면 다음 코드 조각은 이벤트 핸들러를 확장하여 URL을 생성하고 이미지 파일을 표시하는 방법을 보여줍니다.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

위의 코드 조각에서는 DOM에서 미리보기 컨테이너를 가져오고 이미지 렌더링을 위한 img 요소를 생성합니다. 생성된 URL을 이미지의 src로 할당하고 이미지를 미리보기 컨테이너에 추가합니다. 이미지가 미리보기 컨테이너에 추가되면 이제 사용자는 붙여넣은 이미지가 웹페이지에 성공적으로 로드되었음을 알 수 있습니다.

성공! 웹페이지에 복사-붙여넣기를 통한 파일 업로드를 성공적으로 구현했습니다. 이 파일 업로드 방법은 사용자에게 업로드할 파일을 선택하기 위해 여러 버튼을 클릭할 필요 없이 쉽게 파일을 업로드할 수 있는 권한을 제공합니다. ClipboadEvent 인터페이스는 브라우저에 붙여넣은 항목에서 데이터를 수집하는 쉬운 방법을 제공합니다. FileReader 인터페이스를 사용하면 업로드된 파일에서 URL을 생성하고 이를 사용하여 업로드된 파일을 미리 볼 수 있습니다.

댓글 섹션에 자유롭게 말씀해 주세요. MDN의 ClipBoardEvent 및 FileReader 인터페이스에 대해 자세히 알아보세요.