DEV Community

Cover image for Make an Image drag and drop with CSS in React
Swarup Mahato
Swarup Mahato

Posted on

Make an Image drag and drop with CSS in React

#react #nextjs #javascript #css

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

App.css

.App { text-align: center; width: 100vw; height: 100vh; } .heading { font-size: 32px; font-weight: 500; }
Enter fullscreen mode Exit fullscreen mode

Step 3 —

Now create a new file and component ImageContainer.js in the srcdirectory 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;
Enter fullscreen mode Exit fullscreen mode

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); }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.Github

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.