{"id":43500423,"url":"https://github.com/zhanziyang/file-dropzone","last_synced_at":"2026-02-03T11:20:03.766Z","repository":{"id":57235419,"uuid":"95676246","full_name":"zhanziyang/file-dropzone","owner":"zhanziyang","description":"Drop files anywhere on your web page. Based on jQuery.","archived":false,"fork":false,"pushed_at":"2017-07-05T09:44:12.000Z","size":64,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-03T23:41:21.478Z","etag":null,"topics":["drag-and-drop","droppable","dropzone","file","file-drop","jquery","upload"],"latest_commit_sha":null,"homepage":"https://zhanziyang.github.io/file-dropzone/example/","language":"JavaScript","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/zhanziyang.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":"2017-06-28T14:13:32.000Z","updated_at":"2024-04-17T12:54:29.000Z","dependencies_parsed_at":"2022-09-12T09:32:02.660Z","dependency_job_id":null,"html_url":"https://github.com/zhanziyang/file-dropzone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zhanziyang/file-dropzone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanziyang%2Ffile-dropzone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanziyang%2Ffile-dropzone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanziyang%2Ffile-dropzone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanziyang%2Ffile-dropzone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhanziyang","download_url":"https://codeload.github.com/zhanziyang/file-dropzone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanziyang%2Ffile-dropzone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29044106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T10:09:22.136Z","status":"ssl_error","status_checked_at":"2026-02-03T10:09:16.814Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["drag-and-drop","droppable","dropzone","file","file-drop","jquery","upload"],"created_at":"2026-02-03T11:20:03.114Z","updated_at":"2026-02-03T11:20:03.724Z","avatar_url":"https://github.com/zhanziyang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# file-dropzone\nA simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds files.\n\n```js\nvar myDropzone = new FileDropzone({\n  target: '#box',\n  fileHoverClass: 'entered',\n  clickable: true,\n  multiple: true,\n  forceReplace: false,\n  paramName: 'my-file',\n  accept: '',\n  onChange: function () {\n    var files = this.getFiles()\n    var elem = this.element\n    elem.empty()\n    files.forEach(function (item) {\n      elem.append('\u003cdiv class=\"file-name\"\u003e' + item.name + '\u003c/div\u003e')\n    })\n  },\n  onEnter: function () {\n    console.log('enter')\n  },\n  onLeave: function () {\n    console.log('leave')\n  },\n  onHover: function () {\n    console.log('hover')\n  },\n  onDrop: function () {\n    console.log('drop')\n  },\n  onInvalid: function (files) {\n    console.log('file invalid')\n    console.log(files)\n  },\n  beforeAdd: function () {\n    return true\n  }\n})\n```\n\n## Construtor\n\n```js\n// method 1\nvar options = {}\nnew FileDropzone($('#container'), options)\n\n// method 2\nvar options = { target: '#container' }\nnew FileDropzone(options)\n```\n\n## Options\n\n| option         | type     | explain                                                                                                                                                                                                            | default                |\n|----------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------|\n| **target**         | string   | css selector string. specifies which element you want to be a dropzone                                                                                                                                             |                        |\n| **fileHoverClass** | string   | class name that will be added to target element when file dragged over it                                                                                                                                          | `'dropzone--file-hover'` |\n| **clickable**      | boolean  | whether the file choosing window will pop up when target element is clicked                                                                                                                              | `true`                   |\n| **multiple**       | boolean  | whether the dropzone can hold multiple files                                                                                                                                                                       | `true`                   |\n| **noFolder**       | boolean  | whether to filter out folders when dropping                                                                                                                                                                       | `true`                   |\n| **unique**         | boolean  | whether to ignore duplicate files when adding                                                                                                                                                                      | `false`                  |\n| **forceReplace**   | boolean  | whether to replace the existing file list when adding. If set to `false`, new files will append to the list                                                                                                          | `false`                  |\n| **accept**         | string   | mimetype or file extensions separated by comma to specify a certain types of files the dropzone accepts                                                                                                            |                        |\n| **capture**        | boolean  | same as `input[type=file]` element's `capture` attribute                                                                                                                                                               | `true`                   |\n| **paramName**      | string   | same as `input[type=file]` element's `name` attribute                                                                                                                                                                  | `'file'`                 |\n| **onChange**       | function | called when file list length changed                                                                                                                                                                               |                        |\n| **onEnter**        | function | called when file dragged enters the target element. accepts 1 argument which is native `dragenter` event object.                                                                                                     |                        |\n| **onLeave**        | function | called when file dragged leaves the target element. accepts 1 argument which is native `dragleave` event object.                                                                                                     |                        |\n| **onHover**        | function | called when file dragged moves on the target element. accepts 1 argument which is native `dragover` event object.                                                                                                    |                        |\n| **onDrop**         | function | called when file dropped into to target element. accepts 1 argument which is native `drop` event object.                                                                                                             |                        |\n| **onFolderFound**      | function | called when on or more folders found among the files user chooses. accepts 1 argument which is an array of the folders (they are also File objects).                                                                              |                        |\n| **onInvalid**      | function | called when invalid type files found among the files user chooses. accepts 1 argument which is an array of the spotted invalid files.                                                                              |                        |\n| **beforeAdd**      | function | called right before adding new files to the list. accepts 1 argument which is an array of the valid files that are about to be added to the list. If the function return `false`, the adding action will be stopped. |                        |\n\n## Methods\n\n#### getFiles()\n\n- Returns an array of files ([File](https://developer.mozilla.org/en-US/docs/Web/API/File) object) which are currently in the dropzone.\n\n#### removeFile(foo)\n\n- args:\n  - `foo`: (File object or Number) if `foo` is a file which is already in the file list, it will be removed from the list. If `foo` is a number, the number indicates the index of file that will be removed.\n- Returns the removed file if it is removed successfully, otherwise returns `null`.\n\n#### pop()\n\n- This method tries to remove the last file from the current file list.\n- Returns the removed file or `null` if the list is empty.\n\n#### shift()\n\n- This method tries to remove the first file from the current file list.\n- Returns the removed file or `null` if the list is empty.\n\n#### clearAll()\n\n- This method tries to clear the current file list ,making it an empty array.\n\n#### openFileChooser()\n\n- This method programmatically opens the file choosing window of os for user to add files.\n\n#### disable()\n\n- This method disables click and drag\u0026drop to prevent file adding, which is enabled by default.\n\n#### enable()\n\n- This method does the opposite to `disable()`.\n\n#### disableClick()\n\n- This method prevent file choosing window of os to pop up on click, which is enabled by default.\n\n#### enableClick()\n\n- This method does the opposite to `disableClick()`.\n\n#### `static` getFileSize(file, unit)\n\n- args:\n  - `file`: (File object) the file whose size you want to get.\n  - `unit`: specifies the unit. It should be one of these: b, kb, mb, gb, tb.\n- Returns file size (Number) in the unit specified.\n- This is a static method. You should call it on the `FileDropzone` constructor.\n\n```js\nvar file = myDropzone.getFiles()[0]\nvar size = FileDropzone.getFileSize(file, 'mb')\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhanziyang%2Ffile-dropzone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhanziyang%2Ffile-dropzone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhanziyang%2Ffile-dropzone/lists"}