pqina / filepond-plugin-file-rename Goto Github PK

hey!

i'm looking into having dynamic renaming function (basically, I define it once, then inspect the uploader to rename files according to patterns.

To do that, it would be great to pass the uploader instance to fileRenameFunction. Something like
fileRenameFunction: function(file, uploader) { ... }

Do you think you can add that to the plugin?

Seems this 1.1.2 version not on npm
No matching version found for filepond-plugin-file-rename@^1.1.2

filepond-plugin-file-rename
1.1.1 • Public • Published 2 months ago

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

Its not super detrimental and is easy to get around, but just thought I'd point it out. The fileRenameFunction is incorrectly typed as per the latest release of FilePond and FilePond Rename plugin.

Current
fileRenameFunction?: | undefined | null | ((options: { basename: string; extension: string; name: string; }) => string) | Promise<string>

What it probably should be
fileRenameFunction?: | undefined | null | ((options: { basename: string; extension: string; name: string; }) => string | Promise<string>);

Reproduction

I don't think its worth creating a sandbox. Steps to reproduce are:

1. Download latest filepond-plugin-file-rename and filepond
2. Make sure you're using typescript in your project
3. Try to set the fileRenameFunction on the filepond options (this is the example in the docs):
   FilePond.setOptions({ fileRenameFunction: (file) => new Promise((resolve) => { resolve(window.prompt('Enter new filename', file.name)); }), });
4. Voila it doesn't work with typescript

Environment

Typescript

Hi @rikschennink !
This plugin looks promising, but how can we use it if we use multiple inputs : how retrieve the good filepond instance ?
Can we set attribute on the input like the accept plugin ?
Thanks for you work

The file at location types/index.d.ts is throwing typescript errors:

node_modules/filepond-plugin-file-rename/types/index.d.ts:14:11 - error TS1005: ';' expected.
14         ) => string | Promise<string>;
             ~~
node_modules/filepond-plugin-file-rename/types/index.d.ts:14:14 - error TS1131: Property or signature expected.
14         ) => string | Promise<string>;
                ~~~~~~
node_modules/filepond-plugin-file-rename/types/index.d.ts:14:38 - error TS1005: '(' expected.
14         ) => string | Promise<string>;
                                        ~
node_modules/filepond-plugin-file-rename/types/index.d.ts:17:1 - error TS1128: Declaration or statement expected.
17 }%
   ~
node_modules/filepond-plugin-file-rename/types/index.d.ts:17:2 - error TS1109: Expression expected.
17 }%
    ~
node_modules/filepond-plugin-file-rename/types/index.d.ts:17:3 - error TS1109: Expression expected.
17 }%

I am using Typescript 3.9.7

I recommend rewriting the file thusly to remove errors:

declare module "filepond-plugin-file-rename" {
   const FilepondPluginFileRename: FilepondPluginFilepondPluginFileRenameProps;
   export interface FilepondPluginFilepondPluginFileRenameProps {
      /** Enable or disable file renaming */
      allowFileRename: boolean;

      /** A function that receives an objecting containing file information like basename, extension and name. It should return either a string value or a Promise that resolves with a string value. */
      fileRenameFunction: undefined | null | (
         (options: {
              basename: string;
              extension: string;
              name: string;
           }
         ) => string
      ) | Promise<string>;
   }
   export default FilepondPluginFileRename;
}

Note the important changes:

• added parentheses around the function type in fileRenameFunction
• added parameter name options to the first parameter of the function type in fileRenameFunction
• deleted percent sign at end of file

These changes are intended to fix syntax errors; they shouldn't add or remove any functionality as far as I know.

Hello. Thank you x100 for your work on Filepond. It's awesome.

Is there any reason the filepond peerDependency is set to ^1.8.0? Can it be updated to the latest? I can make a PR if you'd like.

Simply initing filePond with fileRenameFunction: function(file) { return file.name } changes how the file appears in formData.

Should look like this (no function set):

The renaming does work UI-wise, the preview box has the correct filename, it's just when starting the actual upload, things break.

Output of pond.getFiles() when function is in use:

And when not in use:

So from quick look, it looks like when renamer is in use, the file object in getfiles is actually a blob and not a File (instance of a blob)?

Any way to fix this?

Hello, I wanted to know where where I can find the source files instead of just dist directory?

Hello, I 'm using image preview plugin, I want to handle delete failure in a way to keep image-preview element. when I do not call load method it will keep the image ,but the remove icon is changed to upload again and remove button is moved to left side of the container,
and then when I click the remove button for the second time(the one on the left side),
it will remove the file.

I would appreciate if some one could tell me how to keep the toolbar like uploadComplete state

Hello,

Is there a possibility to implement a fileRenameFunction that would return a promise, instead of the string filename?

Use case : I open a dialog box for the user to type the desired file name, which introduce asynchronous operations.

Thanks

For example, I have 2 uploaded images. How can I rename them to different names in the code?
Can I pass the values to a file name in a loop?

{% for image in images %}
            pond.addFile('{{image.url}}',{
                options: {
                    file: {
                        name: '{{image.name}}',
                    }
                }
            });
{% endfor %}

Hi 👋🏾,,

So correct me if I'm wrong, but the purpose of the plugin is to allow the user change the name of the file, right? I.e there'll be a UI for them to change the name/label. Trying to set this up on my code but I can't seem to see the UI that the user would use to change the name.

I setup this exact repo (screenshot below) locally, but I still couldn't see the part of the view to set a custom name.

Please can you help?

I was trying to use fileRenameFunction with a promise on angular and i was getting this error:

Type '(file: { basename: string; extension: string; name: string; }) => Promise' is not assignable to type '((options: { basename: string; extension: string; name: string; }) => string) | Promise'.
Type '(file: { basename: string; extension: string; name: string; }) => Promise' is not assignable to type '(options: { basename: string; extension: string; name: string; }) => string'.
Type 'Promise' is not assignable to type 'string'.ts(2322)
ui-upload-order.component.ts(52, 33): Did you mean to call this expression?

so i changed the type of the function to:

// @ts-ignore
import { FilePondOptions } from "filepond";

declare module "filepond" {
    export interface FilePondOptions {
        /** Enable or disable file renaming */
        allowFileRename?: boolean;

        /** A function that receives an objecting containing file information like basename, extension and name. It should return either a string value or a Promise that resolves with a string value. */
        fileRenameFunction?:
        | undefined
        | null
        | ((options: {
            basename: string;
            extension: string;
            name: string;
        }) => string | Promise<string>);
    }
}

instead of:

// @ts-ignore
import { FilePondOptions } from "filepond";

declare module "filepond" {
    export interface FilePondOptions {
        /** Enable or disable file renaming */
        allowFileRename?: boolean;

        /** A function that receives an objecting containing file information like basename, extension and name. It should return either a string value or a Promise that resolves with a string value. */
        fileRenameFunction?:
        | undefined
        | null
        | ((options: {
            basename: string;
            extension: string;
            name: string;
        }) => string)
        | Promise<string>;
    }
}

and worked!

is it mean to be that way?

I chose to have my rename function return a promise, that when fulfilled returns a string with the new name. Which is a great API!
However, I expect that if my promise rejects (for example, because the promise opened a prompt and the user clicked "cancel"), then the file would simply not be added.

Currently promise rejects are ignored.