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.
Top comments (7)
Very nice and helpful article!
Be careful, there is a typo in the title: it's "drAg and drop" 😉
Thank you 🥰
Good tutorial.
FYI: you have a minor typo in your article title.
Solved it
Great article, you got my follow, keep writing!
Hey, this article seems like it may have been generated with the assistance of ChatGPT.
We allow our community members to use AI assistance when writing articles as long as they abide by our guidelines. Could you review the guidelines and edit your post to add a disclaimer?
Guidelines for AI-assisted Articles on DEV
Erin Bensinger for The DEV Team ・ Dec 19 '22 ・ 4 min read
I didn't take any help from Chat-GPT for this article.