DEV Community

Cover image for How to Implement Image Drag-and-Drop in React
Kumar Priyank
Kumar Priyank

Posted on

How to Implement Image Drag-and-Drop in React

How to Implement Image Drag-and-Drop in React Using Only CSS

React is widely recognized for building interactive UIs. In this tutorial, we’ll guide you through creating a drag-and-drop feature for images in React with just CSS.

Step 1: Set Up Your React Project

Start by setting up your React project. You can use create-react-app for an easy setup.

npx create-react-app drag-and-drop
Enter fullscreen mode Exit fullscreen mode

Step 2: Update App.js and App.css

Next, modify the App.js file to create a container for the image and a heading.

import './App.css';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area"></div>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

In App.css, style the page:

.App {
  text-align: center;
  width: 100vw;
  height: 100vh;
}

.heading {
  font-size: 32px;
  font-weight: 500;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Create the ImageContainer Component

Create a new file ImageContainer.js and define a basic drag-and-drop container.

import React from 'react';

const ImageContainer = () => {
  return (
    <div className="image-container"></div>
  );
};

export default ImageContainer;
Enter fullscreen mode Exit fullscreen mode

Style this container in ImageContainer.css:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Add Image Upload Functionality

Enhance the ImageContainer with a file input and text instructions for the user.

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      <div className="upload-container">
        <input
          type="file"
          className="input-file"
          accept=".png, .jpg, .jpeg"
          onChange={onChange}
        />
        <p>Drag & Drop here</p>
        <p>or</p>
        <p>Click</p>
      </div>
    </div>
  );
};

export default ImageContainer;
Enter fullscreen mode Exit fullscreen mode

And style the upload-container:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}

.upload-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.upload-container > p {
  font-size: 18px;
  margin: 4px;
  font-weight: 500;
}

.input-file {
  display: block;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Preview the Image

Modify the component to conditionally render the uploaded image or the drag-and-drop area.

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      {url ? (
        <img className="image-view" style={{ width: '100%', height: '100%' }} src={url} alt="" />
      ) : (
        <div className="upload-container">
          <input
            type="file"
            className="input-file"
            accept=".png, .jpg, .jpeg"
            onChange={onChange}
          />
          <p>Drag & Drop here</p>
          <p>or <span style={{ color: "blue" }}>Browse</span></p>
        </div>
      )}
    </div>
  );
};

export default ImageContainer;
Enter fullscreen mode Exit fullscreen mode

Step 6: Import and Run the Application

Finally, import ImageContainer into App.js and run the app.

import './App.css';
import ImageContainer from './ImageContainer';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">
        <ImageContainer />
      </div>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Now you can run the app and enjoy coding your image drag-and-drop feature with React and CSS.


The tutorial covers how to set up a basic drag-and-drop area for images with React, utilizing file input and CSS for styling, and handling the image preview.

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay