CBWIRE
InstallSource CodeIssuesSupport
v3.x
v3.x
  • Introduction
  • Getting Started
  • Configuration
  • How It Works
  • Release History
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Examples
    • Contact Form
    • Multi-select Input
    • File Upload
  • Resources
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Actions
    • Events
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • SPAs with Turbo
    • AlpineJS
Powered by GitBook
On this page
  1. Examples

File Upload

PreviousMulti-select InputNextResources

Last updated 1 year ago

This example uses CBWIRE's features.

<cfscript>
    data = {
        "myFile": ""
    };

    function save() {
        // s3.put( data.myFile.get() );
        if ( isObject( data.myFile ) ) {
            data.myFile.destroy();
        }
    }
</cfscript>

<cfoutput>
    <div>
        <form wire:submit.prevent="save">
            <input wire:model="myFile" type="file">
            <div>
                <button type="submit" class="btn btn-primary mt-4">Save</button>
            </div>
        </form>
        <div>
            <div wire:loading wire:target="myFile">Uploading...</div>
        </div>
        <div>
            <cfif isObject( myFile )>
                <cfif myFile.isImage()>
                    <img src="#myFile.getPreviewURL()#" style="width: 300px; height: auto;">
                <cfelse>
                    <div>The file you uploaded is not an image. Preview not available.</div>
                </cfif>
            </cfif>
        </div>
    </div>
</cfoutput>
File Upload