imagekit-developer / imagekit-javascript Goto Github PK

Don't know where to report this. On this doc section:

https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload

Using node-uuid like that is now deprecated, see: https://github.com/kelektiv/node-uuid#uuid

On page usage works but typescript throws errors

import ImageKit from 'imagekit-javascript';

const imagekit = new ImageKit({
	publicKey: 'your-public-key',
	urlEndpoint: 'your-url-endpoint',
});

Results in:

This expression is not constructable.
  Type 'typeof import("/path/to/app/node_modules/imagekit-javascript/dist/src/index")' has no construct signatures.

Can you add the ability to specify a timeout, or default it to some value? XHR has no timeout by default. I just spent a while debugging why my use of imagekit.upload() wasn't working OR giving me an error. It's because I was (accidentally) specifying an inaccessible endpoint, but I couldn't figure out why there was no error. It because the XHR's onload was never called.

I may have missed it but I couldn't find the way to serve responsive images in imagekit. something like "width" : "auto" which is then calculated at runtime inside user's browser by js.

The upload API accepts extensions parameter. It is stringified JSON object with an array of extensions to be applied to the image. Check the docs here - https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload

SDK should accept the JSON and stringify it before calling API. Also need to add test cases and update readme.

Would you consider allowing developers to specify the URLSearchParams implementation? The situation I'm running into is with React Native. When I use imagekit.url(...), I get the error not implemented. This is due to a bug in React Native. There is a way to get around it, but this bloats the bundle size, so it'd be better if I could instead include another implementation of URLSearchParams, such as this one. I'm guessing you'd do it like this:

const URLSearchParamsPolyfill = require('url-search-params-polyfill');

var imagekit = new ImageKit({
    publicKey : "your_public_api_key",
    urlEndpoint : "https://ik.imagekit.io/your_imagekit_id",
    authenticationEndpoint : "http://www.yourserver.com/auth",
    URLSearchParams: URLSearchParamsPolyfill,
});  

All web based frontend SDKs depends on imagekit-javascript SDK for core functionality i.e. URL generation and upload file. Currently SDK is responsible for calling authenticationEndpoint to get necessary security parameters (signature + token) for the upload request. However this results in security issue as there is no way to pass custom header on this request issued by the SDK internally. Related issue in React SDK - imagekit-developer/imagekit-react#101

To resolve this issue, it would be ideal to delegate the responsibility of generating a security parameter to the SDK consumer.

Therefore, to implement these improvements, the following steps should be taken:

• Remove the authenticationEndpoint from the SDK initialization process.
• Modify the upload function to include the mandatory security parameters: signature, token, and expire.

Once this is done, we can start using latest imagekit-javascript SDK in all web based frontend SDKs.

I read the documentation of ImageKit but I couldn't find anything about ImageKit and video in react-native. Does it support video for react native?

Getting started guide similar to https://github.com/imagekit-samples/quickstart/tree/master/react

Just noticed this was a change from 2 days ago.

I've tried it in a Vue application and the eventListener is just not firing. The upload still works, but the console.logs do not appear at anytime throughout the process.

My code

async upload(file, imageService)
        {
            this.loadImage = true;

            var fileSize = file.size;
            var customXHR = new XMLHttpRequest();

            customXHR.upload.addEventListener('progress', function (e)
            {
                console.log(e);

                if (e.loaded <= fileSize)
                {
                    var percent = Math.round(e.loaded / fileSize * 100);
                    console.log(`Uploaded ${percent}%`);

                    this.percentage = Math.round(e.loaded / fileSize * 100);
                }

                if(e.loaded == e.total)
                {
                    console.log("Upload done");
                }
            });

            var imagekit = new ImageKit({
                publicKey : imageService.publicKey,
                urlEndpoint : imageService.urlEndpoint,
                authenticationEndpoint : imageService.authenticationEndpoint,
            });

            return await imagekit.upload({
                xhr: customXHR,
                file : file,
                fileName : file.name,
                folder: "Nautique"+"/"+this.folderPath,
            });
        }

Expose raw response body and headers (e.g. x-request-id)

https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload
"Client-side upload"
I found a possible problem of security, that maybe can put in risk users images. If the client-side (uploader) know users file name, because the client side can replace the file if set useUniqueFileName to false, right? So, for example, if the client-side know the file name from the profile pic from a user, the client-side can replace the file, changing a profile pic from another user, just with a little of "malicious intention" .... It was what i understand.... Please help me with this question.https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload

Hi,

We are getting the following error when uploading files from Safari (using client side upload with the JS SDK:

"The token with value '8cbdb59b-6246-4f8f-b0e0-77b34c4e9e63' has been used before. We suggest using V4 UUIDs, or another random string with enough entropy to avoid collisions.”

The first file (in a list) will work, while the following fail. This error is only occurring on iOS devices.

Near identical issue (however it's using Uppy):
imagekit-developer/imagekit-uppy-plugin#3

After some debugging I have noticed that on an Android device, or a computer, running a for loop to upload images ImageKit will call the our cloud function to retrieve authenticationParameters for every single iteration, however, on an iOS device the cloud function will only be called on the first iteration. Based on the issue above, it seems like it's caching the result on iOS so it doesn't need to make the same call again. Issue is this is causing subsequent uploads to fail......

A potential fix could be to do the following after line 68 at

xhr.setRequestHeader('Cache-Control', 'no-cache');`

Edit:
After much trail and error I have found the only way to solve the issue is by making the call to authenticationEndpoint a POST request. I have tried adding every form of cache control header (both on server & client), however Safari ignores all of them.

Suggested fix: Change API call to authenticationEndpoint from GET to POST request

Code for reference:

Initialise Imagekit:

new ImageKit({
publicKey: "PUBLIC_KEY",
urlEndpoint: "URL_ENDPOINT",
authenticationEndpoint: "API_ENDPOINT,
}),

Authentication endpoint (cloud function):

exports.createImageKitSignature = functions
.https.onRequest((req, res) => {
cors(req, res, () => {
const authenticationParameters = imagekit.getAuthenticationParameters()
res.status(200).send(authenticationParameters)
})
})

Upload function:

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

In addition to callback, promise should be supported as well similar to Node.js SDK.

It was cool, we had the number of pictures on the link so we could have the most dynamic site

Error I'm getting:

file_upload.js:3 Uncaught ReferenceError: ImageKit is not defined
    at HTMLDocument.<anonymous> (file_upload.js:3:19)
    at i (jquery.min.js:2:27151)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:27914)
    at Function.ready (jquery.min.js:2:29707)
    at HTMLDocument.J (jquery.min.js:2:29892)

Tag used to import imagekit javascript client:

<script src="https://unpkg.com/[email protected]/dist/imagekit.min.js"></script>

Maybe related?
imagekit-developer/imagekit-nodejs#54

In the sample app, yarn.lock needs to be corrected to use public npm registry. Right now it is set to a private npm registry, leading to errors during build process of yarn startSampleApp.

I am using image kit-js to upload my profile pic images of my users but when they upload i wanna show them the percent they have uploaded is there any way to get that percentage

The right parameter name for the border is b as per the docs

But the SDK is using bo

• raw transformation parameter to support conditional transformations and layers.
• New parameters in upload API related to overwrite and extensions.

That is a dealbreaker for me to use your service, even if it looks great.

Can we not have a .deleteFile() method just like .upload()?

Thanks.

#39 fixes the issue of types not being automatically resolved for the package when installed as a dependency.

However since merge there has not been a release of the package.

Can a release please be made so we can benefit from this change.

In the meantime you can add the following to your project's tsconfig.json, telling TS where to find the types for imagekit-javascript:

{
  "compilerOptions": {
    //...
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "imagekit-javascript": ["node_modules/imagekit-javascript/dist/src"] // This mapping is relative to "baseUrl"
    }
  }
}

How to pass jwt (Auth token) to get Sign from my server

I'm trying to use this with a modern react app, which doesn't require jQuery at all. Surely the ajax calls could be replaced in this library with vanilla js calls?

overlayImage and overlayX etc are not mapped to oi and ox as expected.

Also, / is not being converted in the overlay image path.

Only urlEndpoint should be mandatory to initialize the SDK. publicKey should be optional as it is only required for file uploading.

Technology:
JavaScript
Next.js

Reproduction of error:

https://codesandbox.io/p/sandbox/vibrant-voice-zpg5dp?file=%2Fapp%2Fpage.tsx%3A9%2C7

Package Versions installed:

imagekit-javascript: ""^2.0.0",
imagekit: "^4.1.3",
"next": "^13.4.6",
"react": "18.2.0",

Summary:

The use case is uploading user profile pictures and listing photos for my marketplace app to the ImageKit CDN.
I can generate a signature just fine (a JSON object with token, expire and signature values is returned from my create-signature endpoint/serverless function), so I do not think the issue lies with the "imagekit" Node.js SDK/package.
However, when I call the upload() function on an instance of the ImageKit object initialised with the authenticationEndpoint as a property of said object, the following error is thrown:

"Missing token for upload. The SDK expects token, sginature and expire for authentication"

What I think might be happening:

This may be an issue that is a limited to the latest version of this package/SDK. This issue appeared when I updated the imagekit-javascript package to it's latest version. I have not touched any another parts of the code required to upload an image to the ImageKit CDN since initially writing the function.