pqina / Vue Filepond
Licence: mit
π A handy FilePond adapter component for Vue
Stars: β 1,263
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Filepond
Jquery Filepond
π A handy FilePond wrapper for jQuery
Stars: β 124 (-90.18%)
Mutual labels: image-processing, upload, file
Angular Filepond
π A handy FilePond adapter component for Angular
Stars: β 59 (-95.33%)
Mutual labels: image-processing, upload, file
React Filepond
π A handy FilePond adapter component for React
Stars: β 1,024 (-18.92%)
Mutual labels: image-processing, upload, file
Aetherupload Laravel
A Laravel package to upload large files δΈδΌ 倧ζδ»ΆηLaravelζ©ε±ε
Stars: β 835 (-33.89%)
Mutual labels: upload, file
Cj Upload
Higher order React components for file uploading (with progress) react file upload
Stars: β 589 (-53.37%)
Mutual labels: upload, file
safe-svg
Enable SVG uploads and sanitize them to stop XML/SVG vulnerabilities in your WordPress website.
Stars: β 129 (-89.79%)
Mutual labels: upload, file
Uploader
A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
Stars: β 1,042 (-17.5%)
Mutual labels: upload, file
File Dialog
Trigger the upload file dialog directly from your code easily.
Stars: β 51 (-95.96%)
Mutual labels: upload, file
Fileuploaderplugin
Simple cross platform plugin to upload files.
Stars: β 59 (-95.33%)
Mutual labels: upload, file
File Upload With Preview
πΌ A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.
Stars: β 352 (-72.13%)
Mutual labels: upload, file
Chibisafe
Blazing fast file uploader and awesome bunker written in node! π
Stars: β 657 (-47.98%)
Mutual labels: upload, file
ShareX-CDN
Basic image, text & file uploader CDN for ShareX
Stars: β 22 (-98.26%)
Mutual labels: upload, file
Nodestream
Storage-agnostic streaming library for binary data transfers
Stars: β 70 (-94.46%)
Mutual labels: upload, file
ic-firebase-uploader
This component is a multi-file uploader for firebase
Stars: β 21 (-98.34%)
Mutual labels: upload, file
file-upload-with-preview
πΌ Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.
Stars: β 406 (-67.85%)
Mutual labels: upload, file
Droply Js
Droply JS, a new responsive and cross browser chunk uploader with DragDrop and File Preview capabilities (HTML5/CSS3)
Stars: β 50 (-96.04%)
Mutual labels: upload, file
Vue FilePond
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.
FilePond is maintained by Rik Schennink
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:
If you're using Vue 2 please run npm install [email protected]^6.0.0
npm install vue-filepond filepond
Usage:
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
label-idle="Drop files here..."
v-bind:allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
server="/api"
v-bind:files="myFiles"
v-on:init="handleFilePondInit"
/>
</div>
</template>
<script>
// Import Vue FilePond
import vueFilePond from "vue-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import FilePond plugins
// Please note that you need to install these plugins separately
// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
// Create component
const FilePond = vueFilePond(
FilePondPluginFileValidateType,
FilePondPluginImagePreview
);
export default {
name: "app",
data: function () {
return { myFiles: ["cat.jpeg"] };
},
methods: {
handleFilePondInit: function () {
console.log("FilePond has initialized");
// FilePond instance methods are available on `this.$refs.pond`
},
},
components: {
FilePond,
},
};
</script>
When using FilePond with an SSR configuration like Nuxt.js it's best to wrap it in <no-ssr> tags.
<template>
<no-ssr>
<file-pond />
</no-ssr>
</template>
Usage in the browser:
<!DOCTYPE html>
<html>
<head>
<title>Vue in Browser</title>
<link
rel="stylesheet"
href="https://unpkg.com/filepond/dist/filepond.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
/>
</head>
<body>
<div id="app">
<file-pond></file-pond>
</div>
<script src="https://unpkg.com/filepond-plugin-image-preview"></script>
<script src="https://unpkg.com/filepond"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-filepond"></script>
<script>
new Vue({
el: "#app",
components: {
FilePond: vueFilePond.default(FilePondPluginImagePreview),
},
});
</script>
</body>
</html>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].