pqina / Angular Filepond
Licence: mit
🔌 A handy FilePond adapter component for Angular
Stars: ✠59
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular Filepond
Vue Filepond
🔌 A handy FilePond adapter component for Vue
Stars: ✠1,263 (+2040.68%)
Mutual labels: image-processing, upload, file
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✠92 (+55.93%)
Mutual labels: upload, file, drag-and-drop
Jquery Filepond
🔌 A handy FilePond wrapper for jQuery
Stars: ✠124 (+110.17%)
Mutual labels: image-processing, upload, file
React Filepond
🔌 A handy FilePond adapter component for React
Stars: ✠1,024 (+1635.59%)
Mutual labels: image-processing, upload, file
ngx-dropzone
A highly configurable dropzone component for Angular.
Stars: ✠123 (+108.47%)
Mutual labels: drag-and-drop, 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 (+496.61%)
Mutual labels: upload, file
React Uploady
Modern file uploading - components & hooks for React
Stars: ✠372 (+530.51%)
Mutual labels: upload, drag-and-drop
Ngx Dnd
🕶 Drag, Drop and Sorting Library for Angular2 and beyond!
Stars: ✠511 (+766.1%)
Mutual labels: drag-and-drop, ngx
Chibisafe
Blazing fast file uploader and awesome bunker written in node! 🚀
Stars: ✠657 (+1013.56%)
Mutual labels: upload, file
ShareX-CDN
Basic image, text & file uploader CDN for ShareX
Stars: ✠22 (-62.71%)
Mutual labels: upload, file
React Dropzone
Simple HTML5 drag-drop zone with React.js.
Stars: ✠8,639 (+14542.37%)
Mutual labels: file, drag-and-drop
image-uploader
Simple Drag & Drop image uploader plugin to static forms, without using AJAX
Stars: ✠70 (+18.64%)
Mutual labels: drag-and-drop, upload
vue-simple-upload-component
A simple upload component for Vue.js 2.x
Stars: ✠14 (-76.27%)
Mutual labels: drag-and-drop, upload
yii2-dropzone
This extension provides the Dropzone integration for the Yii2 framework.
Stars: ✠11 (-81.36%)
Mutual labels: drag-and-drop, upload
Cj Upload
Higher order React components for file uploading (with progress) react file upload
Stars: ✠589 (+898.31%)
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 (-15.25%)
Mutual labels: upload, file
This adapter has been deprecated, please use ngx-filepond instead.
Angular FilePond
Angular 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.
Installation
Install FilePond component from npm.
npm install angular-filepond --save
Add FilePond
to an NgModule and if needed register any plugins. Please note that plugins need to be installed from npm separately.
import { FilePond, registerPlugin } from 'angular-filepond';
// Registering plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm';
registerPlugin(FilePondPluginFileValidateType);
// Adding FilePond to imports
@NgModule({
imports: [
FilePond
]
})
export class AppModule { }
Add the FilePond stylesheet to your angular-cli.json
build script.
"styles": [
"styles.css",
"../node_modules/filepond/dist/filepond.min.css"
]
Now FilePond can be used in your templates.
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div class="root">
<FilePond #myPond
name="my-name"
className="my-class"
labelIdle="Drop files here..."
allowMultiple="true"
acceptedFileTypes="image/jpeg, image/png"
server="/api"
[files]="myFiles"
(oninit)="handleFilePondInit()">
</FilePond>
</div>
`
})
export class AppComponent {
myFiles = ['index.html'];
// Allows us to get a reference to the FilePond instance
@ViewChild('myPond') myPond: any;
handleFilePondInit = () => {
console.log('FilePond has initialised');
// FilePond instance methods are available on `this.myPond`
}
}
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].