score:2
Accepted answer
from the mozilla website it seams you need to add a load event listener to your reader. this sample code is not supported in some versions of ie.
...
reader.addeventlistener("load", () => {
this.setstate(state => ({
...state,
form:{
frontdesign: [reader.result]
}
}))
const url = reader.result;
console.log(url);
}, false);
...
working condesanbox here: https://codesandbox.io/s/affectionate-lamport-dnbij
score:0
do not need use ref here. try to code below
frontdesign = (e) => {
var file = e.target.files[0];
var reader = new filereader();
reader.onload = (e) => {
//image url e.target.result
this.setstate({
form:{
frontdesign: [e.target.result]
}
})
}
reader.readasdataurl(file);
}
Source: stackoverflow.com
Related Query
- Reactjs Input Upload doesn't return local URL
- how to set url in another input after upload file in reactjs
- How to upload image using ReactJS and save into local storage?
- How to return 404 status code when URL does not match at ReactJS
- How to add https:// in url when input value with http:// or "a.com" onBlur event reactjs
- Object.keys map return object Object instead value in text input form in ReactJS
- reactjs custom component input value doesnt update with state change
- upload local image file to aws s3 without input field
- ReactJS + Redux: How to use Mozilla File API to select local image and upload it to web?
- File upload from unmounted input ReactJS Redux
- Open the url in the next page by adding the text of input field in Reactjs
- Changing url based on id and getting values from local storage. ReactJS
- Reverse proxy to serve local reactjs application on a static url with virtualmin
- Take url as input from a textbox, and return contents of the url
- A component is changing an uncontrolled input of type text to be controlled error in ReactJS
- How to reset ReactJS file input
- Expected corresponding JSX closing tag for input Reactjs
- Detect whether input element is focused within ReactJS
- Upload File Component with ReactJS
- How to get input text value on click in ReactJS
- Display an image from url in ReactJS
- How to display a image selected from input type = file in reactJS
- Input sanitization in ReactJS
- ReactJS Warning: TextField is changing an uncontrolled input of type text to be controlled
- Fetch local JSON file from public folder ReactJS
- ReactJS - Lifting state up vs keeping a local state
- How to trigger INPUT FILE event REACTJS by another DOM
- Set text input placeholder color in reactjs
- How to update ReactJS component based on URL / path with React-Router
- ReactJS State and Local Variable
More Query from same tag
- Redux saga in shadow dom in multiple tabs, only run once
- Iphone automatically zooms in on <select> tag
- How can I combine a React element and text inside a ternary?
- React useffect dependency causes infinite requests
- React native bind animated event
- Understanding the props concept in React
- State is changed, but component is not refreshed
- Trigger function onclick when loading HTML from external source
- Don't render component on specific route
- How to get and display specific data from onClick into another page in React
- Using Jest to mock a React component with props
- Is there literally any way to get whitespace filenames to work with <img src="...">?
- Onclick won't bind value of variable at point of rendering
- Console.error: no permission handler detected.(React Native)
- useContext with useRef and useState
- 415 (Unsupported Media Type) with REST Post request
- What is the difference of className={'container'} with className='container'
- How to expand a React Component to fill page with flexbox
- React unable to update props
- React - custom styling ag grid header
- Reactjs How to pass the props of current page into child page
- typescript class using function with many shapes (overloads) | generics
- items not being displayed on table
- How to set an initial state with hooks when data finish to load
- React PropType is not giving error when isRequired is used
- Download attribute in anchor tag in React component
- sort array of objects to place a particular object first that matches an id
- OnSubmit not called if file not chosen
- React - Material-UI Modal causing an error with the tabindex
- NextJS environment variable undefined in API route