File - PopUI

File

File input components for selecting and uploading files. Use InputFile for basic file selection or FileUpload for avatar/image uploads with preview.

123456789101112
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileDefault() {
	@popui.InputFile(props.InputFile{
		Name: "document",
	})
}

Disabled State

Disabled file inputs prevent user interaction.

12345678910111213
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileDisabled() {
	@popui.InputFile(props.InputFile{
		Name:     "document",
		Disabled: true,
	})
}

Accept Specific Types

Restrict file selection to specific file types using the Accept prop.

12345678910111213141516171819
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileAcceptTypes() {
	<div class="space-y-4">
		@popui.InputFile(props.InputFile{
			Name:   "images",
			Accept: "image/*",
		})
		@popui.InputFile(props.InputFile{
			Name:   "documents",
			Accept: ".pdf,.doc,.docx",
		})
	</div>
}

Multiple Files

Allow multiple file selection with the Multiple prop.

1234567891011121314
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileMultiple() {
	@popui.InputFile(props.InputFile{
		Name:     "photos",
		Multiple: true,
		Accept:   "image/*",
	})
}

Upload Without Preview

FileUpload without an initial avatar shows a placeholder icon.

Upload Profile Picture

12345678910111213
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileUploadNoPreview() {
	@popui.FileUpload(props.InputFile{
		Name: "profile-picture",
		Text: "Upload Profile Picture",
	})
}

Avatar Upload

Use FileUpload for file inputs with avatar preview.

Change Avatar

123456789101112131415
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileAvatar() {
	@popui.FileUpload(props.InputFile{
		Name:      "avatar",
		AvatarURL: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
		AvatarAlt: "User Avatar",
		Text:      "Change Avatar",
	})
}

Square Preview

Use PreviewSquare for square avatar previews (useful for logos).

Upload Logo

12345678910111213141516
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileSquarePreview() {
	@popui.FileUpload(props.InputFile{
		Name:          "logo",
		AvatarURL:     "https://api.dicebear.com/7.x/shapes/svg?seed=Logo",
		AvatarAlt:     "Company Logo",
		Text:          "Upload Logo",
		PreviewSquare: true,
	})
}

With Additional Buttons

Pass children to add extra buttons like Remove or Cancel.

Change Avatar

12345678910111213141516171819202122
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileWithButtons() {
	@popui.FileUpload(props.InputFile{
		Name:      "avatar",
		AvatarURL: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
		AvatarAlt: "User Avatar",
		Text:      "Change Avatar",
	}) {
		@popui.Button(props.Button{
			Type: "button",
			Size: "sm",
		}) {
			Remove
		}
	}
}

API Reference

InputFile

Basic file input component.

Name	Type	Default	Description
`ID`	`string`	`auto-generated`	Unique identifier for the file input
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Name`	`string`	-	Name attribute for form submission
`Accept`	`string`	-	Accepted file types (e.g., "image/*", ".pdf,.doc")
`Capture`	`string`	-	Capture media from device camera ("user" or "environment")
`Multiple`	`bool`	`false`	Allow multiple file selection
`Autofocus`	`bool`	`false`	Autofocus the file input on page load
`Required`	`bool`	`false`	Make the file input required
`Disabled`	`bool`	`false`	Disable the file input

FileUpload

File upload component with avatar preview.

Name	Type	Default	Description
`ID`	`string`	`auto-generated`	Unique identifier for the file upload
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Name`	`string`	-	Name attribute for form submission
`Accept`	`string`	-	Accepted file types
`Capture`	`string`	-	Capture media from device camera ("user" or "environment")
`Required`	`bool`	`false`	Make the file upload required
`Disabled`	`bool`	`false`	Disable the file upload
`Multiple`	`bool`	`false`	Allow multiple file selection
`AvatarURL`	`string`	-	Avatar image URL for preview
`AvatarAlt`	`string`	-	Alt text for avatar image
`Text`	`string`	-	Text label before upload button
`PreviewSquare`	`bool`	`false`	Use square preview instead of circle