Upload image with Compression without affecting quality in react js

Question

Upload image on the folder with Compression without affecting quality in react js class component

Sachin Singh · Answer

install below package npm install compressorjs follow the code shown below import React, {useState} from 'react' ; import Compressor from 'compressorjs' ; const Upload = () => { const [compressedFile, setCompressedFile] = useState(null); const handleCompressedUpload = (e) => { const image = e.target.files[0]; new Compressor(image, { quality: 0.8, // 0.6 can also be used, but its not recommended to go below. success: (compressedResult) => { // compressedResult has the compressed file. // Use the compressed file to upload the images to your server. setCompressedFile(res) }, }); }; return ( accept= "image/*,capture=camera" capture= "”camera" type= "file" onChange={(event) => this .handleCompressedUpload(event)} /> ); }; export default Upload;

selvi jp · Answer

i am using class component so this code makes error

Surya K · Answer

Use the below plugin to compress & upload the file to the server Plugin : npm install browser-image-compression --save Code : Refer this link for more info: https://www.npmjs.com/package/browser-image-compression

Upload image with Compression without affecting quality in react js

Answers (3)