• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

event.dataTransfer.items의 타입이 무엇인가요?

23.07.31 12:26 작성 조회수 340

0

MDN의 가이드에 따라 DragNDrop 코드를 작성하는데
파일을 가져오기 위한 코드인 event.dataTransfer.items 에서 아래와 같은 오류가 발생햇습니다.
'DataTransferItemList' 형식은 배열 형식이 아닙니다.ts(2461)

MDN DataTransfer: items 속성 가이드에서는 목록을 반환하고 항목이없어도 빈목록을 반환한다고 되어있고
MDN DataTransferItemList 타입 가이드에서 객체라고 명시되어 있던데 개별항목에는 [ ]표기법으로 접근할수 있다는걸로 보아

event.dataTransfer.items의 타입은 리스트가 아닌 오브젝트에 숫자를 KEY로 값을 넣어놓은 형태인가요?? 아님 또다른 타입인건가요?

코드

  function dropHandler(ev: React.DragEvent<HTMLDivElement>): void {
    console.log('File(s) dropped');

    // Prevent default behavior (Prevent file from being opened)
    ev.preventDefault();

    if (ev.dataTransfer.items) {
      // Use DataTransferItemList interface to access the file(s)
      [...ev.dataTransfer.items].forEach((item, i) => {
        // If dropped items aren't files, reject them
        if (item.kind === 'file') {
          const file = item.getAsFile();
          if (file) {
            console.log(`… file[${i}].name = ${file.name}`);
          }
        }
      });
    } else {
      // Use DataTransfer interface to access the file(s)
      const files = ev.dataTransfer.files;
      [...files].forEach((file, i) => {
        console.log(`… file[${i}].name = ${file.name}`);
      });
    }
  }



MDN DragNDrop가이드
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
MDN DataTransfer: items 속성 가이드
https://developer.mozilla.org/ko/docs/Web/API/DataTransfer/items
MDN DataTransferItemList 타입 가이드
https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList

답변 1

답변을 작성해보세요.

1

네 유사배열로 보이네요. 객체이지만 키로 0,1,2같은게 있어서 []접근도 되는 항목입니다.

최석우님의 프로필

최석우

질문자

2023.07.31

유사배열로 구글링하니 바로 제로초님 블로그가 나오네요 ㅋㅋ
답변 감사합니다.
https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2