Блог

Я начал использовать Filepond JS и не понимаю, как вызывать определенные функции. Возможно, это потому, что мои знания ES6 не настолько хороши, или, может быть, я просто переосмысливаю всю эту проблему. Процесс загружает файл в папку tmp. С другой стороны, revert должен удалить загруженный файл из папки tmp.

Проблема: кажется, я не могу отменить загрузку в filepond.

Что я пробовал:

1. Передача POST-запроса с uniqueFileId
2. Передача запроса на удаление с помощью uniqueFileId
3. Передача пустого запроса на УДАЛЕНИЕ

Любая помощь приветствуется.

Мой JS:

 //File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                
            // fieldName is the name of the input field
            // file is the actual file object to send
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', secureUrl("Model/filepond/index.php"));

            // Should call the progress method to update the progress to 100% before calling load
            // Setting computable to false switches the loading indicator to infinite mode
            request.upload.onprogress = (e) => {
               progress(e.lengthComputable, e.loaded, e.total);
            };

            // Should call the load method when done and pass the returned server file id
            // this server file id is then used later on when reverting or restoring a file
            // so your server knows which file to return without exposing that info to the client
            request.onload = function() {
               if (request.status >= 200 amp;amp; request.status < 300) {
                  // the load method accepts either a string (id) or an object
                  load(request.responseText);
               }
               else {
                   // Can call the error method if something is wrong, should exit after
                   error('oh no');
               }
            };

            request.send(formData);

            // Should expose an abort method so the request can be cancelled
            return {
               abort: () => {
                  // This function is entered if the user has tapped the cancel button
                  request.abort();

                  // Let FilePond know the request has been cancelled
                  abort();
               }
            };
         },
         revert: (uniqueFileId, load, error) => {
            
            const formData = new FormData();
            formData.append(uniqueFileId);

            const request = new XMLHttpRequest();
            request.open('DELETE', secureUrl("Model/filepond-server-php-master/index.php"));

            request.send(formData);

            // Can call the error method if something is wrong, should exit after
            error('oh my goodness');

            // Should call the load method when done, no parameters required
            load();
          }
        }
      }
    );
 

Я посмотрел в FilePond.class.php:

 // revert existing transfer
if ($request_method === 'DELETE') {
   return call_user_func($routes['REVERT_FILE_TRANSFER'], file_get_contents('php://input'));
}
 

Я обнаружил, что сервер можно упростить до следующего, что позволяет нам отменить загрузку. Я не уверен, почему другой способ не работал, но, похоже, работает просто отлично.

Мой JS упрощен:

 //File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         url: secureUrl("Model/filepond/index.php"),
         process: './process',
         revert: './revert',
         restore: './restore/',
         load: './load/',
         fetch: null
       }
   }
);