Comments (11)
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.
- Enter required values on .env file
- yarn install
- yarn serve
- open Safari
- Open network tab to see XHR requests
- 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
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.
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:
<script type="text/javascript" src="https://ik.imagekit.io/demo/img/imagekit.min_ZkfCXeHcx.js?ik-sdk-version=javascript-1.4.3&updatedAt=1656997731049"></script>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.
Related Issues (20)
- No TypeScript definitions this day and age? HOT 8
- I got network error issues using this in react native HOT 5
- When will you publish a new release to npm? Waiting for a version with recent merged PRs HOT 1
- New release for types property in package.json HOT 1
- Support extensions in upload file operations HOT 1
- Number of assets
- How to pass jwt to get Sign HOT 1
- New APIs parameters
- Support promise
- Expose response headers and raw body
- Getting started guide
- Latest version `1.5.0` no longer export `ImageKit` variable to global scope HOT 2
- customXHR eventListener not working HOT 2
- .deleteFile() method just like .upload() HOT 1
- Remove authentication endpoint and related logic HOT 1
- Is it possible to use imageKit for playing video in react-native? HOT 1
- Token not found despite authentication endpoint returning valid object with token, expire and signature values HOT 2
- ESM Package Doesn't Bring Along Types HOT 1
- Add Support for List and search file API HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imagekit-javascript.