score:9
Accepted answer
here's an example how can you use filereader.readasdataurl
const {usestate} = react;
const filetodatauri = (file) => new promise((resolve, reject) => {
const reader = new filereader();
reader.onload = (event) => {
resolve(event.target.result)
};
reader.readasdataurl(file);
})
const app = () => {
const [datauri, setdatauri] = usestate('')
const onchange = (file) => {
if(!file) {
setdatauri('');
return;
}
filetodatauri(file)
.then(datauri => {
setdatauri(datauri)
})
}
return <div>
<img width="200" height="200" src={datauri} alt="avatar"/>
<input type="file" onchange={(event) => onchange(event.target.files[0] || null)} />
</div>
}
reactdom.render(
<app/>,
document.getelementbyid('root')
);
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
score:0
select file method -
selectfile = () => {
let uploadfile = document.getelementbyid('upload_doc');
if (uploadfile) {
this.setstate({
selecteduploadfile: uploadfile.files[0],
});
}
};
upload file and sent as form data -
const formdata = new formdata();
formdata.append('file', this.state.selectedfile);
this.uploadfile(formdata); // here you can use fetch/axios to send the form data
score:0
function datauritoblob(datauri) {
var bytestring = atob(datauri.split(',')[1]);
var ab = new arraybuffer(bytestring.length);
var ia = new uint8array(ab);
for (var i = 0; i < bytestring.length; i++) {
ia[i] = bytestring.charcodeat(i);
}
var bb = new blob([ab]);
return bb;
}
score:3
use filereader
fileuploadinputchange(e) {
let reader = new filereader();
reader.onload = function(e) {
this.setstate({uploadedimage: e.target.result});
};
reader.readasdataurl(event.target.files[0]);
}
to show/preview image:
<avatar src={this.state.uploadedimage} name="foo bar" classname={'position-relative button-cursor'}/>
// or .. for image , use below
<img src={this.state.uploadedimage} alt={""} />
Source: stackoverflow.com
Related Query
- How to load image and convert to blob in react
- React : how to load image outside src and public folders
- how to convert a base64 string in to normal image and show it in a web page in react js
- How to load image from blob and show Image preview
- How to convert blob to image and display it on React?
- How to convert Blob URL to Base64 string and retrieve an Image URL using Cloudinary Client-Side?
- How to convert a blob string to image in react
- How to set image width to be 100% and height to be auto in react native?
- React Native - How to load local image using the uri in Image Component?
- Async Image Load with React and Redux
- How to load background images from css in React and NextJS
- how to load radio buttons dynamically and use check property in react js?
- In react native, how to convert a base64 image to jpg then save to temp path?
- How to convert React class components into functional components and vice versa - IntelliJ
- how to change image src using props with styled component and react
- How to display an image saved as blob in React
- How to get image height and width from uri on React Native?
- How to display blob image in react native
- How to send image to server with Blob type using Axios in React Native?
- React image file to canvas and then convert to base64
- How to Fetch and Display an Image from an express backend server to a React js frontend?
- How to load and play a Youtube video in React
- How to load npm module type definition in Monaco using Webpack and react create-react-app
- How do I loop an image carousel with React setState and setInterval?
- Convert Blob to image inside Cell in React
- How to upload an image to google drive using gapi and react
- How to Read image data from API and render in React Component
- How to upload image to aws s3 using react and django rest framework
- How to convert JSON data to XML format data and download the file in React JS
- How convert type data buffer to image in react js
More Query from same tag
- Large Create-React-App Bundle Size - Optimized Production Build
- Cannot read properties of undefined (reading 'split') React
- How to update an array item in React?
- how to do history.push to another page after dispatch a signup success action in redux-thunk
- How to cancel all subscriptions inside UseEffect in React
- Navbar which is used react app made by using bootstrap is not full width
- React: useContext associated with a custom hook infinite loop issue
- React Input field keeps reverting to default text after being replaced
- http response not setting cookie in the browser
- Using one instead of multiple makeStyles hooks
- Using async and await returns parsing error
- Pass dynamic content to the react table sub component
- How to separate MUI setup to an external js file?
- can not reduce zurb foundation form input width
- webpack 5 image is not loading with `reactjs`
- How can I use <script> tags inside a JSX file?
- Dispatch isn't working in my contextAPI (functional component)
- React Router DOM can't read location state
- a Textfiled does not use functions on props
- redux-promise: Uncaught TypeError: middleware is not a function
- How to call thrid party javascript functions in ReactJS
- Skills list is not updated when new skill is added
- Configuring webpack to work with TypeScript using Babel
- Warning: Accessing reactClass via the main React package is deprecated
- React Router NavLink Active
- How to Modify CSS Module Style via Javascript
- How to use history.push from Homepage to other components?
- Where are lifecycle methods defined in React's source code?
- how do you use sass in create-react-app with typescript?
- How to use await on document.exitFullScreen method in javascript or react?