Here my code to upload file
import React from 'react'
import { IKContext, IKImage, IKUpload, IKVideo } from "imagekitio-react";
const publicKey = "myPblickey.......";
const urlEndpoint = "https://ik.imagekit.io/myimagekitID";
const authenticationEndpoint = "http://localhost:3500/api/v1/auth/imagekitauth";
const onError = (err) => {
console.log("Error", err);
};
const onSuccess = (res) => {
console.log("Success", res);
};
const onUploadProgress = (progress) => {
console.log("Progress", progress);
};
const onUploadStart = (evt) => {
console.log("Start", evt);
};
function Aboutus() {
return (
<div className="App">
<IKContext
publicKey={publicKey}
urlEndpoint={urlEndpoint}
authenticationEndpoint={authenticationEndpoint}
>
<h2>File upload</h2>
<IKUpload
onError={onError}
onSuccess={onSuccess}
/>
</IKContext>
</div>
)
}
export default Aboutus
Here response we get in console
Error {message: 'The authenticator function is not provided.'}
same thing i tried in Codesandbox and it work fine Codesendbox
the authenticationEndpoint url also work fine
http://localhost:3500/api/v1/auth/imagekitauth
the response given by authenticationEndpoints
{
"token": "bc1e2b3f-0e7d-45a0-9a13-d3f54........",
"expire": 1697286695,
"signature": "b7456096d164........"
}
The error message you received, "Error: The authenticator function is not provided," suggests that you haven't provided an authenticator function for the IKContext component in your code.
import React from 'react';
import { IKContext, IKUpload } from "imagekitio-react";
const publicKey = "myPblickey.......";
const urlEndpoint = "https://ik.imagekit.io/myimagekitID";
const authenticationEndpoint =
"http://localhost:3500/api/v1/auth/imagekitauth";
const authenticator = () => {
return fetch(authenticationEndpoint) // Replace with your actual
authentication endpoint
.then((response) => response.json())
.then((data) => data.token);
};
const onError = (err) => {
console.log("Error", err);
};
const onSuccess = (res) => {
console.log("Success", res);
};
function Aboutus() {
return (
<div className="App">
<IKContext
publicKey={publicKey}
urlEndpoint={urlEndpoint}
authenticationEndpoint={authenticator} // Pass the authenticator
function here
>
<h2>File upload</h2>
<IKUpload
onError={onError}
onSuccess={onSuccess}
/>
</IKContext>
</div>
);
}
export default Aboutus;