React JS Images - Upload | Download | Base64 Examples

In this article, we will conver the following operations on image using the React JS.

React Js Upload Image to the Server

In React, you can use a html form to upload an image by allowing the user to select a file and then sending that file to a server. Here is an example of how you can create a form that allows a user to select an image file and then upload it to a server: 


import React, { useState } from 'react'; 
function App() { 
 const [file, setFile] = useState(null); 
 const handleFileInput = (event) => { 
 setFile(event.target.files[0]); 
 }; 
 const handleSubmit = (event) => { 
 event.preventDefault(); 
 const formData = new FormData(); 
 formData.append('file', file); 
 fetch('/upload', { 
 method: 'POST', 
 body: formData 
 }) 
 .then(response => response.json()) 
 .then(data => { 
 console.log(data); 
 }); 
 }; 
 return ( 
 <form onSubmit={handleSubmit}> 
 <input type="file" onChange={handleFileInput} /> 
 <button type="submit">Upload</button> 
 </form> 
 ); 
} 
export default App;

In this example, the handleFileInput function is called when the user selects a file, it sets the selected file to file state variable. The handleSubmit function is called when the form is submitted, it prevents the default behavior of the form and constructs a FormData object that contains the selected file. Then it sends the FormData object to the server via fetch method.

It's worth noting that for handling the files, you can use any library like axios or superagent. Also, you need to handle the server-side logic to handle the uploaded image.

React JS Download Image from Server

In React, you can use the a element with a download attribute to trigger a download of an image. Here is an example of how you can create a link that allows a user to download an image: 


import React from 'react'; 
function App() { 
 const handleDownload = () => { 
 const link = document.createElement('a'); 
 link.href = 'https://example.com/image.jpg'; 
 link.download = 'image.jpg'; 
 link.click(); 
 }; 
 return ( 
 <> 
 <img src="https://example.com/image.jpg" alt="Image to download" /> 
 <button onClick={handleDownload}>Download</button> 
 </> 
 ); 
} 
export default App;

n this example, when the user clicks on the "Download" button, the handleDownload function is called, which creates an a element, sets the href attribute to the URL of the image and the download attribute to the desired filename. Then it triggers the click event on that link, which will prompt the user to download the image with the specified name.

It's worth noting that if you're trying to download image that is on your server, you have to set the correct headers on your server-side, otherwise the browser will treat the image as a page and will show it in the browser instead of download it.

React JS Encode Image to Base64

In React, you can use the FileReader API to read the contents of a file or image and convert it to a base64 encoded string.

Here is an example of how you can use the FileReader API to convert an image to a base64 encoded string and set it as the src attribute of an img element in React: 


import React, { useState } from 'react'; 
function App() { 
 const [imageSrc, setImageSrc] = useState(null); 
 const handleFileInput = (event) => { 
 const file = event.target.files[0]; 
 const reader = new FileReader(); 
 reader.onloadend = () => { 
 setImageSrc(reader.result); 
 }; 
 reader.readAsDataURL(file); 
 }; 
 return ( 
 <> 
 <input type="file" onChange={handleFileInput} /> 
 {imageSrc && <img src={imageSrc} alt="Uploaded image" />} 
 </> 
 ); 
} 
export default App;

In this example, the handleFileInput function is called when the user selects a file, it reads the file with the FileReader API, and readAsDataURL method encodes the file to base64 and sets the result property as the src of the img element.

Alternatively, you can use a library like base64-img to convert an image to a base64 encoded string, but it's not recommended to do that in the client-side because it can increase the size of the bundle and decrease the performance of your app.

Display Base64 Image using React

In React, you can use the base64 encoded string of an image to set the src attribute of an img element. Since the base64 encoded string already represents the image, there is no need to decode it back to an image file.

Here is an example of how you can use a base64 encoded string to set the src attribute of an img element in React: 


import React, { useState } from 'react'; 
function App() { 
 const [imageSrc, setImageSrc] = useState("data:image/png;base64,iVBORw0KG..."); 
 return ( 
 <img src={imageSrc} alt="Decoded image" /> 
 ); 
} 
export default App;

In this example, the imageSrc state variable is set to a base64 encoded string that represents an image. The img element will display the image represented by the base64 encoded string.

It's worth noting that base64 strings are often larger in size than the original image file, so it's not recommended to decode base64 image on client-side to improve performance.