Example code for uploading files

[satyajitghana]

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.

[StarStuff15]

how to define action in js
I'm stuck from two days.

[satyajitghana]

@cybertaxi thanks !

but can we make it drag and drop ? something like a drop zone for file upload ?

[satyajitghana]

@StarStuff15 you mean custom actions ? have you gone through https://chonky.io/docs/2.x/file-actions/custom-actions, it's pretty much explained

[TimboKZ]

Hey @satyajitghana, Chonky doesn't currently provide drop zone functionality, but it should work with any of the existing drop zone React libraries.

[satyajitghana]

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