{"id":13497505,"url":"https://github.com/georgipeltekov/ngx-file-drop","last_synced_at":"2025-05-14T14:10:21.987Z","repository":{"id":38867596,"uuid":"92404850","full_name":"georgipeltekov/ngx-file-drop","owner":"georgipeltekov","description":"Angular 11 file and folder drop library","archived":false,"fork":false,"pushed_at":"2025-01-22T06:34:32.000Z","size":4881,"stargazers_count":298,"open_issues_count":34,"forks_count":103,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-12T03:46:44.401Z","etag":null,"topics":["7","angular10","angular11","angular2","angular4","angular7","angular8","angular9","drag","drop","file-drop","file-upload","folder","ngx","upload"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/georgipeltekov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-25T13:14:03.000Z","updated_at":"2025-04-01T18:17:23.000Z","dependencies_parsed_at":"2024-01-10T15:15:29.265Z","dependency_job_id":"24d24002-3064-462d-b16f-bca266800a79","html_url":"https://github.com/georgipeltekov/ngx-file-drop","commit_stats":{"total_commits":250,"total_committers":37,"mean_commits":6.756756756756757,"dds":0.728,"last_synced_commit":"07a5fecec285d8a8f97715022ecb55ae6666e5dd"},"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgipeltekov%2Fngx-file-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgipeltekov%2Fngx-file-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgipeltekov%2Fngx-file-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgipeltekov%2Fngx-file-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/georgipeltekov","download_url":"https://codeload.github.com/georgipeltekov/ngx-file-drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160558,"owners_count":22024571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["7","angular10","angular11","angular2","angular4","angular7","angular8","angular9","drag","drop","file-drop","file-upload","folder","ngx","upload"],"created_at":"2024-07-31T20:00:32.187Z","updated_at":"2025-05-14T14:10:16.978Z","avatar_url":"https://github.com/georgipeltekov.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","Third Party Components"],"sub_categories":["Uncategorized","File Upload"],"readme":"[![npm](https://img.shields.io/npm/v/ngx-file-drop.svg?style=flat-square)](https://www.npmjs.com/package/ngx-file-drop) [![npm downloads](https://img.shields.io/npm/dm/ngx-file-drop.svg)](https://www.npmjs.com/package/ngx-file-drop) [![Travis](https://img.shields.io/travis/georgipeltekov/ngx-file-drop.svg?style=flat-square)](https://travis-ci.org/georgipeltekov/ngx-file-drop) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/georgipeltekov/ngx-file-drop/blob/master/LICENSE)\n\n## Overview\n\nAn Angular module for simple desktop file and folder drag and drop. This library does not need rxjs-compat.\n\nFor previous Angular support please use older versions.\n\nThis library relies on HTML 5 File API thus IE is not supported\n\n## DEMO\nYou can check the [DEMO](https://georgipeltekov.github.io/) of the library \n\n## Installation\n\n```bash\nnpm install ngx-file-drop --save\n```\n\n## Usage\n\n\n### Importing The 'ngx-file-drop' Module\n\n```TypeScript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HttpClientModule } from '@angular/common/http';\n\nimport { AppComponent } from './app.component';\nimport { NgxFileDropModule } from 'ngx-file-drop';\n\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpClientModule,\n    NgxFileDropModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n### Enabling File Drag\n\n\n```TypeScript\nimport { Component } from '@angular/core';\nimport { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';\n\n@Component({\n  selector: 'demo-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n\n  public files: NgxFileDropEntry[] = [];\n\n  public dropped(files: NgxFileDropEntry[]) {\n    this.files = files;\n    for (const droppedFile of files) {\n\n      // Is it a file?\n      if (droppedFile.fileEntry.isFile) {\n        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;\n        fileEntry.file((file: File) =\u003e {\n\n          // Here you can access the real file\n          console.log(droppedFile.relativePath, file);\n\n          /**\n          // You could upload it like this:\n          const formData = new FormData()\n          formData.append('logo', file, relativePath)\n\n          // Headers\n          const headers = new HttpHeaders({\n            'security-token': 'mytoken'\n          })\n\n          this.http.post('https://mybackend.com/api/upload/sanitize-and-save-logo', formData, { headers: headers, responseType: 'blob' })\n          .subscribe(data =\u003e {\n            // Sanitized logo returned from backend\n          })\n          **/\n\n        });\n      } else {\n        // It was a directory (empty directories are added, otherwise only files)\n        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;\n        console.log(droppedFile.relativePath, fileEntry);\n      }\n    }\n  }\n\n  public fileOver(event){\n    console.log(event);\n  }\n\n  public fileLeave(event){\n    console.log(event);\n  }\n}\n\n\n```\n```HTML\n\u003cdiv class=\"center\"\u003e\n    \u003cngx-file-drop dropZoneLabel=\"Drop files here\" (onFileDrop)=\"dropped($event)\" \n    (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\"\u003e\n        \u003cng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\"\u003e\n          Optional custom content that replaces the the entire default content.\n          \u003cbutton type=\"button\" (click)=\"openFileSelector()\"\u003eBrowse Files\u003c/button\u003e\n        \u003c/ng-template\u003e\n    \u003c/ngx-file-drop\u003e\n    \u003cdiv class=\"upload-table\"\u003e\n        \u003ctable class=\"table\"\u003e\n            \u003cthead\u003e\n                \u003ctr\u003e\n                    \u003cth\u003eName\u003c/th\u003e\n                \u003c/tr\u003e\n            \u003c/thead\u003e\n            \u003ctbody class=\"upload-name-style\"\u003e\n                \u003ctr *ngFor=\"let item of files; let i=index\"\u003e\n                    \u003ctd\u003e\u003cstrong\u003e{{ item.relativePath }}\u003c/strong\u003e\u003c/td\u003e\n                \u003c/tr\u003e\n            \u003c/tbody\u003e\n        \u003c/table\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Parameters\n\nName  | Description | Example | \n------------- | ------------- | -------------\n(onFileDrop)  | On drop function called after the files are read | (onFileDrop)=\"dropped($event)\"\n(onFileOver)  | On drop over function| (onFileOver)=\"fileOver($event)\"\n(onFileLeave)  | On drop leave function| (onFileLeave)=\"fileLeave($event)\"\naccept  | String of accepted formats | accept=\".png\"\ndirectory  | Whether directories are accepted | directory=\"true\"\ndropZoneLabel  | Text to be displayed inside the drop box | dropZoneLabel=\"Drop files here\"\ndropZoneClassName  | Custom style class name(s) to be used on the \"drop-zone\" area | dropZoneClassName=\"my-style\"\ncontentClassName  | Custom style class name(s) to be used for the content area | contentClassName=\"my-style\"\n\\[disabled\\]  | Conditionally disable the dropzone  | \\[disabled\\]=\"condition\"\n\\[showBrowseBtn\\]  | Whether browse file button should be shown  | \\[showBrowseBtn\\]=\"true\"\nbrowseBtnClassName | Custom style class name(s) to be used for the button | browseBtnClassName=\"my-style\"\nbrowseBtnLabel  | The label of the browse file button  | browseBtnLabel=\"Browse files\"\nmultiple  | Whether multiple or single files are accepted  | multiple=\"true\"\nuseDragEnter  | Use dragenter event instead of dragover  | useDragEnter=\"true\"\n\n## License\n\n[MIT](/LICENSE)\n\n## Change Log\n\n[CHANGELOG](/CHANGELOG.md)\n\n## Donate Crypto\n* Bitcoin: 18yJcRSyY7J9K7kHrkNQ2JspLfSgLKWUnh\n* Ethereum: 0xdF1E80c91599CA6d4a8745888e658f45B86b0FEd\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgipeltekov%2Fngx-file-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeorgipeltekov%2Fngx-file-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgipeltekov%2Fngx-file-drop/lists"}