Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Loader
    • Modal
    • Month picker
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

File upload

A component that wraps the native html input of type file.

Usage

import { RFileUpload } from '@rebilly/revel';

<r-file-upload v-slot="{ openFileBrowser, setFocus }">
    <button @click="openFileBrowser" @focus="setFocus">Upload file</button>
</r-file-upload>

Examples

file-upload-single.vue

Upload with preview

file-upload-with-preview.vue

API

Props

NameTypeDefaultDescription
multiplebooleanfalse

Allows the user to select more than one file

acceptstring''

String that defines the file types the file input should accept

disabledbooleanfalse

Disables the upload action.

Slots

NameDescription
default

Element that will trigger the system upload UI

Events

NameDescription
input
Edit this page
Last Updated: 7/16/24, 9:46 PM
Contributors: Alberto Gualis, John Hannagan, Weetbix, Cesar Level
Prev
Field group
Next
Flex