Сбросить ввод FilePond в Javascript

Я реализовал Filepond, загруженный на мою страницу. Когда пользователь выбирает файл, я помещаю этот файл на холст HTML для редактирования. Однако, когда пользователь хочет загрузить другой файл, ввод файла отклика сохраняет последний загруженный файл.

Я пробовал FilePond.destroy(inputElement); после того, как файл был успешно установлен на холсте в событии FilePond:addfile.

 $('.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);
});

После того, как файл загружен и установлен на Canvas, вход для загрузки файла должен быть очищен и готов к следующей загрузке.


javascript jquery file-upload filepond
person user9020594    schedule 01.06.2019    source источник
comment
Вы не можете позвонить removeFile? Чтобы удалить элемент после завершения загрузки?   -  person Rik    schedule 03.06.2019
comment
Я попытался сделать это, «pond.removeFile» внутри события FilePond: addfile, но экземпляр объекта pond там недоступен.   -  person user9020594    schedule 03.06.2019
comment
$('.upload-file').filepond('removeFile'); Примерно так должно работать, если вы используете адаптер jQuery.   -  person Rik    schedule 03.06.2019

Ответы (2)


arrow_upward
2
arrow_downward

Рабочий раствор

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);
person Natural Story    schedule 09.01.2020

arrow_upward
0
arrow_downward

После загрузки файла "Полная функция"

вы можете сделать это (простой пример):

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