Uploading multiple images on iOS devices failing about imagekit-javascript HOT 11 CLOSED

Could you please share a working (minimum) code for me to reproduce this issue?

from imagekit-javascript.

I've attached a minimum code working example.

1. Enter required values on .env file
2. yarn install
3. yarn serve
4. open Safari
5. Open network tab to see XHR requests
6. click the upload files input button, select 5 - 10 images

You'll then see the mentioned errors. Also note the network tab shows only 1 call to the server (for all 5-10 images)

You can also then try this on Google Chrome and see that it works as intended, on the network tab you will see 1 call to the server for every image uploaded

vuejs.zip

from imagekit-javascript.

Got the issue reproduced, Safari just doesn't seem to respect any header.
Instead of POST, what I have done is added a random query param in the GET request itself. This is to prevent any breaking change in existing implementations.

Before I release the SDK, can you confirm if the below bundle works for you? Its only for testing, please do not use it in production.

https://ik.imagekit.io/demo/img/imagekit.min_ZkfCXeHcx.js?ik-sdk-version=javascript-1.4.3&updatedAt=1656997731049

from imagekit-javascript.

Hi, I've tried using the script above, the problem still exists. Perhaps make some configuration options to allow requestType to be post? This way it won't be such a breaking change.

from imagekit-javascript.

It is not possible to cache anymore because the URL is different. Can you share the code with the above code bundle not working?

from imagekit-javascript.

Exact same bundle I uploaded before with the following changes:

Added to index.html:

Removed "import ImageKit from "imagekit-javascript" from HelloWorld.vue (as we're using the CDN script)

The rest remains the same:
`
export default {
name: "HelloWorld",
props: {
msg: String
},
methods: {
handleFiles(e) {
const files = e.target.files
for (let i = 0; i < files.length; i++) {
this.uploadImage(files[i])
}
},
async uploadImage(file) {
// eslint-disable-next-line no-undef
const imagekit = new ImageKit({
urlEndpoint: process.env.VUE_APP_IMAGEKIT_URL_ENDPOINT,
publicKey: process.env.VUE_APP_IMAGEKIT_PUBLIC_KEY,
authenticationEndpoint: process.env.VUE_APP_YOUR_AUTH_ENDPOINT || "http://localhost:3001/auth"
})

  try {
    const result = await imagekit.upload({ file: file, fileName: file.name })
    console.log('result', result)
  } catch (error) {
    console.log('error', error)
  }
}

}
};
`

from imagekit-javascript.

Its working, I selected 4 files and browser issues 4 auth requests

there is a random query param at the end

from imagekit-javascript.

The problem still persists on my end, I have noticed however the new script is an improvement, on the original package, it will make 1 or 2 network calls at most until cached (test with 8 images), on the new package it made 5 network calls (test with 8 images) until it cached (not sure how it's caching with randomised URL's?).

With original package:

With new script:

from imagekit-javascript.

Got it, try this bundle - https://ik.imagekit.io/demo/img/imagekit.min_wkXsDcTUE.js?ik-sdk-version=javascript-1.4.3&updatedAt=1657002054431

from imagekit-javascript.

The new bundle worked as intended on both Google Chrome & Safari. Haven't been able to test on an iOS device yet but it seems to be right.

from imagekit-javascript.

Fixed in 1.5.2

from imagekit-javascript.