npm install browser-image-compression --save 

 yarn add browser-image-compression 

 import React from "react"; class App extends React.Component { onChange = async (e) => { // Some onchange event calls }; render() { return ( <input name="file" id="file" onChange={this.onChange} type="files" /> ); } } 

 ... import Compress from "browser-image-compression"; ... onChange = (e) => { // Get the files selected from the input tag // On select files always come in an array even // if you choose one its the first index // if you selected a couple then loop through the array const file = e.target.files[0] // Compression config const options = { // As the key specify the maximum size // Leave blank for infinity maxSizeMB: 1.5, // Use webworker for faster compression with // the help of threads useWebWorker: true } // Initialize compression // First argument is the file object from the input // Second argument is the options object with the // config Compress(file, options) .then(compressedBlob => { // Compressed file is of Blob type // You can drop off here if you want to work with a Blob file console.log(compressedBlob) // If you want to work with the File // Let's convert it here, by adding a couple of attributes compressedBlob.lastModifiedDate = new Date() // Conver the blob to file const convertedBlobFile = new File([compressedBlob], file.name, { type: file.type, lastModified: Date.now()}) // Here you are free to call any method you are gonna use to upload your file example uploadToCloudinaryUsingPreset(convertedBlobFile) }) .catch(e => { // Show the user a toast message or notification that something went wrong while compressing file }) }