How to preview the inside html tag before sending to the backend? about react-image-file-resizer HOT 1 CLOSED

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