DEV Community

Cover image for Make an Image drag and drop with CSS in React
EL-PACHO
EL-PACHO

Posted on

Make an Image drag and drop with CSS in React

#devto #devplusplus #webdev #devops

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

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

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

Top comments (0)