FM BetterForms
BF Editorfmbetterforms.com
master
master
  • Introduction
  • 🏆Features
  • Getting Started
    • Welcome to FM BetterForms!
    • System Overview
    • Quick Tour of the BetterForms IDE
    • Phase 1: Setting Up Your Foundation
      • 1.1 Configure FileMaker Server
      • 1.2 Install BetterForms Helper File
      • 1.3 Add Your Server to BetterForms (IDE)
    • Phase 2: Building Your First Application
      • 2.1 Create an App (Site) in the IDE
      • 2.2 Create Your First Page (Intro to Page Builder)
      • 2.3 Understanding & Managing Environments (IDE)
      • 2.4 Adding Elements to Your Page
      • 2.5 Understanding Validation
      • 2.6 Adding Actions to Your Page
      • 2.7 Creating Your First List View
      • 2.8 Understanding Page Data Flow
      • 2.9 Creating Your First Hook
      • 2.10 Working with Data Tables (Coming Soon)
    • Phase 3: Understanding Core BetterForms Concepts
      • 3.1 Introduction to Hooks (and where to find them in the IDE)
      • 3.2 Running Your First Hook (Practical Example)
      • 3.3 Introduction to Actions & Action Scripts (IDE Context)
      • 3.4 Understanding the Data Model (and Page Data Model UI)
    • Phase 4: Common Customizations & Expanding Your App
      • 4.1 Adding & Configuring Buttons (Page Builder)
      • 4.2 Implementing Page Navigation (Actions & Site Navigation UI)
      • 4.3 Displaying Data in Tables (Page Builder & Element Config)
      • 4.4 Basic App Styling (Site Styling UI)
    • Phase 5: Mastering the BetterForms Environment & Advancing Your Skills
      • 5.1 Understanding & Managing Environments (In-Depth)
      • 5.2 Deep Dive: Page Configuration & Settings
        • Navigating the Page Builder Interface
        • Working with Page-Level Action Scripts
        • Configuring the Page Data Model
        • Page Integration Settings Explained
        • Managing Page Info & Other Settings
      • 5.3 Working with Global Scripts
      • 5.4 Managing App (Site) Settings & Navigation
      • 5.5 Exploring Further: What to Learn Next
    • Support & Resources
      • Getting Help
      • Learning JSON
  • Reference
    • Site Settings
      • Navigation
      • App Model
      • DOM Header Insertions
      • Global Named Actions
      • Site Structure
      • Slots / Code Injection
    • Page Settings
      • Data Model
      • Card / Window Modals
      • Validation
        • Custom Validators
      • Misc Page Settings
    • Page Elements
      • Copy of Site Structure
      • BetterForms Elements
        • Checkbox
        • Checklist
        • Cleave.js Input Masking
        • DateTime Picker
        • Google Address Autocomplete
        • Image Display Element
        • Input
        • Masked Input
        • Range Slider (noUiSlider)
        • Radios
        • Select
        • Advanced Select (selectEx)
        • TextArea
      • Common
        • Input
        • Button
        • Data Table
        • HTML
      • Grouping Elements
        • Tabs
        • Panel
        • accordion
        • accordion2
        • listrows
      • Uploading Files
        • dropzone
        • dropzone to S3
        • uploadCare
        • 🏗️Uppy File Upload Widget Integration with AWS S3
      • Misc Elements
        • Plain Text / Code Editor
        • signature
        • fullCalendar
        • rangeSlider
      • Payment Gateways
        • Authorize.net
        • PayPal
        • Stripe
      • Adding Custom Page Elements
    • Actions Processor
      • Named Actions (Action Scripts)
      • Actions
        • runUtilityHook
        • path
        • debounce
        • throttle
        • showAlert
        • showModal / hideModal
        • function
        • clipboard
        • cookie
        • setFocus
        • scrollTo
        • wait
        • emit
        • validate
        • channelJoinAnon
        • channelLeaveAnon
        • messageSend
        • messageSendAnonChannel
        • consoleError
        • showStripeCheckout
      • Authentication Actions
    • Script Hooks
      • Globals Variables
        • $$BF_Model
        • $$BF_App
        • $$BF_State
      • Keeping Keys Private
      • Reducing Payload Size
      • API Callback Endpoint
      • Common Hooks
      • Scoped Hooks
    • Users & Authentication
      • Managing User Accounts
      • Custom Login Pages
      • OAuth
    • Advanced Configuration
      • Custom Domains
    • BF Utility Functions
      • Example Usage
        • BF.i18n()
    • BF Error Codes
    • Messaging
      • Adding users to channels
      • Removing users from channels
      • Sending messages
      • Get connected users
      • Get active channels
    • Practices for File Downloads
    • BF Streaming Proxy
    • Updating the Helper File
    • Connection Trouble Shooting Guide
    • Software Testing Overview
    • JavaScript Libraries
    • FM BetterForms - Quality Assurance
    • Rollbacks and Version Control
    • BF Server Proxy
    • Setting up Auth0
    • Create an S3 Bucket on AWS
    • ApexCharts - Getting started
    • BF Enterprise Documentation
    • BetterForms Error Pages API
    • BF Streaming API
    • Creating a PWA
  • Usage Tips
    • Troubleshooting
      • Debugging
      • Frozen Actions Queue
      • Vue Variables
    • JavaScript Tips
      • Calling Named Actions from HTML Vue Events
      • Calculations
    • Hacking a Webpage
    • System Overview
    • Forms Processor
      • Form Types
      • HTML & VueJS
      • Styling and Design
    • Customizing and Styling
      • Custom CSS
      • Custom Components
        • Components Editor
        • Component Best Practices
      • Page Pre-loaders
      • Favicon
    • Design Patterns and Best Practices
      • Working with environments
      • Handling Data
      • Saving Data
      • Data Optimization
      • Business Logic
      • UI / UX
      • Debugging
      • Script Engine Optimization
    • Getting Started
    • Installation
  • Security
    • Authentication
    • Security White Paper
    • Firewalls
    • Technology Stack
  • Compatibility
Powered by GitBook
On this page

Was this helpful?

  1. Reference
  2. Page Elements
  3. Uploading Files

Uppy File Upload Widget Integration with AWS S3

This page is in development

This page provides instructions on how to integrate the Uppy file upload widget with AWS S3 for seamless file uploads. It also includes helper functions for path extraction and named actions.

1. Uppy Library

Include the Uppy library and its CSS in your DOM Header Insertions.

<script src="https://releases.transloadit.com/uppy/v3.7.0/uppy.min.js"></script>
<link href="https://releases.transloadit.com/uppy/v3.7.0/uppy.min.css" rel="stylesheet">

2. Path Extraction Function

Include the the BF.getPaths in your DOM Header Insertion. This function is used to extract JSON paths from a data object based on a filter. This can be helpful for dynamically generating paths to specific data elements.

<script>
    BF.getPaths = function(data, filter) {
        var paths = jp.paths(data, filter);
        var arrayLength = paths.length;
        var lineResult = [];
        for (var i = 0; i < arrayLength; i++) {
            var line = paths[i];
            for (var j = 0; j < line.length; j++) {
                var term = line[j];
                if (term == "$") {
                    // Root element
                } else if (typeof term === "number") {
                    lineResult[i] = lineResult[i] + "[" + term + "]";
                } else {
                    lineResult[i] = lineResult[i] == null ? "data." + term : lineResult[i] + "." + term;
                }
            }
        }
        return lineResult;
    }
</script>

3. Named Action Promise Function

Include the BF.namedActionPromise function in your DOM Header Insertion. It facilitates the execution of named actions with a promise-based approach. This function generates a unique ID for each action and resolves the promise once the action is complete.

<script>
    BF.namedActionPromise = function(namedActionName, options) {
        var idResolver_uid = BF.getUUID();
        options.idResolver_uid = idResolver_uid;
        return new Promise((resolve, reject) => {
            window.namedActionResolve[options.idResolver_uid] = resolve;
            BF.namedAction(namedActionName, options);
        });
    };
</script>

4. AWS S3 Setup

Action Scripts

getSignedURL handles the process of obtaining a signed URL from AWS S3 to upload files securely.

resolver resolves the signed URLs obtained for file uploads.

runSignedURL triggers the process to get the signed URL for file uploads.

uploadHandler handles the post-upload process.

onFormLoad In this action, it initializes necessary variables and Uppy instances for different upload scenarios, including drag-drop area, status bar, dashboard trigger, and file input.

// Initialize session and promise resolver
window.namedActionResolve = {};
model.idSession = BF.getUUID();

// Initialize Uppy instances with configurations
window.uppy1 = new Uppy.Uppy({ /* ... */ });
window.uppy2 = new Uppy.Uppy({ /* ... */ });
window.uppy3 = new Uppy.Uppy({ /* ... */ });
window.uppy4 = new Uppy.Uppy({ /* ... */ });

// Additional setup and event listeners for Uppy instances
PreviousuploadCareNextMisc Elements

Last updated 10 months ago

Was this helpful?

Ensure you have an AWS S3 bucket and the necessary credentials for accessing it. You can reference .

Check for Uppy used in various cases.

🏗️
here
this example