Have you ever wanted to preview an image in React, but weren’t sure how? How about resizing as well?
Here’s the simplest example I could come up with for how to preview an image and resize it.
I even used a plugin — react-image-file-resizer — to resize the uploaded image using the browser.
The Code
import { useState } from "react";
import Resizer from "react-image-file-resizer";
function App() {
const [preview, setPreview] = useState({});
const [previewResized, setPreviewResized] = useState({});
const handleImage = async (e) => {
let file = e.target.files[0];
setPreview({
...preview,
theFile: window.URL.createObjectURL(file),
theSize: file.size,
});
// Resizer.imageFileResizer parameters:
// file, width(px), height(px), file-type, quality, rotate, callback
await Resizer.imageFileResizer(
file,
300,
300,
"PNG",
100,
0,
async (uri) => {
try {
setPreviewResized({
...previewResized,
theFile: uri,
});
} catch (error) {
console.log("Resizing error: ", error);
}
}
);
};
const resetImage = (e) => {
URL.revokeObjectURL(preview.theFile);
setPreview({});
};
return (
<div style={{ width: "1200px", margin: "auto" }}>
<form>
<label htmlFor="theFile">File demo using React:</label>
<br />
<br />
<input type="reset" value="Reset form" onClick={resetImage} />{" "}
<input type="file" id="theFile" name="theFile" onChange={handleImage} />
<br />
<br />
Image preview:
{preview.theFile ? (
<div>
<br />
{preview.theFile}
<br />
<br />
Original, file size {preview.theSize} bytes:
<br />
<br />
<img src={preview.theFile} width="300px" alt="Preview" />
<br />
<br />
Resized:
<br />
<br />
<img src={previewResized.theFile} alt="Preview resized" />
</div>
) : (
<div>* Please select a file</div>
)}
</form>
</div>
);
}
export default App;