dev-resources.site

for different kinds of informations.

How to Implement Image Drag-and-Drop in React

Published at

1/2/2025

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

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;

In App.css, style the page:

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

.heading {
  font-size: 32px;
  font-weight: 500;
}

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;

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);
}

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;

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;
}

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;

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;

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.

web Article's

30 articles in total

The Surprising Truth About Local SEO for Attorneys in 2025: Why They Are Rethinking Their Strategy

read article

SEO AI: Your Secret Weapon for Boosting SEO Performance!

read article

What is Web Hosting and How Does It Work?