Filename metadata not registered as the name of file for Imagekit API

[xpcrud]

Summary

Other metadata registered properly, but not filename.

Steps to reproduce

Here is an example code:

` import Uppy from '@uppy/core'; import '@uppy/core/dist/style.css'; import '@uppy/dashboard/dist/style.css'; import '@uppy/webcam/dist/style.css'; import Url from '@uppy/url'; import { Dashboard as UppyReactDashboard } from '@uppy/react'; //@ts-ignore (no typing available) import ImageKitUppyPlugin from 'imagekit-uppy-plugin'; import Webcam from '@uppy/webcam'; import React from 'react'; import { generateRandomString } from '@/utils/generate-randoms';

export interface PhotoUploadSpecs { folderPath: string; fileName?: string; isUseUniqueFileName?: boolean; isPrivateFile?: boolean; tags?: string[]; maxNumberOfFiles?: number; minNumberOfFiles?: number; maxFileSize?: number; //max for imagekit is 41943040 (40 MB) allowedFileTypes?: string[]; }

export default function PhotoUploader(props: PhotoUploadSpecs) { const uppy = React.useMemo(() => { return ( new Uppy({ debug: process.env.NEXT_PUBLIC_APPLICATION_MODE == 'development', autoProceed: false, restrictions: { maxNumberOfFiles: props.maxNumberOfFiles ? props.maxNumberOfFiles : 1, minNumberOfFiles: props.minNumberOfFiles ? props.minNumberOfFiles : 1, maxFileSize: props.maxFileSize ? props.maxFileSize : 20971520, //half capacity (20 MB) allowedFileTypes: props.allowedFileTypes ? props.allowedFileTypes : ['image/*'], }, // value specific to imagekit config is set here meta: { // name of the picture file. BUG POINT OF INTEREST: Nothing works for filename file: props.fileName, filename: props.fileName, name: props.fileName, fileName: props.fileName, // However, folder path and following input works as it should. folder: props.folderPath, useUniqueFileName: props.isUseUniqueFileName, isPrivateFile: props.isPrivateFile, tags: props.tags, }, }) .use(Webcam) .use(ImageKitUppyPlugin, { id: 'ImageKit', authenticationEndpoint: process.env.NEXT_PUBLIC_IMAGEKIT_AUTH_ENDPOINT, publicKey: process.env.NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY, metaFields: [ 'useUniqueFileName', 'tags', 'folder', 'isPrivateFile', 'customCoordinates', 'responseFields', //adding 'name' here does not change anything either ], }) ); }, []);

return (
    <UppyReactDashboard
        uppy={uppy}
        plugins={['Webcam', 'ImageKitUppyPlugin']}
    />
);

} `

Expected results

Filename inside Imagekit dashboard changed to what was specified for props.fileName

Actual results

Filename inside Imagekit dashboard is still its original filename.

[prasoon0909]

Hello, @xpcrud! To modify the file name before uploading it to the Imagekit media library, you can utilize the onBeforeFileAdded method. For additional information, please refer to uppy docs

const uppy = Uppy({
    debug: true, 
    autoProceed: false,   
    onBeforeFileAdded: (currentFile, files) => {
            const modifiedFile = {
            ...currentFile,
            name:  'Your_file_name' + Date.now()
            }
            return modifiedFile
        }
    })