Как запустить удаление файла с помощью FilePond

Question

У меня есть FilePond (через React), настроенный на загрузку нескольких файлов, получение этих файлов на сервере, их сохранение и правильное отображение при повторном посещении страницы.

let server = {
  url: '/mypath',
  process: '/mypath',
  revert: '/mypath'
};

<FilePond
  server={server}
  allowMultiple={true}
  allowRevert={true}
  files={current_files}
/>

Используя бэкэнд Python, это прекрасно работает для загрузки:

if request.method == "POST":
    # handle request.FILES.get("filepond")

Теперь я хочу реализовать DELETE, поэтому я добавляю allowRemove={true} к экземпляру FilePond и revert: /path к server конфигурации. Я ожидаю, что когда пользователь нажмет X, FilePond отправит запрос DELETE. Но ничего не происходит - пользователь, нажимающий X, вообще не отправляет запрос зарегистрированной конечной точке. Я нашел, что могу добавить:

onremovefile={(file) => handleRemove(file)}

и если я сделаю handleRemove() Реагировать на функцию, она вызывается с file объект. Но это кажется хакерским - разве нажатие X не должно автоматически связываться с зарегистрированной конечной точкой?

Должен ли я отправлять УДАЛИТЬ вручную из моего handleRemove() функция, или я что-то упустил в моей конфигурации? Документы подразумевают, что "возврат" действий вызывает УДАЛИТЬ, когда revert определяется на объекте сервера.

Answer 1

Попробуйте хук useRef .

В этом примере файл успешно загружен и сразу же будет удален.

это должно работать в вашем случае.

      const filePondRef = useRef(null)
<FilePond ref={filePondRef} onprocessfile={handleOnProcessFile}/>

затем внутри вашего обработчика onprocessfile

      const handleOnProcessFile = (error, file) => {
  if (error) {
    return;
  }

  filePondRef.current.removeFile(file);
};

Answer 2

<FilePond server={'./api'}>

Когда FilePond хочет загрузить файл, он отправляет POST запросить ./api

Когда FilePond хочет восстановить загрузку файла, он отправляет DELETE запросить ./api

allowRemove не существует (возможно, вы хотели написать allowRevert?).

Чтобы отправить запрос на возврат в другую конечную точку, вы можете передать другой URL-адрес revert собственность server объект.

<FilePond server={{ url:'./api', revert:'/revert' }>

Теперь FilePond вызывает ./api загрузить файл и ./api/revert вернуть файл.

Answer 3

Я долго искал это, но я придумал ручной способ удаления элемента списка после успешного обновления.

 onload: (response) => {
          setTimeout(() => {
                $("li").remove("[data-filepond-item-state=processing-complete]");
             }, 1500);

       },