디아블로4 경매 사이트 만들기 (2) - 이미지 드래그 앤 드랍

개요

이미지를 input 태그로 폴더에서 찾아 넣는 방법은 너무 간단하니 

드래그 앤 드랍으로 추가하는 방법을 공부해보았다.

 

만들기 어려울줄 알았는데 onDrop 이벤트 덕분에 매우 쉽게 구현할 수 있었다.

 

코드

App.js

import './App.css'
import { useState } from "react";

function App() {
  const [imagePath, setImagePath] = useState("");

  const handleChange = (e) => {
    const tempImagePath = URL.createObjectURL(e.target.files[0]);
    setImagePath(tempImagePath);
  }

  const handleDrop = (e) => {
    e.preventDefault()
    const tempImagePath = URL.createObjectURL(e.dataTransfer.files[0]);
    setImagePath(tempImagePath);
  }

  return (
    <div className="App">
      <div className="input-div" onDrop={handleDrop}>
        <p>여기로 이미지를 드래그하거나 <strong>클릭</strong>하세요.</p>
        <input type="file" className="file" onChange={handleChange} accept="image/jpeg, image/png, image/jpg"/>
      </div>
      <output>
        <div className="image">
          <img src={imagePath} alt='uploadImg'/>
        </div>
      </output>
    </div>
  );
}

export default App;

App.css

.input-div {
  width: 100%;
  height: 200px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px dotted black;
  background-color: white;
  position: relative;
}

.file {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

output {
  width: 100%;
  min-height: 150px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  position: relative;
  border-radius: 5px;
}

output .image {
  height: 150px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
}

output .image img {
  height: 100%;
  width: 100%;
}

 

이전 포스팅과 마찬가지로 리액트에서 구현하였고

css는 참고한 블로그에서 작성해준걸 참고했다.

 

이제 이렇게 올린 이미지에 대해 crop을 사용하거나 이미지 그대로에 대해 텍스트를 추출하여

원하는 아이템 종류로 분류하는 방법을 알아볼 것이다.

 

참고 사이트

https://medium.com/@miguelznunez/easily-drag-drop-images-into-your-project-with-vanilla-javascript-57058f7c3162

How to Drag & Drop Images — JavaScript