{"id":7394,"date":"2023-09-16T23:01:26","date_gmt":"2023-09-16T17:31:26","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=7394"},"modified":"2023-09-16T23:08:20","modified_gmt":"2023-09-16T17:38:20","slug":"basic-guidelines-to-upload-an-image-in-react-js","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/basic-guidelines-to-upload-an-image-in-react-js\/","title":{"rendered":"Basic Guidelines to Upload an Image in React JS"},"content":{"rendered":"\n

Basic Guidelines to Upload an Image in React JS<\/strong><\/p>\n\n\n\n

Image uploads are a fundamental part of modern web development. Whether you’re building a social media platform, an e-commerce site, or a simple blog, the ability for users to upload images is a common requirement.<\/p>\n\n\n\n

Image uploads allows users to add images from their local devices to a website or an application. This functionality is crucial in various scenarios including user profile pictures, product images or sharing media content.<\/p>\n\n\n\n

Uploading images in a React.js application involves handling user interactions to select and upload images, managing the selected images, and possibly sending them to a server.<\/p>\n\n\n\n

React js provides state management and event handling features that can be used effectively for uploading images easily.<\/p>\n\n\n\n

Here we can consider a scenario where an image upload icon is given and when it is clicked, images from local machine can be selected by OnClick() function. Also the selected images are sent to server i.e.,uploading to database happens indirectly by trigerring another OnChange() function.

While selected images are simultaneously uploaded to server, there may arise a need to change or remove the selected images. For this scenario, a close icon can be added over the image and when the icon is clicked, remove function can be triggered and so the selected image can be removed from UI and also from the server.

The code to achieve this functionality can be as simple as follows:

To select images:<\/strong><\/p>\n\n\n\n

<img src={image} alt=\u201ddefault\u201d onClick={handleImageClick}\/><\/em><\/p>\n\n\n\n

<input type =\u201dfile\u201d id =\u201dfileInput\u201d style ={{display : \u201cnone\u201d }} onChange ={handleFileChange}\/><\/em><\/p>\n\n\n\n

Here image is the icon placed and when it is clicked it allows user to select images from their local machine. Any number of images can be selected with this handleImageClick().<\/p>\n\n\n\n

const handleImageClick =() => {<\/em><\/p>\n\n\n\n

document.getElementById(\u2018fileInput\u2019).click();<\/em><\/p>\n\n\n\n

};<\/em><\/p>\n\n\n\n

Storing the selected Image:<\/strong><\/p>\n\n\n\n

Once the image is selected, it needs to be converted to proper format that the server accepts. For this step, look at the below code.<\/p>\n\n\n\n

const handlefilechange = (event) => {<\/em><\/p>\n\n\n\n

const file = event.target.files[0];<\/em><\/p>\n\n\n\n

const imageUrl = URL.createOjectURL(file);<\/em><\/p>\n\n\n\n

setselectedImages(prevImages => [\u2026prevImages, imageUrl]);<\/em><\/p>\n\n\n\n

List(prevList => [\u2026prevList, file]);<\/em><\/p>\n\n\n\n

uploadImage(file);<\/em><\/p>\n\n\n\n

}<\/em><\/p>\n\n\n\n

handlefilechange function is called when the user selects an image. It receives the event object, which contains information about the selected file. Here’s what this function does:<\/p>\n\n\n\n