Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceError: Cant find variable: globalThis on Iphone safari browser (REACT JS) #110

Closed
Francis2022 opened this issue Jul 21, 2021 · 1 comment

Comments

@Francis2022
Copy link

Francis2022 commented Jul 21, 2021

Hi This is my very first post in Github and just signed up to post my issue with browser-image-compression.

My site built using react and browser-image-compression work fine on my laptop and desktop browsers. But sadly when i try it on my iphone safari browser it throws me below error.
ReferenceError: Cant find variable: globalThis

I have changed console.log to alert so i can see whats going on in my iphone browser. I get errors during try catch.
I am not sure what i am doing wrong. So sorry if i am disturbing. browser-image-compression is the best i found.

    const target = event.target
    const imageFile = target.files[0];
    alert('originalFile instanceof Blob', imageFile instanceof Blob); // true
    alert(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

      const options = {
      maxSizeMB: 1,
      maxWidthOrHeight: 1920,
      useWebWorker: false,
    }

    // upto here it works very well and i get first two alerts but catch errors after below try 
   
      try {
      const compressedFile = await imageCompression(imageFile, options);
      alert('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
      alert(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

      setFieldValue(name, compressedFile);
      // let reader = new FileReader();
      // reader.readAsDataURL(field)
      let reader = URL.createObjectURL(compressedFile)
      setFileUrl(reader)

      // await uploadToServer(compressedFile); // write your own logic
    } catch (error) {
      alert(error);
    }

  }`
@Francis2022
Copy link
Author

Hi I solved this problem by inserting below script to index.html
i am not sure is it good practice to load this but i can not give up browser-image-compression as its uploading images very fast and the image compression is excellent.

<script src="//unpkg.com/@ungap/global-this"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants