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, Jun 03 '19 at 08:49
I tried doing that, 'pond.removeFile' inside the FilePond:addfile event, but pond object instance is not available there. — user9020594, Jun 03 '19 at 13:26
`$('.upload-file').filepond('removeFile');` Something like this should work if you're using the jQuery adapter. — Rik, Jun 03 '19 at 13:57
Adding to @Rik's comment: for multiple files, use `$('.upload-file').filepond('removeFiles');` -- note plural `removeFiles` — Alex, Mar 30 '23 at 15:28

score 2 · Answer 1 · answered Jan 09 '20 at 16:00

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 09 '20 at 16:00

wauxhall

46
5

score 0 · Answer 2 · answered Jun 24 '19 at 17:58

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 '19 at 17:58

eliprodigy

600
6
8

score 0 · Answer 3 · answered Oct 23 '21 at 09:12

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>

score 0 · Answer 4 · edited Mar 09 '22 at 21:13

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.

Reset FilePond Input in Javascript

4 Answers4