File Upload

Features Overview

Now.js provides a powerful file upload component with the following capabilities:

📤 Single & Multiple Upload

Support for both single file and multiple file uploads

multiple

👁️ Live Preview

Real-time preview of uploaded images and files

data-preview="true"

🎯 Drag & Drop

Intuitive drag and drop interface for file uploads

data-drag-drop="true"

🔄 Sortable Files

Reorder uploaded files by dragging

data-sortable="true"

🗑️ Remove Files

Delete uploaded files before submission

data-allow-remove-existing="true"

✅ File Validation

Validate file types using accept attribute

accept="image/*, application/pdf"

🔗 File References

Load existing files from URLs

data-file-reference="url"

📊 Form Integration

Seamless integration with Now.js Form component

data-form="settings"

API Reference

File upload input attributes for customization:

Attribute	Type	Default	Description
`data-preview`	boolean	false	Enable live preview of uploaded files
`data-drag-drop`	boolean	false	Enable drag and drop functionality
`data-sortable`	boolean	false	Allow reordering of uploaded files
`data-allow-remove-existing`	boolean	false	Allow removal of existing uploaded files
`data-file-reference`	string	-	Field name for file URL reference (e.g., "url")
`data-attr`	string	-	Bind to data source (e.g., "value:files")
`accept`	string	*	Allowed file types (e.g., "image/*,application/pdf")
`multiple`	boolean	false	Allow multiple file selection

Code Examples

Example 1: Single File Upload with Preview

Upload a single image file with live preview:


            <input type="file"
            name="avatar"
            data-preview="true"
            data-allow-remove-existing="true"
            data-file-reference="url"
            accept="image/*">

Example 2: Multiple Files with Drag & Drop

Upload multiple files with drag and drop support:


            <input type="file"
            name="files"
            multiple
            data-preview="true"
            data-drag-drop="true"
            data-allow-remove-existing="true"
            accept="image/*,application/pdf">

Example 3: Sortable File Upload

Upload multiple files with sorting capability:


            <input type="file"
            name="files"
            multiple
            data-preview="true"
            data-drag-drop="true"
            data-sortable="true"
            data-allow-remove-existing="true"
            data-file-reference="url">

Example 4: Loading Existing Files

Load existing files from API using data binding:


            <!-- HTML -->
            <form data-form="settings"
            data-load-api="settings.php">
            <input type="file"
            name="files"
            multiple
            data-preview="true"
            data-attr="value:files"
            data-file-reference="url">
            </form>


            // API Response Format (settings.php)
            {
            "data": {
            "files": [
            {
            "url": "files/sample.jpg",
            "name": "sample.jpg"
            },
            {
            "url": "files/document.pdf",
            "name": "document.pdf"
            }
            ]
            }
            }

Example 5: Form Submission

Complete form with AJAX submission:


            <form method="POST"
            action="save-settings.php"
            data-form="settings"
            data-validate="true"
            data-ajax-submit="true"
            data-load-api="settings.php">

            <input type="text" name="name" required>

            <input type="file"
            name="avatar"
            data-preview="true"
            data-attr="value:avatar"
            data-file-reference="url"
            accept="image/*">

            <button type="submit">Submit</button>
            </form>

Live Demo

Try the complete file upload form with all features enabled: