imagekit-developer / imagekit-react Goto Github PK
View Code? Open in Web Editor NEWReact SDK for using ImageKit.io
Home Page: https://imagekit.io
License: MIT License
React SDK for using ImageKit.io
Home Page: https://imagekit.io
License: MIT License
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.
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:
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.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.
Good luck and happy Hacktoberfest!
Test cases are needed for LazyLoading and LQIP, especially related to events such as:
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:
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
authenticationEndpoint
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} >
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
<img />
which has all the necessary responsive featuresMy suggested solution
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.
imagekit-react/src/components/IKUpload/index.tsx
Lines 145 to 167 in 23043ef
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:
Framework of choice: Cypress
<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}
/>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.