Reset FilePond Input in Javascript

Question

I have implemented Filepond uploaded in my page. When the user selects a file, I set that file on a html canvas for edits. However when the user wants to upload another file, filepond input retains last uploaded file.

I have tried FilePond.destroy(inputElement); after the file is successfully set on the canvas in the FilePond:addfile event.

 $('.upload-file').filepond();

$.fn.filepond.registerPlugin(
    FilePondPluginFileValidateType,
    FilePondPluginFileValidateSize,
    FilePondPluginImageResize,
    FilePondPluginImageExifOrientation,
    FilePondPluginImagePreview,
    FilePondPluginImageTransform,
    FilePondPluginImageCrop,
    FilePondPluginImageValidateSize,
);


     FilePond.setOptions({
      labelIdle: 'Drag & Drop your file or <span class="filepond--label- 
       action"> Browse </span>',
    maxFiles: 1,
    allowDrop: true,
    allowMultiple: false,
    dropOnPage: true, //for page to work, element has to be false https://github.com/pqina/filepond/issues/113
    dropOnElement: false,
    labelTapToCancel: '', //we dont want to allow cancel
    labelTapToUndo: '',
    maxFileSize: intFileSizeInMB,
    allowReplace: true,
    allowRevert: false,
    instantUpload: false 
});



const pond = document.querySelector('.filepond--root');

pond.addEventListener('FilePond:addfile', e => {

    console.log('File added', e.detail);

    if (e.detail) {
        if (e.detail.file && e.detail.file.file.name) {
            SetFileOnCanvas(e.detail.file.file, e.detail.file.file.name);

            const inputElement = document.querySelector('input[type="file"]');
            FilePond.destroy(inputElement); 
        }
    }
});



pond.addEventListener('FilePond:processfile', e => {
    console.log('Process File COMPLETE', e.detail);
});

After a file is uploaded and set to Canvas the file upload input should be cleared and ready for another upload.

Can you not call removeFile? To remove the item when the upload is done? — Rik
– Rik, Commented Jun 3, 2019 at 8:49
I tried doing that, 'pond.removeFile' inside the FilePond:addfile event, but pond object instance is not available there. — user9020594
– user9020594, Commented Jun 3, 2019 at 13:26
$('.upload-file').filepond('removeFile'); Something like this should work if you're using the jQuery adapter. — Rik
– Rik, Commented Jun 3, 2019 at 13:57
Adding to @Rik's comment: for multiple files, use $('.upload-file').filepond('removeFiles'); -- note plural removeFiles — Alex
– Alex, Commented Mar 30, 2023 at 15:28

wauxhall · Accepted Answer · 2020-01-09 16:00:15Z

2

Working solution

var pond_ids = [];

if (pond.getFiles().length != 0) {  // "pond" is an object, created by FilePond.create 
    pond.getFiles().forEach(function(file) {
        pond_ids.push(file.id);
    });
}

pond.removeFiles(pond_ids);

answered Jan 9, 2020 at 16:00

wauxhall

466 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eliprodigy · Accepted Answer · 2019-06-24 17:58:04Z

0

After upload file "Complete function"

you can do like this (simple example):

if (filePond.getFiles().length != 0) {
    for (var i = 0; i <= filePond.getFiles().length - 1; i++) {
      filePond.removeFile(filePond.getFiles()[0].id)
    }
  }

answered Jun 24, 2019 at 17:58

eliprodigy

5986 silver badges8 bronze badges

Comments

Ali Amini · Accepted Answer · 2021-10-23 09:12:04Z

0

I know its too late but you can use

let filePond = FilePond.find(document.getElementById(filePondElementId));
    if (filePond != null) {
    //this will remove all files
        filePond.removeFiles();
    }

<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

answered Oct 23, 2021 at 9:12

Ali Amini

4161 gold badge4 silver badges15 bronze badges

Comments

Dharman · Accepted Answer · 2022-03-09 21:13:35Z

0

Assuming that you create your filepond instance through function create_pondProfile and your input has class filepond, in you filepond config in server block do like this:

server: {
url: '',
process: {
    url: '/path/to/upload/',
    headers: {'X-CSRF-TOKEN': csrf},
    ondata: (formData) => {
        return formData;
    },
    onload: (response) => {
        FilePond.destroy(document.querySelector('.filepond'));
        create_pondProfile('.filepond');
    }
},
...
...
}

It will destroy current instance of filepond and creates new one after upload.

edited Mar 9, 2022 at 21:13

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 9, 2022 at 21:07

Sohrab

1311 silver badge10 bronze badges

Collectives™ on Stack Overflow

Reset FilePond Input in Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related