Example code for uploading files

From the documentation https://chonky.io/docs/2.x/file-actions/built-in-actions i can see that ChonkyActions.UploadFiles just adds a button to the UI and we have to define the actions related to it, but i am finding it a little difficult on how to actually define that actions, can we have some starter/example code for handling the upload button ?

[cybertaxi]

I came across this case too, let me try to help you out with this one. If we look at https://chonky.io/docs/2.x/file-actions/action-handler we understand that we can write our own handler functions based on Chonky action id, ChonkyActions.UploadFiles.id. I’m using TS for Chonky.

First we need to define the default actions (which you should have alrdy done to see the upload button):

    //enable some default actions you want in Chonky
    const setFileActions : FileAction[] = [
        ChonkyActions.UploadFiles
    ];

Then, define the handlers for ChonkyActions.UploadFiles

    //Define the handlers functions for the chonky actions.
    const handleFileAction : FileActionHandler = useCallback(
        (data) => {
            if (data.id === ChonkyActions.OpenFiles.id) {
               //do openfiles
            }

            //upload files
            if(data.id === ChonkyActions.UploadFiles.id) {
                console.log('Start Uploading files here....')
            }
        },
        [setKeyPrefix]
    );

Not sure if this is a neater way of working on it, if there’s feel free to comment on this. I hope it helps you.

[satyajitghana]

For anyone looking for example implementation with drag-n-drop: https://github.com/ProjektTejas/tejas-web/blob/master/components/dataset.tsx