viduraperera

          <div className="col-xl-4 col-lg-4 col-md-12 mb-5 mt-5 col-sm-12 d-flex justify-content-center align-items-baseline">
            <br />
            {this.state.outputFileName ? (
              <button
                type="button"
                className=" btn btn-dark"
                onClick={e => this.click(e)}
              >
                Compress
              </button>

viduraperera

  handle = e => {
    const imageFile = e.target.files[0];
    this.setState({
      originalLink: URL.createObjectURL(imageFile),
      originalImage: imageFile,
      outputFileName: imageFile.name,
      uploadImage: true
    });
  };

viduraperera

            <div className="d-flex justify-content-center">
              <input
                type="file"
                accept="image/*"
                className="mt-2 btn btn-dark w-75"
                onChange={e => this.handle(e)}
              />
            </div>

viduraperera

import React, {useState} from "react";

function App(){

  const[data, setData] = useState(null);
  const[print, setPrint] = useState(false); 

  function getData(val){

    if(!val) return;

viduraperera

  function getData(val){

    if(!val) return;

    const URL_REGEX = /(((https?:\/\/)|(www\.))[^\s]+)/g;
    let textSubject = val.target.value;
    
    return setData(textSubject.replace(URL_REGEX, (url)=>{

      let hyperLink = url;

viduraperera

	  return(
      <div>
      {
        print?
          <h1>
            <div dangerouslySetInnerHTML={{ __html: data }} />
          </h1>  
        :null
      }
      <input type="text" onChange={getData}></input>