georgipeltekov / Ngx File Drop
Licence: mit
Angular 11 file and folder drop library
Stars: ✭ 220
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngx File Drop
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 (-58.18%)
Mutual labels: upload, file-upload, angular2, angular4
image-uploader
Simple Drag & Drop image uploader plugin to static forms, without using AJAX
Stars: ✭ 70 (-68.18%)
Mutual labels: drag, drop, upload, file-upload
vue-simple-upload-component
A simple upload component for Vue.js 2.x
Stars: ✭ 14 (-93.64%)
Mutual labels: drag, drop, upload, file-upload
Ng2 Dnd
Angular 2 Drag-and-Drop without dependencies
Stars: ✭ 861 (+291.36%)
Mutual labels: drag, drop, angular2, angular4
Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (-23.18%)
Mutual labels: angular2, angular4, ngx
angular-material-datatransfer
A HTML5 datatransfer UI for handling upload and download of multiple simultaneous files.
Stars: ✭ 13 (-94.09%)
Mutual labels: angular2, upload, angular4
Ngx Drag To Select
A lightweight, fast, configurable and reactive drag-to-select component for Angular 6 and beyond
Stars: ✭ 262 (+19.09%)
Mutual labels: drag, angular2, ngx
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (-88.18%)
Mutual labels: angular2, angular4, ngx
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (+22.27%)
Mutual labels: angular2, angular4, ngx
Angulartics2
Vendor-agnostic analytics for Angular2 applications.
Stars: ✭ 963 (+337.73%)
Mutual labels: angular2, angular4, ngx
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 (+373.64%)
Mutual labels: upload, drag, drop
Ngx Avatar
Universal avatar component for angular 2+ applications makes it possible to fetch / generate avatar from different sources
Stars: ✭ 210 (-4.55%)
Mutual labels: angular2, angular4
Angular Google Maps
Angular 2+ Google Maps Components
Stars: ✭ 1,982 (+800.91%)
Mutual labels: angular2, angular4
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+848.18%)
Mutual labels: drag, drop
Angular Truffle Starter Dapp
Angular CLI + Truffle Starter Dapp; write, compile & deploy smart contracts on Ethereum blockchains
Stars: ✭ 174 (-20.91%)
Mutual labels: angular2, angular4
Ngx Inline Editor
Native UI Inline-editor Angular (4.0+) component
Stars: ✭ 172 (-21.82%)
Mutual labels: angular2, angular4
Angular Notifier
A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application.
Stars: ✭ 175 (-20.45%)
Mutual labels: angular2, angular4
Ngx Popper
An angular wrapper for popper.js, great for tooltips and positioning popping elements
Stars: ✭ 183 (-16.82%)
Mutual labels: angular2, angular4
Ngx Qrcode
An Angular 9/10 Component Library for Generating QR (Quick Response) Codes
Stars: ✭ 161 (-26.82%)
Mutual labels: angular2, angular4
Overview
An Angular 11 module for simple desktop file and folder drag and drop. This library does not need rxjs-compat.
For previous Angular support please use older versions.
This library relies on HTML 5 File API thus IE and Safari are not supported
DEMO
You can check the DEMO of the library
Installation
npm install ngx-file-drop --save
Usage
Importing The 'ngx-file-drop' Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NgxFileDropModule } from 'ngx-file-drop';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
NgxFileDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Enabling File Drag
import { Component } from '@angular/core';
import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
@Component({
selector: 'demo-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public files: NgxFileDropEntry[] = [];
public dropped(files: NgxFileDropEntry[]) {
this.files = files;
for (const droppedFile of files) {
// Is it a file?
if (droppedFile.fileEntry.isFile) {
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
fileEntry.file((file: File) => {
// Here you can access the real file
console.log(droppedFile.relativePath, file);
/**
// You could upload it like this:
const formData = new FormData()
formData.append('logo', file, relativePath)
// Headers
const headers = new HttpHeaders({
'security-token': 'mytoken'
})
this.http.post('https://mybackend.com/api/upload/sanitize-and-save-logo', formData, { headers: headers, responseType: 'blob' })
.subscribe(data => {
// Sanitized logo returned from backend
})
**/
});
} else {
// It was a directory (empty directories are added, otherwise only files)
const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
console.log(droppedFile.relativePath, fileEntry);
}
}
}
public fileOver(event){
console.log(event);
}
public fileLeave(event){
console.log(event);
}
}
<div class="center">
<ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
Optional custom content that replaces the the entire default content.
<button type="button" (click)="openFileSelector()">Browse Files</button>
</ng-template>
</ngx-file-drop>
<div class="upload-table">
<table class="table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody class="upload-name-style">
<tr *ngFor="let item of files; let i=index">
<td><strong>{{ item.relativePath }}</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
Parameters
Name | Description | Example |
---|---|---|
(onFileDrop) | On drop function called after the files are read | (onFileDrop)="dropped($event)" |
(onFileOver) | On drop over function | (onFileOver)="fileOver($event)" |
(onFileLeave) | On drop leave function | (onFileLeave)="fileLeave($event)" |
accept | String of accepted formats | accept=".png" |
directory | Whether directories are accepted | directory="true" |
dropZoneLabel | Text to be displayed inside the drop box | dropZoneLabel="Drop files here" |
dropZoneClassName | Custom style class name(s) to be used on the "drop-zone" area | dropZoneClassName="my-style" |
contentClassName | Custom style class name(s) to be used for the content area | contentClassName="my-style" |
[disabled] | Conditionally disable the dropzone | [disabled]="condition" |
[showBrowseBtn] | Whether browse file button should be shown | [showBrowseBtn]="true" |
browseBtnClassName | Custom style class name(s) to be used for the button | browseBtnClassName="my-style" |
browseBtnLabel | The label of the browse file button | browseBtnLabel="Browse files" |
multiple | Whether multiple or single files are accepted | multiple="true" |
useDragEnter | Use dragenter event instead of dragover | useDragEnter="true" |
License
Change Log
Donate Crypto
- Bitcoin: 18yJcRSyY7J9K7kHrkNQ2JspLfSgLKWUnh
- Ethereum: 0xdF1E80c91599CA6d4a8745888e658f45B86b0FEd
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].