imagekit-developer / imagekit-react Goto Github PK

Hello, I am trying to use IKImage in a Next JS project (with typescript). The compilation fails with a ReferenceError: regeneratorRuntime is not defined.

I am not sure what is causing it, but it seems all the bundles in dist are using regeneratorRuntime.

I found this similar issue that I think it could be a starting point to fix this, but I am not 100% sure

Hi,

is it possible to show a loader when the image is being uploaded? On slow networks, there's no way to communicate to the user that an upload is happening. Since there's no onClick handler, is there a way to know when the image is being uploaded and show a loader?

Review commits made in forks and identify common enhancements that we can make in this SDK.

Hello 👋

Hacktoberfest 2020 has started, and the ImageKit team is excited to have you contribute to our projects. Register at the Hacktoberfest site, so you can get your t-shirt!

We offer a forever free plan for the community, and 20000+ developers use ImageKit.io to resize and optimize images in real-time.

What to Work On?

We have prepared a list of beginner-friendly issues to work on so you can get your feet wet in contributing to open-source projects. There are several repositories in different programming languages that you can contribute to:

Client-side SDKs

• JavaScript
• React
• Vue.js
• Android
• Angular
• iOS

Server-side SDKs

• Python
• NodeJS
• PHP
• JAVA
• Ruby on rails
• .Net

Get started

• Find an issue labeled with hacktoberfest or good first issue to work on. If you find one that looks interesting and no one else is already working on it, comment on the issue that you are going to work on it.
• Start hacking!
• Create a pull request 🎉

What you can expect from us

• Maintainers will be reviewing PRs, with the aim of including as many as possible in our releases and documentation.
• If you have any questions, please ask us by commenting here or create an issue in the relevant repository. We are happy to help.

Things that are ALWAYS welcome

• Adding test cases
• Improving documentation
• Improving error handling and error messages
• Improved logging (i.e., more clear, more beautiful)
• Performance or security improvements
• Educational content like blogs, videos, courses

If there's some other way you'd like to contribute, start a discussion by commenting on this thread or creating an issue in the relevant repository.

Resources

• Image manipulation docs
• API reference

Good luck and happy Hacktoberfest!

Test cases are needed for LazyLoading and LQIP, especially related to events such as:

• Updates actual src when lazyload threshold is reached
• Updates actual src when LQIP is active and image component is rendered
• Combinations of various LQIP and lazyload options

The SDK should lazy load images using loading=lazy attribute as in Vue.js SDK. Also, the lqip parameter should access two options - quality and blur. The implementation and behavior should match that of Vue.js SDK.

Lazy loading in Vue.js - https://github.com/imagekit-developer/imagekit-vuejs/#lazy-loading-images
LQIP in Vue.js - https://github.com/imagekit-developer/imagekit-vuejs/#low-quality-image-placeholders-lqip

Are there any types for this? Are they in progress?

Hi,

I am new to CDN flow. I am using a personal project to learn, but I am using react 18 when there is a limitation on react 17 here.

I wonder if I can help by upgrading the peer dependencies and running tests. I have a few questions:

• Have you seen any features that I need to test manually when I try to upgrade?
• Have you tried to upgrade react 18.0.0 but found problems?

Thank you

Since 3.0.0, inputRef is no longer on IKUpload and cannot trigger a click on the custom button, is there a workaround?

                 <IKContext publicKey={publicKey} urlEndpoint={urlEndpoint} authenticator={authenticator}>
                          <IKUpload
                          ...
                            style={{ display: "none" }} // hide the default input and use the custom upload button
                            inputRef={inputCoverRef}
                            ref={ikUploadCoverRef}
                          />
                          {inputCoverRef && (
                            <button
                              className="default-btn"
                              onClick={(e) => {
                                e.preventDefault();
                                inputCoverRef.current.click();
                              }}
                              id="coverPhoto"
                              disabled={loadingImgCover}
                            >
                              Upload
                            </button>
                          )}
                        </IKContext>

It looks like the mime field is missing in the onSuccess callback.

I AM TRYING INSTALLING IMAGEKIT USING NPM AND IT IS GIVING ERROR LIKE THIS
`npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1 || ^17.0.0" from [email protected]
npm ERR! node_modules/imagekitio-react
npm ERR! imagekitio-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/apple/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/apple/.npm/_logs/2022-06-03T09_40_57_247Z-debug-0.log
`
CURRENTLY I AM USING REACT18 FOR DEVELOPMENT

var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;

A default value for the fileName parameter can be picked from the actual file name as uploaded from the filesystem.

From uploading-files-in-react docs

• I've created the auth endpoint (express-js)
• I've specificed the auth endpoint for authenticationEndpoint
• Image upload is working as expected

However, I have a concern that this is not considered secure as anyone could call the auth endpoint and get a token.

Then, I saw the reply here

    The endpoint is supposed to host on your backend. You can make it secure in a way that no unauthorised user can get token. Similar to how you might be protecting other resources on your application.

Originally posted by @imagekitio in #50 (comment)

So, I protected the auth endpoint, but I could not find a way to modify the authenticationEndpoint GET request's header to pass users Bearer Token along from the client-side.

Any advice, please?

When I use <IKImage> and run a Lighthouse audit, I get complaints that the <img> tags (which are rendered by this component) should have width/height explicitly set.

Is this something that you think <IKImage> should have built-in or do I have other ways to set those styles manually?

Update Getting started guide after all current issues and video support is added.

I'm looking for discussion, but it looks like this repo didn't enable the discussion feature, so here I am.

I'm using imagekit with nextjs, and my image were like very fast to deliver to the browser, thanks for the service, and here what's I'm gonna ask.
What's the benefit using this SDK over Next.js Image?
or is there something I'm missing out?

I would like to use my own custom button, however, it's currently not possible since the IKUpload component does not forward references to the underlying input element.

Please allow for references to be forwarded.

Hi Im trying to have IKImage reload after a successful upload but it's not working.

Can you tell me what I'm doing wrong ?

`
const NewPost = () => {

const [imageURL, setImageURL] = useState("/default-image.jpg");

const onError = err => {
    console.log("Error", err);
};

const onSuccess = res => {
    console.log("Success", res);
    setImageURL(res.filePath);
};


return (
    <div>
        <div className="content_row">
            <div className="post_creator">
                <div className="editor">
                    <IKContext
                        publicKey={publicKey}
                        urlEndpoint={urlEndpoint}
                        authenticationEndpoint={authenticationEndpoint}
                    >
                        <p>Upload an image</p>
                        <IKUpload
                            fileName="test-upload.png"
                            onError={onError}
                            onSuccess={onSuccess}
                        />
                    </IKContext>
                </div>
                <div className="post_rendered">
                    <div className="post_photo">
                        <IKContext urlEndpoint={urlEndpoint}>
                            <IKImage
                                path={imageURL}
                                loading="lazy"
                                lqip={{ active: true, quality: 20, blur: 30 }}
                            />
                        </IKContext>
                    </div>
                </div>


            </div>
        </div>
    </div>
);

}`

Im trying to pass onChange event as props to the IKUpload component, but after this, onSuccess doesn't really do anything.
onError also doesn't do anything.
Could someone help identify my mistake?

<IKUpload folder={"/avatars"} tags={"avatar,sometag"} fileName={"av"} useUniqueFileName={true} onChange={() => console.log('changing')} onSuccess={(res) => {console.log('success'); setAvatarUrl(res.url)}} />

Is the any way to using IK Upload and check file size upload, if file size chosen is more than 5mb => Stop process of upload.
Many thanks

Apologies if this is not the appropriate spot to post this question, but I cannot find anything in the official documentation. I am having issues getting lazy loading to work with the ImageKit React SDK when using signed urls. As you can see below, the signed images load just fine, but when swiping the low quality image is not shown. Instead the user can only temporarily see the image alt tag.

Lazy loading worked just fine before I started using signed images. And I need to use signed images because we use watermarks and want to ensure users cannot remove. Is this a known incompatibility or is there a best practice to get lazy loading to work with signed images?

anyone can find the authentication endpoint from the sourcecode and then get the token for image upload

On the following document, right at the end you're doing this:

<IKContext publicKey={publicKey} urlEndpoint={urlEndpoint} authenticationEndpoint={authenticationEndpoint} >

https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#how-to-implement-authenticationendpoint-endpoint

But of course, Typescript is complaining because authenticationEndpoint prop doesn't exist on IKContext, the correct prop is authenticator.

Please fix that so when people copy/paste they don't get confused.

Also, it would be better to clarify that this prop authenticator expects to return a Promise instance, but that's also not explained on the example provided above, and also on the types on the React SDK if I'm not mistaken: (I see a fn that returns any, or null or undefined...but no Promise type expected??? )

Hi,
I'm using imagekit for the first time and have noticed it doesn't support multiple files upload. I saw in the docs it stated "To upload files in bulk, write a program to loop through files and call upload API repeatedly". While i managed to achieve this as stated, I think adding support of multiple files upload would be a great feature.
Thanks in advance,
David

I expected srcsets to be added automatically, but that does not seem to be provided? How can we then add them ourselves to optimize responsive images?

Hello ImageKit folks, I believe I have found a bug. I created a named transformation called minvatar with the value tr:w-25,h-25,fo-face.

You can see in this link that it works fine when going directly to the image.

However, this link generated by the SDK breaks, possibly due to the version string? (You will see the transformation working if you remove the version string appended at the end)

I was able to work around the issue by changing the name of my transformation, after that everything works as expected.

I am still confused how to add alt text . I search in docs but doesn't get anything here.

I'm attempting to implement a Lqip for messages containing images inside a react chat app.
I'm using IKImage component inside a chat message div containing other elements (message timestamp) like so:
<IKImage urlEndpoint={urlEndpoint} path={path} width="100%" height="auto" loading="lazy" lqip={{ active: true, quality: 20 }} />
But, when the component is rendered, a div only containing the message timestamp and consequently having smaller dimensions is rendered for a few seconds, then the Lqip is rendered before the image finally loads. Is there a way to improve the performance?

The Code Coverage generated using nyc should be published to CodeCov

Refer to https://github.com/codecov/example-node for implementation

Hello,
Is there a way (or is it planned by imageKit ?) to make the SDK compatible with SSR ? I guess server-side-rendering and image optimization often go hand in hand...
Thank you in advance !

I have deleted a custom metadata that needed its type updated for my use case. In the docs it says you cannot update the type so my assumption was to delete it and then create the same name with the correct type.

I've tried using the imagekit.io GUI dashboard @ https://imagekit.io/dashboard/settings/media-library as well as createCustomMetadataField in my JS file with both failing saying "A custom metadata field with this name already exists" yet it is not showing in my list of custom metadata list as I have deleted it. I have waited awhile assuming it maybe a delay on the server to reconcile but im starting to suspect it has a list of custom metadata that doesn't update on deletes. Any guidance would be awesome.

Can you please upgrade the react dependency?

Uploading image returns with this error

{
    "message": "Your request contains invalid expire parameter. Expire parameter should be a Unix time in less than 1 hour into the future.",
    "help": "For support kindly contact us at [email protected] ."
}

Where do I generate authenticationEndpoint? I have a decoupled solution with a React frontend and Node backend. Do I have to make an endpoint in the backend or can I do it in the frontend project?

I'm very confused as to where I should store it and should the contents of the auth route contain the following code from the imageKit dashboard:

// SDK initialization

var ImageKit = require("imagekit");

var imagekit = new ImageKit({
    publicKey : "my_public_key",
    privateKey : "my_private_key",
    urlEndpoint : "my_url_endpoint"
});

This is the only link missing as I'm receiving Missing authenticationEndpoint error response when selecting a file to be uploaded.

A recent issue I faced was with responsive images with imagekit-io

The IKImage has no feature for responsiveness

• So had to use <img /> which has all the necessary responsive features
• Had to write the whole URL and transformations in URL format
• Seems redundant

My suggested solution

• Create another function which refers the IKContext for the URL
• Imagekit-react already has the code for all transformations

Would be great if we had responsive feature somehow integrated in IKImage but until then, this small feature can help many.

We would like to show a spinner while the upload is in progress so that the user gets appropriate feedback.

Currently there is no way to do this and no good workaround, right?

I think the easiest way is to add an "onUploadStart" prop, which will be executed as soon as the upload starts internally.

Thanks.

The assignment that creates the restProps variable is missing the following props that are defined on the IKUpload component:

      webhookUrl,
      overwriteFile,
      overwriteAITags,
      overwriteTags,
      overwriteCustomMetadata,

This throws multiple error in the browser when those props are used. e.g.

[Error] Warning: React does not recognize the webhookUrl prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase webhookurl instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Upgrade to the latest imagekit-javascript SDK so that only urlEndpoint is mandatory to initialize the SDK. publicKey should be optional as it is only required for file uploading.

When using the IKImage component, the following TypeScript error is seen:

'IKImage' cannot be used as a JSX component.
  Its type 'typeof IKImage' is not a valid JSX element type.
    Type 'typeof IKImage' is not assignable to type 'new (props: any) => Component<any, any, any>'.
      Types of construct signatures are incompatible.
        Type 'new (props: IKImageProps, context: any) => IKImage' is not assignable to type 'new (props: any) => Component<any, any, any>'.
          Target signature provides too few arguments. Expected 2 or more, but got 1

Dependencies:
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"typescript": "5.1.6"

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./src/*"] }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Example repository:
https://github.com/AryanJ-NYC/imagekit-ts-error (specifically https://github.com/AryanJ-NYC/imagekit-ts-error/blob/master/src/app/page.tsx)

The framework should:

• supplement tests that depend extensively on a browser window environment
• be usable uniformly across all SDKs providing a sample app with HTML+JS output

Framework of choice: Cypress

PRs: #26 #40

TODO:

• Specify IKImage update exceptions in README
• Fix cypress runner
• Update sample-app
• Update CONTRIBUTING.md

<IKImage lqip={{ active: true }} {...other} /> works fine but if you do <IKImage lqip={{ active: false }} {...other} /> the image never loads. The workaround is to make an object that is undefined:

let lqip: LQIP | undefined = { active: true };
if (media.type === MediaType.Video) {
  path += "/ik-thumbnail.jpg";
  lqip = undefined;
} 
return (
<IKImage
  lqip={lqip}
  {...other}
/>