Filepond - File Input Component

FilePond is a JavaScript library that provides smooth drag-and-drop file uploading. By implementing the FilePond Vue component for image and file uploads, Modularous offers users easily implementable, configurable, and versatile file processing functionality.

One to Many Polymorphic Bounding

There is another way to process files/ medias with modularous, that is using file/media libraries. Unlike using file/media library, FilePond with Modularous offers one to many bounding between models and files.

Feature Implementation Road Map

Trait Implementation

TIP

Add HasFileponds and FilepondsTrait to your route's model and repository respectively to implement file processing mechanism.

In order to effectively use the FilePond component and its functionalities on the desired model, you need to add two traits: FilepondsTrait and HasFileponds. The FilepondsTrait should be implemented in the repository, interacting with the module's data storage mechanism and handling the file storage process. Conversely, the HasFileponds trait should be implemented in the model, introducing relationship and casting methods to the parent model to bind files.

INFO

Modularous serves most of the functionalities over traits. See File Storage with Filepond for the full implementation guide.

Route Config - Input Configuration

Route's configuration files allow you to configure input component and its metadata. After adding given traits above, define filepond component to route's input array to use FilePond vue component.

Simple Usage

Type parameter should be given as filepond

  'web_company' => [
          'name' => 'WebCompany',
          'headline' => 'Web Companies',
          'url' => 'web-companies',
          'route_name' => 'web_company',
          'icon' => '$submodule',
          'table_options' => [
              //..code
          ],
          'headers' => [
              //..code
          ],
          'inputs' => [
              //..code
              [
                  'name' => 'avatar',
                  'label' => 'Avatar',
                  'type' => 'filepond',
                  '_rules' => 'sometimes|required|min:3',
              ],
          ],

Advanced options and available props

accepted-file-types

Controls the allowable file types to be uploaded to your model. For an example, Can be defined as file/pdf, image/* to allow all image types and pdf types only. Different types should be separated with comma , .

• Input Type: String
• Default: file/*, image/* (all types of files and image types)

allow-multiple

Configures multiple file uploading functionality allowance.

• Input Type: Boolean
• Variance: true|false|null
• Default: true

max-files

Controls the maximum number of files that can be uploaded.

• Input Type: String|Number|null
• Default: null (unlimited)

allow-drop

Enables or disables the drag and drop functionality.

• Input Type: Boolean
• Variance: true|false|null
• Default: true

allow-browse

Enables or disables the file browser functionality.

• Input Type: Boolean
• Variance: true|false|null
• Default: true

allow-replace

Allow drop to replace a file, only works when allow-multiple is false

• Input Type: Boolean
• Variance: true|false|null
• Default: true

allow-remove

Allow remove a file, or hide and disable the remove button.

• Input Type: Boolean
• Variance: true|false|null
• Default: true

allow-process

Enable or disable the process button.

• Input Type: Boolean
• Variance: true|false|null
• Default: true

allow-image-preview

Configures whether the image preview will be shown.

• Input Type: Boolean
• Variance: true|false|null
• Default: false

drop-on-page

FilePond will catch all files dropped on the webpage

• Input Type: Boolean
• Variance: true|false|null
• Default: false

drop-on-element

Require drop on the FilePond element itself to catch the file.

• Input Type: Boolean
• Variance: true|false|null
• Default: true

drop-validation

When enabled, files are validated before they are dropped. A file is not added when it's invalid.

• Input Type: Boolean
• Variance: true|false|null
• Default: false