Gathering detailed insights and metrics for vue-filepond-vite-laravel
Gathering detailed insights and metrics for vue-filepond-vite-laravel
Installations
npm install vue-filepond-vite-laravelDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, UMD
Node Version
14.20.0
NPM Version
6.14.17
Score
55.7
Supply Chain
98.2
Quality
74.9
Maintenance
50
Vulnerability
99.6
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
634
Last Day
1
Last Week
1
Last Month
12
Last Year
103
Bundle Size
2.45 kB
Minified
1.22 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
6.0.4
Package Id
vue-filepond-vite-laravel@6.0.4
Unpacked Size
24.71 kB
Size
7.79 kB
File Count
8
NPM Version
6.14.17
Node Version
14.20.0
Total Downloads
Cumulative downloads
Total Downloads
634
Last Day
0%
1
Compared to previous day
Last Week
-50%
1
Compared to previous week
Last Month
-7.7%
12
Compared to previous month
Last Year
-8.8%
103
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Vue FilePond
Just a copy of vue-filepond 6.0.3 without importing vue from 'vue/dist/vue.esm.js'. Because Vue 2, Laravel and Vite already have
1resolve: { 2 alias: { 3 vue: 'vue/dist/vue.esm.js', 4 }, 5 },
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.
Core Features
- Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
- Drop files, select on filesystem, copy and paste files, or add files using the API.
- Async uploading with AJAX, or encode files as base64 data and send along form post.
- Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
- Image optimization, automatic image resizing, cropping, and fixes EXIF orientation.
- Responsive, automatically scales to available space, is functional on both mobile and desktop devices.
Also need Image Editing?
Doka.js might be just what you're looking for. It's a Modern JavaScript Image Editor, Doka supports setting crop aspect ratios, resizing, rotating, cropping, and flipping images. Above all, it integrates beautifully with FilePond.
Installation:
1npm install vue-filepond filepond
Usage:
1<template> 2 <div id="app"> 3 4 <file-pond 5 name="test" 6 ref="pond" 7 label-idle="Drop files here..." 8 v-bind:allow-multiple="true" 9 accepted-file-types="image/jpeg, image/png" 10 server="/api" 11 v-bind:files="myFiles" 12 v-on:init="handleFilePondInit"/> 13 14 </div> 15</template> 16 17<script> 18// Import Vue FilePond 19import vueFilePond from 'vue-filepond'; 20 21// Import FilePond styles 22import 'filepond/dist/filepond.min.css'; 23 24// Import FilePond plugins 25// Please note that you need to install these plugins separately 26 27// Import image preview plugin styles 28import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'; 29 30// Import image preview and file type validation plugins 31import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'; 32import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; 33 34// Create component 35const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview); 36 37export default { 38 name: 'app', 39 data: function() { 40 return { myFiles: ['cat.jpeg'] }; 41 }, 42 methods: { 43 handleFilePondInit: function() { 44 console.log('FilePond has initialized'); 45 46 // FilePond instance methods are available on `this.$refs.pond` 47 } 48 }, 49 components: { 50 FilePond 51 } 52}; 53</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 rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css"> 7 <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"> 8 9 </head> 10 <body> 11 12 <div id="app"> 13 <file-pond></file-pond> 14 </div> 15 16 <script src="https://unpkg.com/filepond-plugin-image-preview"></script> 17 <script src="https://unpkg.com/filepond"></script> 18 <script src="https://unpkg.com/vue"></script> 19 <script src="https://unpkg.com/vue-filepond"></script> 20 21 <script> 22 new Vue({ 23 el: '#app', 24 components: { 25 FilePond: vueFilePond.default(FilePondPluginImagePreview) 26 } 27 }) 28 </script> 29 30 </body> 31</html>
No vulnerabilities found.
No security vulnerabilities found.