File Input

View Original

A drag-and-drop file input component that allows users to browse or drag files into a drop zone.

Goshtoso Component

Go + Templ

Drag and Drop

Cover Picture

Browse or drag and drop here

PNG, JPG, WebP - Max 5MB

Required

Upload Document

Browse or drag and drop here

PDF, DOC, DOCX - Max 10MB

Disabled

Disabled Upload

Browse or drag and drop here

Uploads are currently disabled

Without Label

Browse or drag and drop here

Any image or PDF - Max 5MB

Usage Example

// Basic file input with drag and drop
@fileinput.FileInput(fileinput.Config{
    ID:         "coverPicture",
    Name:       "cover",
    Label:      "Cover Picture",
    Accept:     "image/*",
    HelperText: "PNG, JPG, WebP - Max 5MB",
})

// Required file input
@fileinput.FileInput(fileinput.Config{
    ID:         "document",
    Name:       "document",
    Label:      "Upload Document",
    Accept:     ".pdf,.doc,.docx",
    HelperText: "PDF, DOC, DOCX - Max 10MB",
    Required:   true,
})

// Disabled file input
@fileinput.FileInput(fileinput.Config{
    ID:       "disabled",
    Name:     "disabled",
    Label:    "Disabled Upload",
    Disabled: true,
})

Dropdown Form