react에서 drag& drop

antd의 Dragger를 custom하게 바꾸는 예제. (목록을 우측으로 )

 

https://stackoverflow.com/questions/58469157/antd-how-to-display-fileuploadlist-to-the-right-of-dragger-upload 

 

 

 

 

 

 

 

 

 

<Input type={'file'} 과 함께 사용하는 drag&drop 예제.

 

import React, { useState } from 'react';

function FileUpload() {
  const [files, setFiles] = useState([]);

  const handleDrop = (e) => {
    e.preventDefault();
    const droppedFiles = [...e.dataTransfer.files];
    setFiles(droppedFiles);
  };

  const handleFileInputChange = (e) => {
    const selectedFiles = [...e.target.files];
    setFiles(selectedFiles);
  };

  const handleUpload = () => {
    // 업로드할 파일들을 처리하는 로직을 작성하세요.
    console.log(files);
  };

  return (
    <div
      onDrop={handleDrop}
      onDragOver={(e) => e.preventDefault()}
      style={{
        border: '2px dashed #ccc',
        padding: '20px',
        textAlign: 'center',
        cursor: 'pointer',
      }}
    >
      <input
        type="file"
        style={{ display: 'none' }}
        multiple
        onChange={handleFileInputChange}
        id="fileInput"
      />
      <label htmlFor="fileInput">
        드래그 앤 드롭 또는 클릭하여 파일을 업로드하세요.
      </label>
      <button onClick={handleUpload}>업로드</button>
      {files.map((file, index) => (
        <div key={index}>{file.name}</div>
      ))}
    </div>
  );
}

export default FileUpload;