{"id":15637149,"url":"https://github.com/chanced/filedrop-svelte","last_synced_at":"2025-04-07T15:06:34.829Z","repository":{"id":39906607,"uuid":"389849863","full_name":"chanced/filedrop-svelte","owner":"chanced","description":"File dropzone for Svelte.","archived":false,"fork":false,"pushed_at":"2024-03-09T23:27:13.000Z","size":359,"stargazers_count":113,"open_issues_count":9,"forks_count":12,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T13:17:26.253Z","etag":null,"topics":["drag-and-drop","dropzone","file","svelte"],"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/chanced.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2021-07-27T04:38:28.000Z","updated_at":"2025-01-30T19:50:49.000Z","dependencies_parsed_at":"2024-06-18T18:38:03.109Z","dependency_job_id":"9f148d86-2dc1-4b40-9a7e-49d5d29640bb","html_url":"https://github.com/chanced/filedrop-svelte","commit_stats":{"total_commits":66,"total_committers":4,"mean_commits":16.5,"dds":0.06060606060606055,"last_synced_commit":"9a6070765043567576bf2e90f4f1012f81996587"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffiledrop-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffiledrop-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffiledrop-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffiledrop-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chanced","download_url":"https://codeload.github.com/chanced/filedrop-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247675597,"owners_count":20977376,"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":["drag-and-drop","dropzone","file","svelte"],"created_at":"2024-10-03T11:10:26.949Z","updated_at":"2025-04-07T15:06:34.811Z","avatar_url":"https://github.com/chanced.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FileDrop\n\nA file dropzone action \u0026 component for [Svelte](https://svelte.dev/).\n\n## Install\n\n```bash\nnpm i filedrop-svelte -D\n\n# yarn add filedrop-svelte -dev\n```\nIf using Typescript, see the [Typescript section](#typescript).\n## Usage\n\nfiledrop-svelte comes with both a component and an action. The component is basically a wrapper around the action with some some default styling.\n\n### Component\n\nSee [this REPL for minmimal usage](https://svelte.dev/repl/511ad04931514bcf98f7408edb08d075?version=3.41.0).\n\n```html\n\u003cscript\u003e\n\timport FileDrop from \"filedrop-svelte\";\n\timport type { Files } from \"filedrop-svelte\";\n\timport fileSize from \"filesize\";\n\tlet files: Files;\n\u003c/script\u003e\n\n\u003cFileDrop on:filedrop={(e) =\u003e { files = e.detail.files }}\u003e\n        Upload files\n\u003c/FileDrop\u003e\n\n{#if files}\n\t\u003ch3\u003eAccepted files\u003c/h3\u003e\n\t\u003cul\u003e\n\t\t{#each files.accepted as file}\n\t\t\t\u003cli\u003e{file.name} - {fileSize(file.size)}\u003c/li\u003e\n\t\t{/each}\n\t\u003c/ul\u003e\n\t\u003ch3\u003eRejected files\u003c/h3\u003e\n\t\u003cul\u003e\n\t\t{#each files.rejected as rejected}\n\t\t\t\u003cli\u003e{rejected.file.name} - {rejected.error.message}\u003c/li\u003e\n\t\t{/each}\n\t\u003c/ul\u003e\n{/if}\n```\n\n### Action\n\nSee this [REPL for minimal usage](https://svelte.dev/repl/645841f327b8484093f94b84de8a7e64?version=3.41.0).\n\n```html\n\u003cscript\u003e\n\timport { filedrop } from \"filedrop-svelte\";\n\timport type { Files, FileDropOptions } from \"filedrop-svelte\";\n\tlet options: FileDropOptions = {};\n\tlet files: Files;\n\u003c/script\u003e\n\n\u003cdiv use:filedrop={options} on:filedrop={(e) =\u003e {files = e.detail.files}}\u003e\n\t\u003c!-- you can add your input[type=\"file\"] here if you want.\n\tor you can omit it and it'll be appended --\u003e\n\tDrag \u0026amp; drop files\n\t{files}\n\u003c/div\u003e\n```\n\n## Reference\n\n### Options\n\n| parameter       | purpose                                                                                                                                                                                                                                                   | type                | default     |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |\n| `accept`        | specify file types to accept. See [HTML attribute: accept on MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more information.                                                                                     | `string` `string[]` | `undefined` |\n| `maxSize`       | the maximum size a file can be in bytes.                                                                                                                                                                                                                  | `number`            | `undefined` |\n| `minSize`       | the minimum size a file can be in bytes.                                                                                                                                                                                                                  | `number`            | `undefined` |\n| `fileLimit`     | total number of files allowed in a transaction. A value of 0 disables the action/component, 1 turns multiple off, and any other value enables multiple. Any attempt to upload more files than allowed will result in the files being placed in rejections | `numer`             | `undefined` |\n| `multiple`      | sets the file input to `multiple`. See [HTML attribute: multiple on MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) for more information.                                                                            | `boolean`           | `true`      |\n| `disabled`      | disables the action/component, removing all event listeners                                                                                                                                                                                               | `boolean`           | `false`     |\n| `windowDrop`    | determines whether or not files can be dropped anywhere in the window. A value of `false` would require that the files be droppped within the `\u003cFileDrop\u003e` component or the element with `use:filedrop`.                                                  | `boolean`           | `true`      |\n| `clickToUpload` | causes the containing element to be treated as the input. If hideInput is true or undefined, disabling this does not change the `tabindex` of the container or remove the `keydown` eventListener                                                         | `boolean`           | `true`      |\n| `tabIndex`      | tab index of the container. if `disabled` is `true` then this is set to `-1`. If `clickToUpload` is `true` or `undefined`, this defaults to 0.                                                                                                            | `number`            | `0`         |\n| `hideInput`     | if true or undefined, input[type='file'] will be set to display:none                                                                                                                                                                                      | `boolean`           | `true`      |\n| `input`         | allows you to explicitly pass a reference to the file `HTMLInputElement` as a parameter. If `undefined`, the action will search for `input[type=\"file\"]`. If one is not found, it will be appeneded to the element with `use:filedrop`                    | `HTMLInputElement`  | `undefined` |\n\n### Events\n\n| event                 | description                                                                                                              | `event.detail`        |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------- |\n| `filedrop`            | one or more files has been selected in the file dialog or drag-and-dropped                                               | `FileDropSelectEvent` |\n| `filedragenter`       | a dragenter event has occurred on the container element containnig one or more files                                     | `FileDropDragEvent`   |\n| `filedragleave`       | a dragleave event has occurred on the container element containing one or more files                                     | `FileDropDragEvent`   |\n| `filedragover`        | a dragover event has occurred on the container element containing one or more files                                      | `FileDropDragEvent`   |\n| `filedialogcancel`    | the file dialog has been canceled without selecting files                                                                | `FileDropEvent`       |\n| `filedialogclose`     | the file dialog has been closed with files selected                                                                      | `FileDropEvent`       |\n| `filedialogopen`      | the file dialog has been opened                                                                                          | `FileDropEvent`       |\n| `windowfiledragenter` | a dragenter event has occurred on the document (event is named windowfiledragenter so not to confuse document with file) | `FileDropDragEvent`   |\n| `windowfiledragleave` | a dragleave event has occurred on the document (event is named windowfiledragleave so not to confuse document with file) | `FileDropDragEvent`   |\n| `windowfiledragover`  | a dragover event has occurred on the document (event is named windowfiledragover so not to confuse document with file)   | `FileDropDragEvent`   |\n\n### Errors\n\n| class                          | reason                                                        | code                              |\n| ------------------------------ | ------------------------------------------------------------- | --------------------------------- |\n| `InvalidFileTypeError`         | file type does not satisfy `accept`                           | `InvalidFileType` (**0**)         |\n| `FileCountExceededError`       | total number of files selected or dropped exceeds `fileLimit` | `FileCountExceeded` (**1**)       |\n| `FileSizeMinimumNotMetError`   | file does not satisify `minSize`                              | `FileSizeMinimumNotMet` (**2**)   |\n| `FileSizeMaximumExceededError` | file does not satisify `maxSize`                              | `FileSizeMaximumExceeded` (**3**) |\n\n### Typescript\n\nIn order for typings to work properly, you'll need to add the following to\n`global.d.ts` [until this issue is\nresolved](https://github.com/sveltejs/language-tools/issues/431):\n\n```typescript\ndeclare type FileDropEvent = import(\"filedrop-svelte/event\").FileDropEvent;\ndeclare type FileDropSelectEvent = import(\"filedrop-svelte/event\").FileDropSelectEvent;\ndeclare type FileDropDragEvent = import(\"filedrop-svelte/event\").FileDropDragEvent;\ndeclare namespace svelte.JSX {\n    interface HTMLAttributes\u003cT\u003e {\n        onfiledrop?: (event: CustomEvent\u003cFileDropSelectEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onfiledragenter?: (event: CustomEvent\u003cFileDropDragEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onfiledragleave?: (event: CustomEvent\u003cFileDropDragEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onfiledragover?: (event: CustomEvent\u003cFileDropDragEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onfiledialogcancel?: (event: CustomEvent\u003cFileDropEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onfiledialogclose?: (event: CustomEvent\u003cFileDropEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onfiledialogopen?: (event: CustomEvent\u003cFileDropEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onwindowfiledragenter?: (event: CustomEvent\u003cFileDropDragEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onwindowfiledragleave?: (event: CustomEvent\u003cFileDropDragEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n        onwindowfiledragover?: (event: CustomEvent\u003cFileDropDragEvent\u003e \u0026 { target: EventTarget \u0026 T }) =\u003e void;\n    }\n}\n```\n\nYou may need to edit `tsconfig.json` to include `global.d.ts` if it isn't already.\n\n### Alternatives\n\n-   [svelte-file-dropzone](https://github.com/thecodejack/svelte-file-dropzone)\n\n### Previous art\n\n-   [react-dropzone](https://github.com/react-dropzone/react-dropzone)\n-   [svelte-file-dropzone](https://github.com/thecodejack/svelte-file-dropzone)\n\n### Dependencies\n\n-   [file-selector](https://github.com/react-dropzone/file-selector)\n\n## Todo\n\n-   tests\n-   better documentation\n-   demo website\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanced%2Ffiledrop-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanced%2Ffiledrop-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanced%2Ffiledrop-svelte/lists"}