How to preview the inside html tag before sending to the backend?

[Mrbeyond]

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

[ifdion]

@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.

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>
  );
}