Skip to content

Upload Field

Overview

The upload field type allows users to upload files to your application. It is especially useful for images, documents, and other media. This field type offers various configuration options, such as selecting a media library, enabling preview functionality, and customizing button labels, to provide a user-friendly file upload experience.

Field Configuration

A simple implementation of the upload field type:

php
array(
    'id'    => 'upload_key',
    'type'  => 'upload',
    'title' => 'Upload',
),

Specific Parameters

ParameterTypeDefault ValueDescription
libraryarray|stringallSpecifies the media library to restrict uploads (e.g., image, video).
previewbooleanfalseEnables a preview of the uploaded file (commonly used for images).
button_titlestring-Custom text for the upload button.
remove_titlestring-Custom text for the remove file button.

General Parameters

ParameterTypeDefaultDescription
idstring-Unique identifier for the field.
typestring-Defines the field type.
titlestring-The title displayed for the field.
subtitlestring-The text displayed under the title.
classstring-Field additional class.
data_typestringserializeDefines how data is stored (e.g., serialize).
namestring-Custom name for the field.
placeholderstringNot selectedPlaceholder text for the input.
attributesarrayarray()Custom HTML attributes.
beforestring-Content to display before the field.
afterstring-Content to display after the field.
descriptionstring-A detailed description of the field.
descstring-A short description, used if description is not set.
helpstring-Additional helper text for guidance. Usually show on the top right corner of the field.
errorstring-Error message to display when validation fails.
dependenciesarray-Show/Hide a field base on another field value.

Example Usages

Enhanced Upload Field for Images

php
array(
    'id'              => 'upload_key',
    'type'            => 'upload',
    'title'           => 'Upload',
    'library'         => 'image',
    'preview'         => true,
    'placeholder'     => 'Upload from here...',
    'button_title'    => 'Add Image',
    'remove_title'    => 'Remove Image',
),

Notes

  • The library parameter is particularly useful when you want to restrict file uploads to a certain type (e.g., images).
  • Enabling preview will typically display a thumbnail of the uploaded file, and you can adjust its size using preview_width and preview_height.
  • Customizing button_title and remove_title allows you to tailor the user interface to better match your application's design.