filepond: Infinite "Uploading" message when trying to LOAD a file from server

Hello,

Summary

I am working with Angular + Node/Express project. I am using filePond to upload images to the server as a part of data form (e.g. registration form with photo). I also added plugin filepond-plugin-image-preview. Part of the task is to be able to edit previously uploaded image using code from Server section of filepond documentation.

At the moment I can download the file from server (temporary solution is to get it from HD) which is displayed in filepond control on the page. I can see the picture but 100% sign does not appear. I see infinite “Uploading” message. I have no idea how to push things forward:

I did a bit of debugging and found, that in the below case status is never set to ItemStatus.PROCESSING_COMPLETE. I found the section:

// file received
          if (origin === FileOrigin$1.LIMBO && state.serverFileReference) {
            setStatus(ItemStatus.PROCESSING_COMPLETE);
          } else {
            setStatus(ItemStatus.IDLE);
          }

But my case is not LIMBO but LOCAL.

The other one is:

      processor.on('load-perceived', function(serverFileReference) {
        // no longer required
        state.activeProcessor = null;

        // need this id to be able to rever the upload
        state.serverFileReference = serverFileReference;

        setStatus(ItemStatus.PROCESSING_COMPLETE);
        fire('process-complete', serverFileReference);
      });

But this one is neither called.

I also saw that the code:

      var progressFn = function progressFn() {
        // we've not yet started the real download, stop here
        // the request might not go through, for instance, there might be some server trouble
        // if state.progress is null, the server does not allow computing progress and we show the spinner instead
        if (state.duration === 0 || state.progress === null) {
          return;
        }
        // as we're now processing, fire the progress event
        api.fire('progress', api.getProgress());
      };

never passes the first if condition, therefore api.fire('progress', ... is never called.

How to reproduce

The code to reproduce:

Client code:

pondFiles = [
    {
        source: 'file-name',
        options: {
            type: 'local'
        }
    }
]  

pondOptions = {
    class: 'my-filepond',
    multiple: true,
    labelIdle: 'Drop files here',
    acceptedFileTypes: 'image/jpeg, image/png',
    server: {
        url: "https://localhost:1444",
        process: "./upload",
        load: 
        (uniqueFileId, load, error, progress, abort, headers) => {
            // Should request a file object from the server here ...

            const req = new XMLHttpRequest();
            req.onprogress = (e) => {
                progress(true, e.loaded, e.total);
            }
            
            req.onload = function() {
                if (req.status >= 200 && req.status < 300) {
                    // the load method accepts either a string (id) or an object
                    progress(true, 1,1);
                    load(req.response);
                }
                else {
                    // Can call the error method if something is wrong, should exit after
                    error('oh no');
                }
            } 
            
            req.open("GET", "https://localhost:1444/load/tst.jpg", true);
            req.responseType = "blob";
            req.send();
            
            // Should expose an abort method so the request can be cancelled
            return {
                abort: () => {
                        // User tapped cancel, abort our ongoing actions here
                        // Let FilePond know the request has been cancelled
                        abort();
                   }
             };
        }
    },
    allowImagePreview:	true,
    imagePreviewMinHeight: 128,
    imagePreviewMaxHeight: 256
  }

and on template:

<file-pond #myPond 
                [options]="pondOptions" 
                [files]="pondFiles"
                (oninit)="pondHandleInit()"
                (onaddfile)="pondHandleAddFile($event)"
                >
</file-pond>

Server code (exposed at httsp://localhost:1444):

app.get('/load/:ff', function(req, res) {

    console.log("APP.LOAD");

    var __dirname = './upload';
    var options = {
        root: __dirname + '', //'/public/',
        dotfiles: 'deny',
        headers: {
            'x-timestamp': Date.now(),
            'x-sent': true,
            'Content-Disposition': 'inline',
            'filename': "my-file.jpg"
        }
      };
      var fileName = req.params.name;
      // the real file on HD (in relative path __dirname)
      fileName = 'filepond-1540716142035.jpeg';
      res.sendFile(fileName, options, function (err) {
        if (err) {
          next(err);
        } else {
          console.log('Sent:', fileName);
        }
      });
});

Expected behaviour

I would like to see the picture with progress indicator set to 100%.

Additional information

Environment	Version
OS	Windows win32 x64
Device	PC.
Browser	Chrome 70.0.3538.77 (Official version) (64-bit) and Firefox 63.0 (64 bit)
Angular CLI	6.1.5
Node	8.11.3