{"id":21656963,"url":"https://github.com/cotag/a2-file-drop","last_synced_at":"2026-05-18T04:09:09.758Z","repository":{"id":57158287,"uuid":"49617616","full_name":"cotag/a2-file-drop","owner":"cotag","description":"Angular2 Directive and Service for managing dragging and dropping files onto a webpage","archived":false,"fork":false,"pushed_at":"2017-06-27T01:54:25.000Z","size":59,"stargazers_count":0,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T10:13:43.416Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cotag.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-14T02:41:21.000Z","updated_at":"2017-06-27T01:54:26.000Z","dependencies_parsed_at":"2022-09-02T14:00:52.082Z","dependency_job_id":null,"html_url":"https://github.com/cotag/a2-file-drop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cotag%2Fa2-file-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cotag%2Fa2-file-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cotag%2Fa2-file-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cotag%2Fa2-file-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cotag","download_url":"https://codeload.github.com/cotag/a2-file-drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244554121,"owners_count":20471173,"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":[],"created_at":"2024-11-25T09:18:30.399Z","updated_at":"2025-10-26T06:34:58.035Z","avatar_url":"https://github.com/cotag.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NOTE:: Merged into https://www.npmjs.com/package/@aca-1/a2-widgets\n\nThis repo is no longer maintained however this documentation is still quite accurate. You can see the up to date code here: https://github.com/acaprojects/a2-widgets/tree/master/src/services/drop-service\n\n\n# Introduction\n\nAllows you to place multiple drag and drop hotspots onto a webpage.\n\n* Multiple observable streams can be setup for dropped files\n* Multiple hotspots can provide files to a shared stream\n* Only one stream will highlight at a time (See note below)\n* Supports both drag and drop and file dialogs\n* File data is normalised for ease of use\n  * Where possible file path information is retained - if a folder is dropped\n\nNOTE: If multiple hotspots are defined for a single stream then all those\nhotspots will activate when a user hovers over any of them. This improves\ndiscoverability.\n\n\n## Usage\n\nNote:: You can create your own directive that is customised for your application.\n`DropService` does all the heavy lifting allowing maximum flexibility for app integration.\n\n### Drag and Drop Directive\n\n1. Include the directive in your Component or Directive\n     * `import {DropTarget} from 'a2-file-drop/dist/drop-target';`\n2. Add the directive to the target elements\n     * `\u003cdiv drop-target drop-stream=\"media-uploads\" drop-indicate=\"hover-class\"\u003e\u003c/div\u003e`\n\n### File Input Directive\n\n1. Include the directive in your Component or Directive\n     * `import {FileStream} from 'a2-file-drop/dist/file-stream';`\n2. Add the directive to the target elements\n     * `\u003cinput type=\"file\" multiple file-stream=\"media-uploads\"\u003e`\n\n### Processing the files once they have been dropped\n\n1. Create a service that will `import {DropService} from 'a2-file-drop/dist/drop-service';`\n2. Ensure dropservice is only initialised once `bootstrap(App, [DropService]);`\n3. Observe events coming from the relevent file stream\n    * Inject the dependency `constructor(dropService: DropService) {}`\n    * `var stream = dropService.getStream('media');`\n    * `stream.filter().map()` etc etc\n    * then:\n\n```typescript\n\nstream.subscribe((obj) =\u003e {\n    if (obj.data \u0026\u0026 obj.event === 'drop') {\n        obj.data.promise.then((data) =\u003e {\n            // At this point all file data has been collected\n            console.log(data.files);\n        });\n    }\n});\n\n// OR\n\nstream.filter((obj) =\u003e {\n    // Files only available on a drop event\n    return obj.data \u0026\u0026 obj.data.length \u003e 0;\n}).flatMap((obj) =\u003e {\n    // Wait for the files to be collected\n    return obj.data.promise;\n}).map((obj) =\u003e {\n    // Return just the array of files\n    return obj.files;\n}).subscribe((files) =\u003e {\n    console.log(files);\n});\n\n```\n\nThe subscription emit events:\n\n* `'over'`: There is currently a hover event\n* `'left'`: There is no more hover event\n* `'drop'`: Files have been dropped or selected\n\n\n## Options\n\n* `drop-target=\"#selector\"` if you want to use a different element as your actual target (html, body etc)\n    * This makes drop box style apps where the whole page is a drop target possible\n    * Defaults to the element defined on if no selector is provided\n* `drop-stream=\"stream name\"` is the name your upload logic will use to recieve dropped file data\n* `drop-indicate=\"class-name\"` is the class added to the drop-target when the mouse pointer is above\n\n\n## Building from src\n\nThe project is written in typescript and transpiled into ES5.\n\n1. Install TypeScript: `npm install -g typescript` (if you haven't already)\n2. Configure compile options in `tsconfig.json`\n3. Perform build using: `tsc`\n\nYou can find more information here: https://github.com/Microsoft/TypeScript/wiki/tsconfig.json\n\n## Scripts\n\n1. Build Script: `npm run build`\n2. Test Script: `npm run test`\n\n\n## Publishing\n\n1. Sign up to https://www.npmjs.com/\n2. Configure `package.json` https://docs.npmjs.com/files/package.json\n3. run `npm publish` https://docs.npmjs.com/cli/publish\n\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcotag%2Fa2-file-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcotag%2Fa2-file-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcotag%2Fa2-file-drop/lists"}