Rising Picker

A modern, reusable, customizable, and lightweight File Picker / File Upload component for Vue 3.

Rising Picker supports single and multiple file selection, drag & drop, image previews, file validation, file size limits, custom colors, and Vue's standard v-model API.

📋 Props API Reference

| Prop Name | Type | Default | Description | | :----------------------- | :-------------------- | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | | modelValue (v-model) | File / Array / null | null | The selected file or files. Returns a single | label | String | 'Upload File' | Label displayed above the file picker. | | placeholder | String | 'Drag & drop your file here or browse' | Text displayed when no file has been selected. | | accept | String | '' | Specifies the allowed file types. Supports MIME types, wildcards, and file extensions such as image/*, application/pdf, or .pdf,.docx. | | multiple | Boolean | false | Allows users to select and upload multiple files. | | maxSize | Number | 0 | Maximum allowed file size in bytes. Set to 0 to allow files of any size. | | required | Boolean | false | Displays a required * indicator next to the label. | | disabled | Boolean | false | Disables file selection, drag & drop, and file removal. | | primaryColor | String | '#000' | Sets the primary theme color used for buttons, borders, icons, and other highlighted elements. |

✨ Features

• Single File Selection: Select and preview one file at a time.
• Multiple File Selection: Select multiple files and add more files without replacing existing selections.
• Drag & Drop: Easily upload files by dragging and dropping them into the picker.
• Image Preview: Automatically displays previews for image files.
• File Information: Displays file names and file sizes for non-image files.
• Remove Files: Remove individual files from the selected list.
• File Type Validation: Restrict uploads using MIME types or file extensions.
• File Size Validation: Set a maximum allowed file size.
• Custom Primary Color: Customize the component's theme color.
• Disabled State: Prevent file selection and interaction when disabled.
• Required Indicator: Display a required * indicator beside the label.
• Vue 3 v-model Support: Fully compatible with Vue's standard two-way binding.
• Lightweight: Built using Vue 3 Composition API.
• Responsive UI: Works across desktop, tablet, and mobile layouts.

📦 Installation

Install Rising Picker using npm:

npm install risingpicker