System is hanging when we are trying to load 30 images of 100MB size.

[manthan-l-simformsolutions]

issue:- The system is experiencing performance issues when attempting to load 30 images, each with a size of 100MB. after all, we have attempted compression in one file at a time in the loop but that is also hanging the system.

Here I have attached some example code that we are using.

const imageSize = (file) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    const promise = new Promise((resolve, reject) => {
      reader.onload = function (e) {
        const image = new Image()

        image.src = e.target.result

        image.onload = function () {
          const height = this.height
          const width = this.width

          resolve({ width, height })
        }

        image.onerror = reject
      }
    })

    return promise
  }

 const compressImage = async (file) => {
    const imageDimensions = await imageSize(file)
    const options = {
      maxSizeMB: 1,
      maxWidthOrHeight:
        imageDimensions?.width > 1300 ? 1300 : imageDimensions?.width,
      useWebWorker: true,
    }

    const compressedImg = await imageCompression(file, options)

    return compressedImg
  }

const totalImages = imageFiles.length
for (let i = 0; i < totalImages; i++) {
      const file = imageFiles[i].image.originFileObj
      const timeStamp = new Date().valueOf()
      const compressedImageFile = await compressImage(toJS(file))
}

How can I compress images without hanging a system? any suggestion would be appreciated. thanks

[sherlock1982]

Make sure you're really using WebWorker for compression. I see you set useWebWorker: true but is it really loaded and used? I think this is the key to success. Using WebWorker you process images in a separate thread and your UI will not be affected