Filepond: File upload to external image server

[pathvine]

Hi @rikschennink,

Very Sorry to bother you again, I am trying to implement custom upload to my image server.
My image server accepts the image name, dimensions, dataURL via POST API and returns a unique server file name for the uploaded image. I have attempted to implement the handler function but no success, is there an example that you can show us on how this works?

I have seen someone asked if FilePond would work with Amazon S3. It seems Amazon S3 and other custom image servers do not support the serverId feature in FilePond. Does this mean other operations such as revert, abort, restore are impossible with these servers? Thanks!

[rikschennink]

Hi @pathvine!

No worries.

The serverId is a unique identifier returned by the server, it can be the filename the file id, as long as it identifies the file to the server. In your situation, this value _"returns a unique server file name"_ should do it, FilePond remembers it and then automatically passes it to the revert or restore method. You can then override those methods and do with it as you please.

I'll set up a custom XMLHttpRequest example to illustrate this better.

[rikschennink]

@pathvine Okay, see the code below.

• I've disabled fetch and load by setting them to null ( to show this is possible, you can of course implement these methods )
• Instead of an XMLHttpRequest I've used a timeout as. It just waits a couple milliseconds and then calls the load ( we're done ) method. This would normally probably be in the onload callback of the XMLHttpRequest instance. But, you could also be storing files in localStorage or database so you're free to send the files wherever you please.
• progress callback updates the loading indicators.

Let me know if anything is unclear. Because this is a super flexible part of FilePond it is also the most difficult to document. So input is very welcome.

FilePond.setOptions({
    server: {
        // disable fetch by explicitely setting it to null, 
        // if not set to null, FilePond will try to automatically 
        // call the ?fetch= and ?load= endpoints
        fetch: null,
        load: null,

        // define custom process method
        process: (fieldName, file, metadata, load, error, progress, abort) => {

            // Create data object containing the file and the file metadata
            const formData = new FormData();
            formData.append(fieldName, file, file.name);
            formData.append(fieldName, JSON.stringify(metadata));

            // Progress indicator supported, set progress to 25% of 1
            progress(true, .25, 1); 

            // progress(false); // for infinite upload mode

            // Fake completion after 1 second
            const timer = setTimeout(() => {
                load('unique-file-id'); // or { body: 'unique-file-id' }
            }, 1000);

            // Should expose an abort method so the request can be cancelled by the user
            return {
                abort: () => {

                    // abort your request here (we clear timer for demo purposes)
                    clearTimeout(timer);

                    // updates FilePond interface
                    abort();
                }
            };
        },

        restore: (uniqueFileId, load, error, progress, abort, headers) => {

            // Should get the temporary file object from the server
            // ...
            console.log(uniqueFileId);

            // create fake file
            var blob = new File([uniqueFileId], 'test.txt', { type: 'text/plain' });

            // Fake completion after 1 second
            const timer = setTimeout(() => {
                load(blob);
            }, 1000);

            // Should expose an abort method so the request can be cancelled by the user
            return {
                abort: () => {

                    // abort your request here (we clear timer for demo purposes)
                    clearTimeout(timer);

                    // updates FilePond interface
                    abort();
                }
            };
        },

        revert: (uniqueFileId, load, error) => {

            // remove file from server here
            console.log(uniqueFileId);

            // we done
            load();

        }
    }
});

[pathvine]

Hi @rikschennink ,

Thank you for your examples. I have successfully implemented HTTP POST within the process. However, as it is a plain HTTP POST with the data pulled from the Meteor template, it doesn't enjoy the benefit of the image crop plugin. I should mention that since I am using Meteor and information of photos and their dataURL are pre-stored on the Meteor template. I did this to easier manipulate the images after they have been added. Had I used formdata with metadata, the cropping might have been successfully applied as well; I will look into that further.

I have a few notes that may improve the usability of the package; these may conflict with the work flow you have in mind, but these are just something to think about.

• The progress can only be used in the process. Can it be exposed as an individual function that takes the File.id? Can it also have finer control of the state, perhaps through a state parameter? I mention this because it is hard to bring up a forever spinning circle during the upload. The load() seems to also have control over how the progress is being displayed. For example, the file field would not turn green without the load() being called.
• Currently, we can only set and get the plugin functions via the options object when initializing a FilePond instance. The functions from the plugins perhaps better to be exposed for greater flexibility.

[rikschennink]

@pathvine If you pass false to the progress function once, it'll go into infinite loading mode.

progress(false);

To complete upload you need to call the load method. Otherwise, FilePond doesn't know when the upload is finished.

You can alter FilePond options during runtime. If your FilePond instance is set to single file mode you can switch to multiple input mode by setting allowMultiple to true.

myPond.allowMultiple = true;

Processing and load methods are created just before a file is processed or starts to load. So can be altered as well ( changing them while a file is uploading will have no effect on the file ).

[pathvine]

Thanks @rikschennink. Previously I was using body-parser on the image server, and the body-parser does not support multipart/form-data. This caused some incompatibilities with FilePond. I am taking this opportunity to upgrade the image server to accept multipart/form-data as it is faster than base64.

I have set up a basic endpoint on my image server to accept multipart/form-data. It is working fine with FilePond except that the cropping and resizing are not applied before the upload. Can you please advise on how the transform plugin works in FilePond? Thanks!

[rikschennink]

@pathvine Okay, glad to hear it's working!

Will close this issue, can you open a new issue for the transform problem? ( Trying to keep things grouped by subject :) )

[JoaquimLey]

@rikschennink maybe you could add this example to the documentation?

I'm struggling to get this working with Vue (I created an issue in the respective repo).

[rikschennink]

@JoaquimLey good idea, will see if I can do this later this week.

What specific issue are you running into with the server API?

[JoaquimLey]

I will open an issue over there to keep this one scoped and not polluted for people coming in the future ;).
Thanks!