Make an Image drag and drop with CSS in React
Tags: react, nextjs, javascript, css
Published: 2023-02-04 14:56:40

React is a popular JavaScript library for building user interfaces, and its flexibility and versatility make it a great choice for building interactive applications. In this tutorial, we will show you how to create a drag-and-drop feature for images using only CSS in React.

## Step 1 — 
To start, let's set up a React project. You can use either Create React App or any other setup method that works best for you. Let's make a React application using create-react-app.

```
npx create-react-app drag-and-drop
```

## Step 2 —
  Replace `App.js` and `App.css` with the below code.

**`App.js`**
```
import './App.css';

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

      </div>
    </div>
  );
}

export default App;
```

**`App.css`**
```

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

}

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

## Step 3 —
Now create a new file and component `ImageContainer.js` in the `src` directory and take a div for drag and drop container.

**`ImageContainer.js`**
```
import React from 'react';

const ImageContainer = () => {

    return (
        <div className="image-container">

        </div>
    );
};

export default ImageContainer;
```

Then make a CSS file `ImageContainer.css` in the `src` directory and add some styles in the image container.

**`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 —
Now we will take a div with an input field and input text title inside the `.image-container` class and add some style in the `ImageContainer.css` file. We will also take a state for the image URL and an onChage function for the update state.

**`ImageContainer.js will be`**
```
import React from 'react';
import './ImageContainer.css';

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

    const onChange = (e) => {
        const files = e.target.files;
        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;
```

**`ImageContainer.css will be`**
```
.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 —
Now we will preview the image file conditionally. If you have dropped an image will render the image and or render the drag-and-drop area.

**`ImageContainer.js will be`**
```
import React from 'react';
import './ImageContainer.css';

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

    const onChange = (e) => {
        const files = e.target.files;
        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 —
Now we will import the `ImageContainer` component in our `App.js` and run our application using the `npm start` command and have fun while coding.

**`App.js will be`**
```
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;
```

In this tutorial, we showed you how to create a drag-and-drop feature for images using only CSS in React.

You can grab the source code from [here](https://github.com/said7388/react-drag-and-drop).