Filepond is a plugin that brings drag-and-drop file uploading smoothly. Drag a file inside the element or choose a file from your computer, have the URLs in preview in the element statuses and also upload the files you want to the "File manager" of your application.

➡️ Feel free to look at the example at the link: https://acampamentonocode-plugins.bubbleapps.io/version-test/filepond

➡️ Feel free to look at the editor at the link: https://bubble.io/page?type=page&name=filepond&id=acampamentonocode-plugins&tab=tabs-1


➡️ Instructions

To start using the "Filepond" plugin is very simple and practical. Follow the steps below and everything will work perfectly.

    1 - First create a "Shape" or "Group" element on your page, define the width and height you want and at the end define an "ID Attribute" value for it.

    2 - Now place the "Filepond" element on your page and in your settings window set some values ​​for it:

        Element ID: Set here the value of the "ID Attribute" defined in the "Shape" or "Group" element provided in step 1.

        Placeholder: Define here the phrase that should appear to the user when the element is loaded. Something else to let him know that he can drag a file into the field or click to add a file to the field.

        Language: Define here the language that "Filepond" should be processed. (Default: en-en)

        Preview Max Height: Set here the maximum height size, in pixels, that the preview files can reach. (Default: 240)

        Max File Size (MB): Set here the maximum size of the files that can be placed inside the "Filepond". (Default: 3)

        Max Files: Define here the maximum number of files that can be placed inside the "Filepond". (Default: 3)

        Instant Upload: Define here if the upload of the file inserted in "Filepond" should start automatically or if it should be triggered. (Default: false)

    3 - After configuring the "Filepond" element, everything will be ready to be used!


➡️ Status

The element generates 2 statuses that you can use for your use case, they are:

images_element_urls: This status always stores the URLs (Base64) of the files that were placed in the "Filepond" element. The files when inserted in the element do not automatically upload to your "File Manager", this happens only if you set the value of the field "Instant Upload" to true.

image_upload_url: This status stores the URL of the image that has just been processed for upload in your "File Manager".


➡️ Events

The element has an event called "Filepond (Upload Complete)". This event can be called in your Workflow and it fires every time a file upload completes. Use this event to store the file's URL in your database or for any situation you need.

Below is an example of how the "Filepond" plugin works. The example below displays a repeater group of files inserted in the "Filepond" element, in addition to storing the URLs that the user clicks to perform the upload.