Gathering detailed insights and metrics for vue-filepond
Gathering detailed insights and metrics for vue-filepond
Gathering detailed insights and metrics for vue-filepond
Gathering detailed insights and metrics for vue-filepond
npm install vue-filepond
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
1,948 Stars
161 Commits
128 Forks
27 Watching
19 Branches
14 Contributors
Updated on 25 Nov 2024
JavaScript (58.43%)
Vue (27.58%)
TypeScript (7.78%)
HTML (6.22%)
Cumulative downloads
Total Downloads
Last day
0.3%
5,704
Compared to previous day
Last week
1.2%
27,099
Compared to previous week
Last month
8.4%
115,572
Compared to previous month
Last year
9%
1,237,731
Compared to previous year
Vue FilePond is a handy adapter component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
If you want to use Vue FilePond with Vue 2, please use v6 of this plugin.
Buy me a Coffee / Use FilePond with Pintura / Dev updates on Twitter
Pintura the modern JavaScript Image Editor is what you're looking for. Pintura supports setting crop aspect ratios, resizing, rotating, cropping, and flipping images. Above all, it integrates beautifully with FilePond.
Installation:
If you're using Vue 2 please run npm install vue-filepond@^6.0.0
1npm install vue-filepond filepond
Usage:
1<template> 2 <div id="app"> 3 <file-pond 4 name="test" 5 ref="pond" 6 label-idle="Drop files here..." 7 v-bind:allow-multiple="true" 8 accepted-file-types="image/jpeg, image/png" 9 server="/api" 10 v-bind:files="myFiles" 11 v-on:init="handleFilePondInit" 12 /> 13 </div> 14</template> 15 16<script> 17// Import Vue FilePond 18import vueFilePond from "vue-filepond"; 19 20// Import FilePond styles 21import "filepond/dist/filepond.min.css"; 22 23// Import FilePond plugins 24// Please note that you need to install these plugins separately 25 26// Import image preview plugin styles 27import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"; 28 29// Import image preview and file type validation plugins 30import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type"; 31import FilePondPluginImagePreview from "filepond-plugin-image-preview"; 32 33// Create component 34const FilePond = vueFilePond( 35 FilePondPluginFileValidateType, 36 FilePondPluginImagePreview 37); 38 39export default { 40 name: "app", 41 data: function () { 42 return { myFiles: ["cat.jpeg"] }; 43 }, 44 methods: { 45 handleFilePondInit: function () { 46 console.log("FilePond has initialized"); 47 48 // FilePond instance methods are available on `this.$refs.pond` 49 }, 50 }, 51 components: { 52 FilePond, 53 }, 54}; 55</script>
When using FilePond with an SSR configuration like Nuxt.js it's best to wrap it in <no-ssr>
tags.
1<template> 2 <no-ssr> 3 <file-pond /> 4 </no-ssr> 5</template>
Usage in the browser:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Vue in Browser</title> 5 6 <link 7 rel="stylesheet" 8 href="https://unpkg.com/filepond/dist/filepond.min.css" 9 /> 10 <link 11 rel="stylesheet" 12 href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" 13 /> 14 </head> 15 <body> 16 <div id="app"> 17 <file-pond></file-pond> 18 </div> 19 20 <script src="https://unpkg.com/filepond-plugin-image-preview"></script> 21 <script src="https://unpkg.com/filepond"></script> 22 <script src="https://unpkg.com/vue"></script> 23 <script src="https://unpkg.com/vue-filepond@6"></script> 24 25 <script> 26 new Vue({ 27 el: "#app", 28 components: { 29 FilePond: vueFilePond.default(FilePondPluginImagePreview), 30 }, 31 }); 32 </script> 33 </body> 34</html>
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/25 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
90 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
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