imagekit-react prop fileName as a Callback Function

[torver213]

trafficstars

Description:

Based on your current implementation, the fileName prop accepts a string directly. However, this setup makes it challenging for developers to programmatically determine the file extension without access to the file itself. We believe it would greatly benefit our workflow and improve developer experience if the fileName prop could accept a callback function instead. This callback function would take the file or file extension as input and return a string. This enhancement would provide more dynamic capabilities and simplify handling filenames within our application.

For example

When I provide the fileName as my_file_9302, the file is uploaded without an extension but we don't want it this way. We want the name of the file uploaded to contain the uploaded file extension with our custom name.

Proposed Changes:

• Modify the fileName prop to accept a callback function.
• The callback function should take the file or file extension as input.
• It should return a string that will be used as the filename.

Proposal 1

   <IKUpload fileName={(file: File) => {
    // function to extract file extension
    const ext = getFileExtension(file.name);
    const fileName =  'my_file_name.' + ext;
    return fileName
  } }

Proposal 2

   <IKUpload fileName={(ext: string) => 'my_file_name.' + ext)} 

Better still

Your current implementation fileName prop should accept the file name string but check if no extension is provided, it should append the original file extension.

We will greatly appreciate if the change is effected before we launch our product.

[ankur-dwivedi]

Hi @techfortified, it looks like a good addition! We'll definitely include it in our upcoming release. Thanks for suggesting it!

[imagekitio]

@techfortified the same capability might be needed for other params too. So how about we do this?

<IKUpload
  overrideProps={async () => {}}
/>

Where overrideProps is a function, it will receive current props as argument and should return a promise, which should resolve to a JSON containing values for the following parameters:

fileName
useUniqueFileName
tags
folder
isPrivateFile
customCoordinates
extensions
webhookUrl
overwriteFile
overwriteAITags
overwriteCustomMetadata
customMetadata

This will allow anyone to programmatically control the props without having to re-render the upload component.

Please let me know your thoughts.

[torver213]

@techfortified the same capability might be needed for other params too. So how about we do this?

<IKUpload
  overrideProps={async () => {}}
/>

Where overrideProps is a function, it will receive current props as argument and should return a promise, which should resolve to a JSON containing values for the following parameters:

fileName
useUniqueFileName
tags
folder
isPrivateFile
customCoordinates
extensions
webhookUrl
overwriteFile
overwriteAITags
overwriteCustomMetadata
customMetadata

This will allow anyone to programmatically control the props without having to re-render the upload component.

Please let me know your thoughts.

This sounds good provided we can access the uploaded file to get the file extension and concatenate it with the chosen name.

[imagekitio]

@techfortified we just released 4.1.0 which should help you programmatically override upload parameters.

IKUpload accepts a overrideParameters callback.

This function accepts the File object as an argument and should return a JSON value, e.g., {fileName: "new-file-name.jpg"}. Use this to programmatically override fileName, useUniqueFileName, tags, folder, isPrivateFile, customCoordinates, extensions, webhookUrl, overwriteFile, overwriteAITags, overwriteTags, overwriteCustomMetadata, customMetadata, and transformation parameters.

Please let us know if this works for you.