{"id":29460926,"url":"https://github.com/hecht-a/dropzone","last_synced_at":"2026-06-23T13:31:56.060Z","repository":{"id":59215403,"uuid":"535048220","full_name":"hecht-a/dropzone","owner":"hecht-a","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-23T07:39:27.000Z","size":122,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-17T11:21:30.692Z","etag":null,"topics":["dropzone","npm","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@hecht-a/dropzone","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/hecht-a.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":"2022-09-10T16:04:56.000Z","updated_at":"2022-09-15T11:55:21.000Z","dependencies_parsed_at":"2023-01-30T18:00:33.951Z","dependency_job_id":null,"html_url":"https://github.com/hecht-a/dropzone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"hecht-a/template-typescript-package","purl":"pkg:github/hecht-a/dropzone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hecht-a%2Fdropzone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hecht-a%2Fdropzone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hecht-a%2Fdropzone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hecht-a%2Fdropzone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hecht-a","download_url":"https://codeload.github.com/hecht-a/dropzone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hecht-a%2Fdropzone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34691730,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["dropzone","npm","typescript"],"created_at":"2025-07-14T02:38:48.065Z","updated_at":"2026-06-23T13:31:56.028Z","avatar_url":"https://github.com/hecht-a.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Quickstart\n\nInstall:\n\n```bash\nnpm install --save @hecht-a/dropzone\n# or with yarn\nyarn add @hecht-a/dropzone\n# or with pnpm\npnpm install @hecht-a/dropzone\n```\n\nUse as **ES6 module**:\n\n```js\nimport {Dropzone} from '@hecht-a/dropzone'\n\nconst input = document.querySelector('input#id')\nconst dropzone = new Dropzone(input, {})\n```\n\nOr use as **CommonJS module**:\n\n```js\nconst {Dropzone} = require('@hecht-a/dropzone')\n\nconst input = document.querySelector('input#id')\nconst dropzone = new Dropzone(input, {})\n```\n\n## Documentation\n\n### Options\n\nOptions are defined in the second argument of the Dropzone constructor in an object.  \nFor example:\n\n```js\nconst input = document.querySelector('input#id')\nconst dropzone = new Dropzone(input, {\n    id: 'id'\n})\n```\n\nAll these options are optionnal.\n\n|                  name                   |                                       description                                        |                                   type                                   | default value  |\n|:---------------------------------------:|:----------------------------------------------------------------------------------------:|:------------------------------------------------------------------------:|:--------------:|\n|                   id                    |                            Custom id to apply to the dropzone                            |                                  string                                  |   \"dropzone\"   |\n|                  label                  |                          Define the label shown on the dropzone                          |                                  string                                  | \"Upload files\" |\n|               hoverLabel                |                 Define the label shown on the dropzone when it's hovered                 |                                  string                                  |    \"hover\"     |\n|                   min                   | Define the minimum amount of file(s) to upload (see [Dropzone#setMin](#dropzonesetmin))  |                                  number                                  |       0        |\n|                   max                   | Define the maximum amount of file(s) to upload  (see [Dropzone#setMax](#dropzonesetmax)) |                                  number                                  |       2        |\n|            containerTemplate            |                        Define the global template of the dropzone                        | `(max: number, files?: FileList, label?: string, id?: string) =\u003e string` |       -        |\n|              fileTemplate               |            Define the template of the file container when a file is uploaded             |                      `(fileName: string) =\u003e string`                      |       -        |\n|            [onHover](#hover)            |                                 Define the event `hover`                                 |                               `() =\u003e void`                               |       -        |\n|            [onLeave](#leave)            |                                Define the event `onLeave`                                |                               `() =\u003e void`                               |       -        |\n|          [onAddFile](#addfile)          |                                Define the event `addFile`                                |                          `(file: File) =\u003e void`                          |       -        |\n|         [onAddFiles](#addfiles)         |                               Define the event `addFiles`                                |                        `(file: FileList) =\u003e void`                        |       -        |\n|           [onError](#onerror)           |                                 Define the event `error`                                 |                         `(error: Error) =\u003e void`                         |       -        |\n|            [onDrop](#ondrop)            |                                 Define the event `drop`                                  |                       `(files: FileList) =\u003e void`                        |       -        |\n|       [onDragEnter](#ondragenter)       |                               Define the event `dragEnter`                               |                               `() =\u003e void`                               |       -        |\n|       [onDragLeave](#ondragleave)       |                               Define the event `dragLeave`                               |                               `() =\u003e void`                               |       -        |\n|        [onDragOver](#ondragover)        |                               Define the event `dragOver`                                |                               `() =\u003e void`                               |       -        |\n| [onRefreshDropzone](#onrefreshdropzone) |                            Define the event `refreshDropzone`                            |                               `() =\u003e void`                               |       -        |\n|      [onRemoveFile](#onremovefile)      |                              Define the event `removeFile`                               |                          `(file: File) =\u003e void`                          |       -        |\n|   [onClearDropzone](#oncleardropzone)   |                             Define the event `clearDropzone`                             |                       `(files: FileList) =\u003e void`                        |       -        |\n\n### Events\n\nEvents are received with:\n\n```js\ndropzone.on('event_name', callback)\n```\n\nwhere `event_name` is the name of the targeted event, `callback` is what you want to execute when the event is received.\n\n#### hover\nEvent fired when the mouse is hovering the dropzone.\n\n#### leave\nEvent fired when the mouse leave the dropzone area.\n\n#### addFile\nEvent fired when a file is uploaded to the dropzone.\n\n#### addFiles\nEvent fired when multiple files are uploaded to the dropzone.\n\n#### onError\nEvent fired when an error is thrown.\n\n#### onDrop\nEvent fired when a file is drop on the dropzone.\n\n#### onDragEnter\nEvent fired when the mouse enter on the dropzone are with a file.\n\n#### onDragLeave\nEvent fired when the mouse enter on the dropzone area with a file.\n\n#### onDragOver\nEvent fired when the mouse is hovering the dropzone with a file.\n\n#### onRefreshDropzone\nEvent fired when the dropzone is refreshed.  \nThe dropzone is refresh when:\n- one or multiple file(s) is / are uploaded\n- a file is removed\n- the dropzone is cleared\n\n#### onRemoveFile\nEvent fired when a file is removed.\n\n#### onClearDropzone\nEvent fired when the dropzone is cleared. See [Dropzone#clearDropzone](#dropzonecleardropzone).\n\n## Methods\n### Dropzone#clearDropzone\nRemove all the files uploaded in the dropzone.\nUse:\n```js\nconst input = document.querySelector('input#id')\nconst dropzone = new Dropzone(input, {})\ndropzone.clearFiles()\n```\n\n### Dropzone#setMin\nSet the minimum amount of files.\nUse:\n```js\nconst input = document.querySelector('input#id')\nconst dropzone = new Dropzone(input, {})\ndropzone.setMin(2)\n```\n\n### Dropzone#setMax\nSet the maximum amount of files.\nUse:\n```js\nconst input = document.querySelector('input#id')\nconst dropzone = new Dropzone(input, {})\ndropzone.setMax(5)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhecht-a%2Fdropzone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhecht-a%2Fdropzone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhecht-a%2Fdropzone/lists"}