Closed Mrbeyond closed 3 years ago
import React from "react"; import Resizer from "react-image-file-resizer";
const DisplayTest = () => { const takeFile = React.useRef([]); const takeBlob = React.useRef([]) const [file, setFile] = React.useState([]);
const upload = e => { e.preventDefault(); const coll = e.target.files; if (coll.length < 1) return; takeFile.current=[]; takeBlob.current =[]; for (let i = 0; i < coll.length; i++) { Resizer.imageFileResizer( coll[i], 800, 800, "JPEG", 100, 0, uri => { console.log(uri); takeBlob.current.push(uri) }, "blob" ); takeFile.current.push(coll[i]); } setFile(takeBlob.current); //setFile(takeFile.current) }; return (
<div className='d-block'> {file.map((file, key) => ( <div key={key}> <img alt="noImage" width="100" height="100" src={URL.createObjectURL(file)} /> </div> ))} </div> </div>);
}; export default DisplayTest;
The createObjectURL from the blob files does not display the images in the img tag but the normal uncompressed file shows the images. Please how can I preview the images? Looking forward to hearing from you soon. Thanks in advance
@Mrbeyond did you solved it already?
Here is how I do it while using react-dropzone. Note that the component is a field input for formik.
react-dropzone
import React, { useState } from 'react'; import Dropzone from 'react-dropzone'; import Resizer from 'react-image-file-resizer'; export default function Base64ImageField(props) { const [value, setValue] = useState(props.field.value); function handleDrop(acceptedFiles) { Resizer.imageFileResizer( acceptedFiles[0], 100, 100, 'JPEG', 100, 0, uri => { setValue(uri); props.form.setFieldValue(props.field.name, uri); }, 'base64' ); } return ( <div className=""> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <div {...getRootProps({ className: 'tuv-uploadfile' })}> <input {...getInputProps()} /> <p> <i className="fas fa-cloud-upload-alt"></i> Drag'n'drop a files here, or click it! </p> </div> )} </Dropzone> {value && <img src={value} alt={props.field.name} />} </div> ); }
import React from "react"; import Resizer from "react-image-file-resizer";
const DisplayTest = () => { const takeFile = React.useRef([]); const takeBlob = React.useRef([]) const [file, setFile] = React.useState([]);
const upload = e => { e.preventDefault(); const coll = e.target.files; if (coll.length < 1) return; takeFile.current=[]; takeBlob.current =[]; for (let i = 0; i < coll.length; i++) { Resizer.imageFileResizer( coll[i], 800, 800, "JPEG", 100, 0, uri => { console.log(uri); takeBlob.current.push(uri) }, "blob" ); takeFile.current.push(coll[i]); } setFile(takeBlob.current); //setFile(takeFile.current) }; return (
}; export default DisplayTest;
The createObjectURL from the blob files does not display the images in the img tag but the normal uncompressed file shows the images. Please how can I preview the images? Looking forward to hearing from you soon. Thanks in advance
@Mrbeyond did you solved it already?
Here is how I do it while using
react-dropzone
. Note that the component is a field input for formik.