리액트 엑셀파일업로드 (같은 이름의 엑셀파일 재업로드)

 

/*

 리액트 파일업로드 기본소스 

 액셀업로드가 있다면 event.target.value 부분을 초기화 하면 같은 이름의 파일 재업로드 가능해짐

*/

 

import React, { useState } from 'react';
import * as XLSX from 'xlsx';

const ExcelUpload: React.FC = () => {
  const [excelData, setExcelData] = useState<any[]>([]);

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {

   // event: React.ChangeEvent ==> 엑셀업로드 파일명이 다른 경우에만 적용 (안에 내용이 바뀌어도 적용이 인식이 안됨)
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target?.result as ArrayBuffer);
        const workbook = XLSX.read(data, { type: 'array' });

        // 첫 번째 시트를 가져와서 JSON으로 변환
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        
        setExcelData(jsonData);
      };
      reader.readAsArrayBuffer(file);
    }

  event.target.value = '' ; //같은 파일 명 재업로드를 위해서 초기화 

  
  };

  return (
    <div>
      <h1>엑셀 파일 업로드</h1>
      <input type="file" accept=".xlsx, .xls" onChange={handleFileUpload} />
      
      {/* 엑셀 데이터를 테이블 형태로 표시 */}
      {excelData.length > 0 && (
        <table>
          <tbody>
            {excelData.map((row, rowIndex) => (
              <tr key={rowIndex}>
                {row.map((cell: any, cellIndex: number) => (
                  <td key={cellIndex}>{cell}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default ExcelUpload;