Skip to main content

File Upload Widget

The File Upload widget allows users to upload one or multiple files to your application with advanced configuration options for file validation, storage, and user experience.

Overview​

The File Upload widget provides a robust file upload interface with support for:

  • Multiple file uploads
  • File type validation
  • File size limitations
  • Drag and drop functionality
  • Cloud storage integration (AWS S3)
  • Custom styling and validation
File Upload Widget

Basic Configuration​

Global Settings​

Name​

  • Field: Name
  • Description: Display name for the widget
  • Type: Text input
  • Required: Yes

Variable/Model​

  • Field: Variable/Model
  • Description: The data model property that will store the uploaded files array
  • Type: Text input
  • Required: Yes
  • Example: uploadedFiles
File Upload Global Settings

Upload Configuration​

File Limit​

  • Field: Limit
  • Description: Maximum number of files that can be uploaded
  • Type: Number input
  • Default: No limit
  • Example: 5 (allows up to 5 files)

File Types​

  • Field: File types
  • Description: Acceptable file MIME types
  • Type: Text input
  • Format: Comma-separated MIME types
  • Examples:
    • image/* (all image types)
    • image/jpeg,image/png,image/gif (specific image types)
    • application/pdf (PDF files only)
    • image/*,application/pdf (images and PDFs)
  • Reference: MDN MIME Types

File Size​

  • Field: File size
  • Description: Maximum file size allowed per file
  • Type: Number input
  • Unit: Bytes
  • Example: 26214400 (25MB in bytes)
  • Note: Server limit is 25MB by default

Upload Interface​

Drag and Drop​

  • Field: Drag'n Drop
  • Description: Enable drag and drop file upload interface
  • Type: Toggle switch
  • Default: Disabled
  • When Enabled: Shows a drop zone with upload icon
  • When Disabled: Shows a button for file selection

Button Text​

  • Field: Button
  • Description: Text displayed on the upload button
  • Type: Text input
  • Default: "Choose Files"
  • Example: "Upload Images"

Tip Text​

  • Field: Tip
  • Description: Helper text displayed below the upload area
  • Type: Text input
  • Example: "Supported formats: JPG, PNG, PDF. Max size: 25MB"

AWS S3 Storage​

  • Field: Store in S3
  • Description: Store uploaded files in AWS S3 bucket instead of local storage
  • Type: Toggle switch
  • Default: Disabled
  • Requirements: S3 bucket must be configured in your account
  • Note: This will be the default option in future releases

Public File Access​

  • Field: Public file
  • Description: Make uploaded files publicly accessible
  • Type: Toggle switch
  • Default: Disabled
  • Effect: Files can be accessed without authentication
File Upload Configuration

Validation and Rules​

Built-in Validation​

The widget automatically validates:

  • File type against accepted MIME types
  • File size against maximum size limit
  • Number of files against the limit

Custom Validation Rules​

You can add custom validation rules in the Rules section:

  • Required: Make the field mandatory
  • Custom Rules: Add JavaScript validation functions

Screen-based Validation​

Configure widget behavior per screen in the Validation section:

  • Available: Show/hide widget on specific screens
  • Visible: Control visibility with conditions
  • Required: Make field required on specific screens
  • Disable: Disable widget on specific screens
File Upload Validation Rules

Styling and Layout​

Basic Styling​

  • Width: Set widget width (CSS units)
  • Class: Add custom CSS classes
  • Dynamic Classes: Set classes based on conditions

Layout Options​

  • Layout: Choose between block or inline display
  • Border: Enable/disable border around widget
File Upload Styling

Events and Actions​

On Click Event​

  • Field: On click
  • Description: JavaScript function executed when files are uploaded/removed
  • Context: Access uploaded files via the model variable
  • Available Variables:
    • SF_input: Object containing file information
    • SF_currentIndex: Index in loop contexts
File Upload Actions

Usage Examples​

Basic File Upload​

File Upload Basic

Document Upload with Multiple Files​

File Upload Multiple

S3 Storage Configuration​

File Upload Storage

Advanced Configuration​

Conditional Visibility​

Set the widget to show/hide based on other form values:

File Upload Advanced Configuration

Error Handling​

Common Error Scenarios​

  1. File Type Not Accepted: "Type file not acceptable!"
  2. File Too Large: "File size can not exceed [maxSize] Bytes!"
  3. Too Many Files: "Limit is [limit] files !!"
  4. Server Error: "La taille du fichier à télécharger dépasse la limite de 25Mo."

Best Practices​

  1. File Limits: Set reasonable file limits based on your server capacity
  2. User Feedback: Always provide clear tip text about accepted formats and sizes
  3. Validation: Use both client-side and server-side validation
  4. Storage: Consider using S3 for better performance and scalability
  5. Security: Be cautious with public file settings
  6. UX: Use drag and drop for better user experience
  7. Error Messages: Provide clear, actionable error messages

Integration Notes​

  • Files are automatically uploaded to /api/v1/files/fileupload or /api/v1/files/fileupload-s3
  • The widget integrates with the project's file management system
  • Uploaded files are associated with the current project ID
  • File metadata is stored in the specified model variable as an array