CODEWITHSUNDEEP
javascriptjqueryfilepond
user3548161
user3548161

Reputation: 119

filepond Jquery get file name that was dragged an dropped

I am using jquery filepond image uploader plugin that turns a file upload into a drag and drop zone.

                        <input  type="file" class="filepond" id="filepond"  
 name="filepond"/>

Below is the script that initialized file pond 

<script>
    $(function(){

        // First register any plugins
        $.fn.filepond.registerPlugin(FilePondPluginImagePreview);

        // Turn input element into a pond
      $('.filepond').filepond();


        // Listen for addfile event
        $('.filepond').on('FilePond:addfile', function(e) {
            console.log('file added event', e);


        });


    });
    </script>

I have a form that i plan to submit without using ajax it's a dircect form submit .

I just wanted to know how can i get the name of the file that was dragged and dropped so i can allocate the file name value to another hidden input , so that i am able to submit the entire form directly via form submit.

I have console logged the event once the file is dropped console.log('file added event', e); .

Please help me get the file name in file pond .

Upvotes: 1

Views: 4398

Answers (1)

charlfields
charlfields

Reputation: 469

According to the documentation you can use a FilePond instace event FilePond:addfile to know when a file has been dragged and dropped.

Inside the event then you can get the file and then you just get the name with the filename property.

Here is an example with plain javascript:

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);    
const pondBox = document.querySelector('.filepond--root');
pondBox.addEventListener('FilePond:addfile', e => {
        console.log('file added event', e.detail);
        var fileName = pond.getFile().filename;
    });

Upvotes: 4

Related Questions