React Handsontable로 csv 편집기 만들기 (3)

프로젝트 전체 링크

 

이전 - (2) Drag & Drop

현재 - (3) 선택한 경로의 파일 불러오기

다음 - (4) Drop한 파일 읽기

 

깃허브에서 코드 확인하기

---

(2) Drag & Drop Test가 완료되었으므로 FileUpload component를 만들자.

DragDropTest.js / scss를 보고 FileUpload.js / scss에 그대로 복사한다. (그리고 이름을 변경한다.)

 

FileUpload에서는 Drag & Drop 외에도

선택한 경로의 파일을 불러올 수 있도록 <input type="file" ... />을 추가하자.

<input type="file" accept=".csv,.txt" multiple/>

 

input type에 file을 지정하면 아래와 같은 파일 선택 버튼이 생긴다.

---

accept 속성

 

지정한 속성의 파일만 불러올 수 있다. ".csv, .txt"로 지정하면 csv와 txt 파일만 불러온다.

(하지만 오른쪽 아래의 "사용자 지정 파일"을 눌러서 모든 파일 (*.*)으로 바꿀 수 있다.)

 

여기에서는 csv 편집기를 만들기 때문에 accept에서 .txt는 이제 빼도 된다.

<input type="file" accept=".csv" multiple/>

---

multiple 속성

 

파일을 여러 개 부를 수 있다.

파일 선택을 누른 후, 파일을 선택하면 여러 개 선택이 되는 것을 확인해보자.

multiple 속성이 적용된 경우

 

csv 편집기는 파일 하나만 수정하기 때문에 multiple 속성도 지운다.

<input type="file" accept=".csv"/>

 

multiple 속성이 없기 때문에 file이 하나만 선택되는 것을 알 수 있다.

 

이제 열기 버튼을 누르면 선택된 파일 없음 → 불러온 파일 이름으로 변경된다.

 

이제 Drag & Drop으로 파일을 불러오거나 선택한 경로를 이용하여 파일을 불러올 수 있게 되었다.

---

최종 코드는 아래를 참고하자.

// FileUpload.js
import React, { useState } from "react";
import * as lib from "./library.js";
import "../css/FileUpload.scss";

const FileUpload = () => {
  const [dropFlag, setDropFlag] = useState(false);

  return (
    <div
      id="drag-drop-field"
      className={dropFlag ? "in" : ""}
      onDrop={(e) => lib.handleOnDrop(e, setDropFlag)}
      onDragOver={(e) => lib.handleDragOver(e, setDropFlag)}
      onDragLeave={(e) => lib.handleOnDragLeave(e, setDropFlag)}
    >
      <p>drag & drop</p>
      <input type="file" accept=".csv"/>
    </div>
  );
};

export default FileUpload;

 

// FileUpload.scss
#drag-drop-field { 
    border: 3px dashed blue; 
    width: 70vw; 
    height: 70vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    p {
      font-size: 30px;
    }
    
    &.in { 
      border: 3px dashed red;  
    }
  }

 

// App.js
import React from "react";
//import * as lib from "./components/library";
import FileUpload from "./components/FileUpload";

const App = () => {
  return (
    <div>
      <div className="App">
        <FileUpload />
      </div>
    </div>
  );
};

export default App;

 

---

이전 - (2) Drag & Drop

다음 - (4) Drop한 파일 읽기