Loading

Upload image with Compression without affecting quality in react js

Upload image with Compression without affecting quality in react js

selvi jp

5y628React

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

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

selvi jp5y ago
i am using class component so this code makes error
Surya K5y ago
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
Sachin Singh5y ago
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;