Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer.

<div className="add_grp_image_div margin_bottom">
     <img src={img_upload} className="add_grp_image"/>
     <input type="file" className="filetype"/>
     <span className="small_font to_middle">Add group image</span>
</div>

In the code above, I trigger the file upload window when a user clicks on this div. I want to display the selected image within the specified div. How can I accomplish this?

https://i.sstatic.net/e5DOz.png

This is how my HTML code section looks like:

javascripthtmlcssreactjs

Answer №1

When it comes to displaying or manipulating images, there's no need to store the image for that purpose.

If you want to show the image to the user, you can utilize the FileReader API. Check out this helpful answer on Stack Overflow which demonstrates how to display a selected image without sending data to the server: here

For manipulating the image, you'll need to draw it on a canvas and then carry out the desired actions. You can refer to this guide on Stack Overflow for drawing an image from a data URL to a canvas: here

However, if you're looking to crop the image, it's recommended to explore available JavaScript image manipulation libraries. There are numerous libraries already available that can save you time and help you learn faster without having to reinvent the wheel.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Merging Two Arrays to Form a Single Array in React

Let's consider the following arrays: const headerArray = ["h1","h2","h3"]; const dataArray=[["a1","a2","a3"],["b1","b2","b3"]]; I have a requirement to merge th ...

arraysreactjsdatagridmaterial-ui

Is the NodeJS rmdir function experiencing issues specific to LINUX?

Currently, I have a NodeJS script section that runs on my Windows 10 machine with the latest Node version and another version on my CentOS8 Linux webserver. The code executes as expected on Windows but throws an error when running on Linux at this specific ...

javascriptnode.jsnpmbackend

The method item.appendChild does not exist as a function

Despite being a common error, I've researched extensively and still can't figure out why it's happening. It seems like it should be an easy fix, but I'm struggling to find the solution on my own. var item = document.createElement("div" ...

javascripthtmlcssdom

Creating a dropdown menu with an initial value fetched from a text file

I'm currently working on a school project that involves adjusting basic wireless parameters in a Linux router using command-line operations through an HTML interface. My experience has mostly been with PHP, and so far, I've been progressing well. ...

phphtmlfiledropdown

Adjust the text color of ASP.Net Label based on the presence of a hyphen

I need help changing the text and font color of my ASP.net label based on its content. The label displays a percentage change, and I want negative numbers to be shown in green and positive numbers in red. However, when I try to implement this, I keep enc ...

javascriptasp.net

Identifying when a browser is closed with multiple tabs open in Internet Explorer

I need to detect when a browser tab is closed in order to trigger a Struts action. I have successfully implemented this for a single tab using the following JavaScript code: <script type="text/javascript> function loadOut() { if ((window.event.c ...

javajavascriptjqueryajaxstruts

Using Javascript to delete a cookie that was created by an AJAX response

Within my Webapp (which is currently running at localhost/myApp/), I am utilizing an ajax call as shown below: $.ajax({ type: "GET", url: "http://localhost:8080/my.module/Login/login?user=abc&password=123", xhrFields: { withCredent ...

javascriptajaxcookies

Creating a centered transparent rectangle of a specific width using HTML

I am working on a page layout similar to this FIDDLE body { margin:0 auto; max-width: 800px; padding:0 0 0 0; text-align:left; background-color:#FFFFFF; background-image: url('http://freeseamlesstextures.com/images/40-dirty-pa ...

htmlcss

Building dynamic API requests with ReactApp JavaScript based on certain conditions

Can someone assist me with a coding issue I am facing? I need the API data to be displayed under the following conditions: Implement componentWillReceiveProps() Fetch the API when count equals 2 import React, {useState, useEffect,Component} fro ...

reactjs

Checking for null properties in Typescript objectsorHow to verify if a

What is a simple way to determine if the properties of an object in TypeScript are nullable? For example export default interface UserDto{ ID?:int; USER_NAME?:string; FIRST_NAME?:string; LAST_NAME?:string; USER_ROLE?: ...

javascriptreactjstypescriptvue.js

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

javascriptjqueryhtmlcss

Having Trouble Receiving Desired Results with Ajax and JSONP

Testing jsonp for a new project. The html page features ajax, displaying a drop-down form and an empty table. The table cells will be populated based on the jsonp response fetched by ajax. The php response is hosted separately but doesn't seem to wo ...

phpjqueryhtmlajaxjson

Does type conversion have a specific ranking of preference?

When working with JavaScript, it's important to note that the language automatically converts types when necessary. For instance, if you have an expression like "8" * "3", JavaScript will convert the strings to numbers and calculate the result as 24. ...

javascript

I'm unsure of the most efficient way to condense this statement

$(document).ready(function(){ if ($(window).width() <961){ $('.item').on('click',function(){ /*---do something---*/ }) }else{ $('.item').on('click',function(){ ...

javascriptjquery

CSS Problem: Background Color Not Showing Up in Table Rows

Check out my fiddle below: https://jsfiddle.net/teo7auv3/ I'm facing a challenge where I want to change the background color of the entire table row (TR) to red when there are validation errors. The problem seems to be related to this code snippet: ...

csscolorsbackgroundcss-tables

Centered content appears smaller than the surrounding div

After spending an hour trying to troubleshoot and searching for solutions, I am turning here for help. I am attempting to insert a Bootstrap Nav-Bar into a Div. I successfully centered the Nav-Bar, but now my Div is taller than the content inside it. This ...

htmlcsstwitter-bootstrap

A label in nativescript not displaying a two-digit number

I've encountered a peculiar issue with my user interface. I have a barcode scanner on my phone that scans barcodes and stores them in an observable array (which is functioning correctly). I also have a label that displays the length of the array. When ...

javascriptxmluser-interfaceobservablenativescript

The function cannot be found in this.props.xxxx

class UserForm extends React.Component { constructor(props) { super(props); const { user } = props; } _cancelClick() { this.props.onCancel(); } render() { return ( <button onClick={this._cancelClick.bind(this)}> Cancel ...

reactjsreact-routermaterial-ui

Problem with selecting items in Kendo UI Menu

Problem: The select event is not triggering when clicking on the image in the kendo menu item. My troubleshooting steps: Review the sample code provided below <!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/ken ...

javascriptjsonasp.net-mvckendo-uikendo-menu

Remove click event listeners from a specific element within a group of selected elements using D3

In my D3 class, I have a group of selectors that I want to remove the click event from: d3.selectAll('.selectors').on('click',function(){ //Remove the click event from the currently clicked element. }); I'm encountering tw ...

javascriptjqueryd3.js