title: Filpond file encode plugin is not working
body: <p>I'm using filepond in wordpress with jetengine forms.</p>
  <p>I have successfully changed the design of input field in the form.</p>
  <p><strong>What i want</strong></p>
  <p>I want to upload the image file to the server when user click on submit button while updating profile. currently it's not uploading.</p>
  <p><strong>What i have tried</strong></p>
  <p><strong>1)</strong> I tried to use the &quot;onprocessfile&quot; method in which i called post request to an action using ajax with formdata. but i did not get any file in action. I created form data in onprocessfile method like this</p>
  <pre><code> var formData = new FormData();
  formData.append(&quot;userfile&quot;, file); //file we are getting in onprocessfile method parameter
  </code></pre>
  <p><strong>2)</strong> Also tried simply send the data because we were using file encode plugin but file did not updated</p>
  <p><strong>3)</strong> Trying to put base64 encoded value to an input so that i can get that input value in form submit action and use that file to upload that manually but I'm not able to use file encode methods</p>
  <p><strong>Problem I'm facing</strong></p>
  <p>I'm using file encode plugin with filepond to encode the uploaded file and send it with default form submit action.
  But I'm not able to set the base64 encoded data in the field or unable to use the getFileEncodeDataURL()/getFileEncodeBase64String() methods as described in</p>
  <p><a href="https://pqina.nl/filepond/docs/api/plugins/file-encode/" rel="nofollow noreferrer">https://pqina.nl/filepond/docs/api/plugins/file-encode/</a></p>
  <p><strong>Here is my code</strong></p>
  <pre><code>const el1 = document.querySelector('[data-form-id=&quot;888&quot;]');
  var targetDiv = el1.getElementsByClassName('jet-engine-file-upload__file');
  
  let profile_pic_url = targetDiv[0].dataset.file
  let profile_pic_id = targetDiv[0].dataset.id
  var host = window.location.protocol + &quot;//&quot; + window.location.host;
  
  FilePond.registerPlugin(
   FilePondPluginFileEncode,
   FilePondPluginFileValidateType,
   FilePondPluginImageExifOrientation,
   FilePondPluginImagePreview,
   FilePondPluginImageCrop,
   FilePondPluginImageResize,
   FilePondPluginImageTransform,
   FilePondPluginFilePoster,
  );
  
  pond = FilePond.create(
    document.querySelector('input#profile_picture'),
  {
  labelIdle: `Drag &amp; Drop your picture or &lt;span class=&quot;filepond--label-action&quot;&gt;Browse&lt;/span&gt;`,
    server: {
        url: host,
        load: '/wp-json/wp/v2/get_image_object?image_id='
    },
  files: [
         {
            source: profile_pic_id,
            options: {
                type: 'local',
                metadata: {
                    poster: profile_pic_url
                }
            }
         }
     ],
   credits:false, 
    imagePreviewHeight: 170,
    imageCropAspectRatio: '1:1',
    imageResizeTargetWidth: 200,
    imageResizeTargetHeight: 200,
    filePosterMaxHeight:200,
    filePosterHeight:200,
    allowFileEncode:true,
    stylePanelLayout: 'compact circle',
    styleLoadIndicatorPosition: 'center bottom',
    styleButtonRemoveItemPosition: 'center bottom'
  });
  pond.onprocessfile = (error, file) =&gt; {
      if (error) {
          console.log('Oh no');
          return;
      }
      console.log(&quot;onprocessfile&quot;)
      console.log(profile_pic_url)
      console.log(profile_pic_id)
      console.log(file.getFileEncodeDataURL()) //it's giving undefiend
  }
  </code></pre>