Filepond input field not attached with formdata while sending

Question

How do I upload a FilePond file field to the server along with other form elements. For example i have a form element that contains input fields, a select field, a textarea and a file input field which is connected to the Filepond plugin.

<form class="uploadform">
    <input type="text" placeholder="type the title of the document you are uploading">
    <textarea class="textarea" placeholder="type anything here"></textarea>
    <input type="file" class="filepond" name="file[]" multiple>
    <button type="button" class="uploadbtn">Upload Document</button>
</form>

But whenever i try to upload the form the file field doesn't upload with it to the server, please help me with this. How do i bind the FilePond input field to my formdata element?

This is my jQuery upload code:

$(".uploadbtn").click(function(){
    var form = document.getElementsByClassName("uploadform")[0] 
    var formdata = new FormData(form)
    $.ajax({
        url: "path/to/php-server-side/request/handler.php",
        data: formdata,
        processData: false,
        contentType: false,
        method:"post"
    }).done(function (response) {...
})

I think you need to add the file encode plugin (this will encode files as base64 strings). Or set the server property on FilePond so it uploads files to the server asynchronously (the filepond input field will now contain the unique file identifiers of the files on the server). See docs for more information: https://pqina.nl/filepond/docs/patterns/plugins/file-encode/ — Rik, Sep 07 '20 at 09:58
I don't want an asynchronous upload, i was trying to upload it manually to the server, but it was not being attached to the post request when the form was submitted. — Paulos Ab, Sep 29 '20 at 10:24

amrezzd · Accepted Answer · 2021-05-20T10:53:35.953

4

You need to append FilePond files manually to the FormData object. FilePond objects has a file property which is the original file blob object. You can go like this:

$(document).ready(function(e){
pond = FilePond.create(
    document.querySelector('#file'), {
        allowMultiple: true,
        instantUpload: false,
        allowProcess: false
    });

$("#uploadform").submit(function (e) {
  e.preventDefault();
  var formdata = new FormData(this);
  // append FilePond files into the form data
  pondFiles = pond.getFiles();
  for (var i = 0; i < pondFiles.length; i++) {
      // append the blob file
      formdata.append('file[]', pondFiles[i].file);
  }

  $.ajax({
    url: "path/to/php-server-side/request/handler.php",
    data: formdata,
    dataType: 'JSON',
    processData: false,
    contentType: false,
    method:"post"
  }).done(function (response) {
    // todo
  });
 
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"/>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<form id="uploadform" enctype="multipart/form-data">
<input type="text" placeholder="type the title of the document you are uploading">
<br>
<textarea class="textarea" placeholder="type anything here"></textarea>
<input id="file" type="file" class="filepond" name="file">
<button type="submit" class="uploadbtn">Upload Document</button>
</form>

With this, you'll get the files as if they where sent by html form.

edited May 20 '21 at 10:53

answered May 18 '21 at 18:10

amrezzd

1,787
15
38

Alright thanks, I later developed a file upload plugin by myself for the project I was working on, appending a blob to FormData is better than base64 encoded strings because the blob will be sent as a Files request and you will be able to retrieve it from the $_files global array as if it was submitted with the html form file input – Paulos Ab May 19 '21 at 10:06
@PaulosAb Sounds interesting. My answer is about getting FilePond file and sending it along with other FormData fields. Does your plugin append FilePond file as a `file` to FormData? – amrezzd May 19 '21 at 10:37
My plugin is a standalone plugin i made it to have no dependencies, i built with 100% vanilla javascript, i didn't built it to make use of file pond, your answer is good and 100% right but what if you can send the file as blob which will be handled by php $_FILES array instead of base64 strings, you can convert the base64 to blob by doing it like so ----- var b64ToBlob = fetch(pond.getFiles()[0].getFileEncodeBase64String()) .then(res => res.blob()) – Paulos Ab May 19 '21 at 12:34
1

@PaulosAb I've updated the answer to use blob instead of base64 :) – amrezzd May 20 '21 at 06:26
@PaulosAb yes I did. – amrezzd May 25 '21 at 20:44
wow great, i'll check it out, thanks so much for taking your time to help me solve the issue, you could suggest it as an improvement to the filepond team or what do you think? – Paulos Ab May 25 '21 at 21:49
@PaulosAb YW. It's actually a filepond feature, but poor documentations lead us to the wrong way. – amrezzd May 26 '21 at 04:34

Filepond input field not attached with formdata while sending

1 Answers1