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