npmpackage.info

Gathering detailed insights and metrics for vue-file-selector

Other packages similar to vue-file-selector

file-selector

2.1.2

Convert DataTransfer object to a list of File objects

postcss-selector-parser

7.0.0

> Selector parser with built in methods for working with selector strings.

@csstools/selector-specificity

5.0.0

Determine selector specificity with postcss-selector-parser

hast-util-parse-selector

4.0.0

hast utility to create an element from a simple CSS selector

Gathering detailed insights and metrics for vue-file-selector

vue-file-selector

File selector with validation that supports drag-n-drop for @vuejs

2.0.2

MIT

JavaScript

1.25 kB

131,367 2

Installations

npm install vue-file-selector

Pull Requests

Open

3

Total

44

Closed

1

Merged

40

Issues

Open

0

Total

2

Closed

2

Releases

v2.0.2 Vuejs 3 and TypeScript

2.0.1

Published on 17 Jun 2022

v0.6.0

0.6.0

Published on 15 Nov 2019

The first release v0.1.0

0.1.0

Published on 01 Nov 2019

View all 3 releases

Contributors

View all 2 contributors

Developer

d2phap

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

16.13.0

NPM Version

8.3.0 Statistics

16 Stars

111 Commits

9 Forks

3 Watching

4 Branches

2 Contributors

Updated on 14 Jun 2024

Bundle Size

2.72 kB

Minified

1.25 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (43.95%)

Vue (40.78%)

SCSS (8.71%)

TypeScript (6.56%)

Total Downloads

Cumulative downloads

Total Downloads

131,367

Last day

-28.6%

Compared to previous day

Last week

-26.3%

383

Compared to previous week

Last month

-20.8%

1,851

Compared to previous month

Last year

-16.5%

31,402

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

vue

Dev Dependencies

rollup rollup-plugin-banner2 rollup-plugin-clear rollup-plugin-copy rollup-plugin-node-externals rollup-plugin-styles rollup-plugin-terser rollup-plugin-typescript2 rollup-plugin-vue sass typescript

Versions

Vue File selector for Vuejs 3

File selector with validation that supports drag-n-drop for Vuejs.

Vue File selector

Other open source projects

ImageGlass - A lightweight, versatile image viewer: https://imageglass.org
Fluent Reveal Effect Js (Fluent Design System): https://github.com/d2phap/fluent-reveal-effect
FileWatcherEx - A wrapper of C# FileSystemWatcher for Windows: https://github.com/d2phap/FileWatcherEx

Install

Run the command

npm i vue-file-selector@latest

NPM package: https://www.npmjs.com/package/vue-file-selector

Github source: https://github.com/d2phap/vue-file-selector

Usage

Please see Demo project for full example.

Declare the plugin

1// in main.ts
2
3import { createApp } from 'vue';
4
5// import FileSelector main css
6import 'vue-file-selector/dist/main.css';
7
8// import the FileSelector plugin
9import FileSelector from 'vue-file-selector';
10
11
12import App from './App.vue';
13
14createApp(App)
15
16  // then use it!
17  .use(FileSelector)
18  .mount('#app');

Use in Vue file

1<template>
2  <div>
3    <FileSelector
4      accept-extensions=".jpg,.svg"
5      :multiple="true"
6      :max-file-size="5 * 1024 * 1024"
7      @validated="handleFilesValidated"
8      @changed="handleFilesChanged">
9      Select image files
10    </FileSelector>
11  </div>
12</template>
13
14<script lang="ts">
15import { Options, Vue } from 'vue-class-component';
16import { FsValidationResult } from 'vue-file-selector/dist';
17
18@Options({})
19export default class App extends Vue {
20  handleFilesValidated(result: FsValidationResult, files: File[]) {
21    console.log('Validation result: ' + result);
22  },
23
24  handleFilesChanged(files: File[]) {
25    console.log('Selected files: ');
26    console.table(files);
27  },
28}
29</script>

Slots

Name	Default	Description
`default`	`Select`	Content of the `Select` button.
`loader`	`Loading...`	Content of loading state.
`top`	`(empty)`	Top section content, above the `Select` button.
`bottom`	`(empty)`	Bottom section content, below the `Select` button.

Props

Name	Type	Default	Description
`multiple`	`boolean`	`false`	Allow multiple files selected.
`isLoading`	`boolean`	`false`	Show or hide the loading section (slot: `loader`).
`acceptExtensions`	`string`	`(empty)`	List of file extensions accepted. Each extension separated by a comma (`,`). E.g. `accept-extensions=".zip,.rar"`.
`maxFileSize`	`number`	`NaN`	Maximum size in byte of every single file allowed. E.g. `:max-file-size="210241024"` (only the files that ≤2 MB are allowed).
`height`	`number`	`NaN`	The height of droppable section.
`validateFn`	`FsValidateFn`	`() => true`	A custom validation function that returns boolean value.

Events

1. `@validated`

Occurs after the selected files validated.

1Function(result: FsValidationResult, files: File[]): void

result: validation result,
- returns true if the file validation is valid, else
- returns false or Error codes (string).
files: list of files validated.

2. `@changed`

Occurs if the selected files pass validation.

1Function(files: File[]): void

files: list of files validated.

Error codes

List of error codes returned after validation, see FsValidationResult.

Code	Error description
`EXTENSION_ERROR`	The selected files contain invalid extensions.
`FILE_SIZE_ERROR`	The selected files size exceeded limit.
`MULTIFILES_ERROR`	Multiple files selection is not allowed.

License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-file-selector

vue-file-selector

Installations

Pull Requests

3

44

1

40

Issues

0

2

2

Releases

Contributors

Developer

Developer Guide

CommonJS

Yes

16.13.0

8.3.0

Statistics

Bundle Size

2.72 kB

1.25 kB

Languages

Total Downloads

131,367

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Vue File selector for Vuejs 3

Other open source projects

Install

Usage

Declare the plugin

Use in Vue file

Slots

Props

Events

1. @validated

2. @changed

Error codes

License

10

10

0

0

0

0

0

0

0

2

/10

Other packages similar to vue-file-selector

1. `@validated`

2. `@changed`