title: React Filepond Loading Initial Images Not Working
body: <p>I'm having some trouble using Filepond for React. Currently, I want to preload a user's profile picture when the page is loaded. I have tried two different approaches but none have worked yet: </p>
  
  <p>First, I try to use the server load option of Filepond like so: </p>
  
  <pre><code>&lt;FilePond
     ref={pond}
     ... other props here
     files={[
     {
       source: this.props.user.id,
       options: {
       type: 'local'
     }
     }
     ]}
     server={{
     load: (userId, load) =&gt; {
     fetch(fetchDomain + "/profiles/" + userId)
       .then(res =&gt; res.blob())
       .then(blob =&gt; {
          console.log('blob is: ', blob)
          return load
       })
     }
     }}
  /&gt;
  </code></pre>
  
  <p>I fetch from my express backend which is running on the same domain and returns an s3 image URL. This leads to an infinite loading situation and a picture is never loaded. I kept making small changes to this trying to fix it, but was never able to get it to work. At some point when I was messing with the code it would finish loading, but the image would be gray/unavailable with no error messages. </p>
  
  <p>Another approach I took was simply setting Files to an image URL and this didn't work either. Same result, a greyed out image that I can clear it by clicking the remove item button. I did notice, however, that if that URL was a base64 url it would actually load the image properly. </p>
  
  <p>I've been debugging this for a few hours already. Is there something I am missing here? </p>
  
  <p>I'm not sure if it's relevant, but the setup at the top of my file looks like:</p>
  
  <pre><code>import 'filepond/dist/filepond.min.css';
  import CropperEditor from './Cropper';
  import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
  import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
  import FilePondPluginImagePreview from "filepond-plugin-image-preview";
  import FilePondPluginImageCrop from "filepond-plugin-image-crop";
  import FilePondPluginImageResize from "filepond-plugin-image-resize";
  import FilePondPluginImageTransform from "filepond-plugin-image-transform";
  import FilePondPluginImageEdit from "filepond-plugin-image-edit";
  import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
  const fetchDomain = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_FETCH_DOMAIN_PROD : process.env.REACT_APP_FETCH_DOMAIN_DEV;
  
  // Register the plugins for filepond
  registerPlugin(
    FilePondPluginFileValidateType,
    FilePondPluginImageExifOrientation,
    FilePondPluginImagePreview,
    FilePondPluginImageCrop,
    FilePondPluginImageResize,
    FilePondPluginImageTransform,
    FilePondPluginImageEdit,
  );
  
  const pond = React.createRef();
  
  </code></pre>
  
  <p>Here is a picture of what the component looks like when loading after I got rid of all the plugins apart from FilePondPluginImagePreview and use the first method: </p>
  
  <p><a href="https://i.stack.imgur.com/XP7hK.png" rel="nofollow noreferrer">It says undefined...</a></p>
  
  <p>After further reading of the documentation I'm now confused about whether I should be loading or fetching. </p>