CODEWITHSUNDEEP
javascriptuploadmetadatafilepond
nevtu
nevtu

Reputation: 13

filepond post image with metadata

i'm writing a upload page using filepond. The problem i'm facing is to get it to work like i want. I need to get the metadata from the input and post it with additional formdata

I can allready post the image and additional formdata. However I also want the metadata from the input. If I use onaddfile and log the metadata it works and shows additional="1"

<input type="file" id="img" name="img" data-file-metadata-additional="1">

pond=FilePond.create(document.querySelector('#img'),{
  server: {
  process: {
   url: 'opbouw/model/post/addimg.php',
    ondata: (formData) => {
     // > POST META DATA
     formData.append('userid', '2');
     formData.append('usercom', '1');
    return formData;
    }
   }
  },
});

pond.onaddfile = (err, item) => {
  console.log(item);
   const metadata = item.getMetadata();
   console.log(metadata);
 }

So no clue how to post the metadata

Upvotes: 0

Views: 2303

Answers (1)

Rik
Rik

Reputation: 3596

If you're not going to write a custom server.process method then you're going to have to "remember" which metadata belongs to which file.

Something like this:

<input type="file" id="img" name="img" data-file-metadata-additional="1">

<script>
let pondMetadata;

const pond = FilePond.create(document.querySelector('#img'), {
  server: {
    process: {
      url: 'opbouw/model/post/addimg.php',
      ondata: (formData) => {

        // add metadata
        formData.append('usermeta', JSON.stringify(pondMetadata));

        formData.append('userid', '2');
        formData.append('usercom', '1');
        return formData;
      }
    }
  },
  onaddfile: (err, item) => {
    pondMetadata = item.getMetadata();
  }
});
</script>

Upvotes: 2

Related Questions