{"id":13565727,"url":"https://github.com/silverwind/uppie","last_synced_at":"2025-04-05T20:06:53.133Z","repository":{"id":35463157,"uuid":"39731032","full_name":"silverwind/uppie","owner":"silverwind","description":"Cross-browser directory and multi-file upload library","archived":false,"fork":false,"pushed_at":"2024-04-13T19:12:35.000Z","size":541,"stargazers_count":158,"open_issues_count":0,"forks_count":24,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T09:50:09.155Z","etag":null,"topics":["browser","directory-upload","file-upload","javascript"],"latest_commit_sha":null,"homepage":"","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/silverwind.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-07-26T15:49:32.000Z","updated_at":"2024-06-18T17:10:10.581Z","dependencies_parsed_at":"2023-02-14T01:55:18.396Z","dependency_job_id":"1e84867e-b93c-480f-9839-fc4bb659e528","html_url":"https://github.com/silverwind/uppie","commit_stats":{"total_commits":322,"total_committers":4,"mean_commits":80.5,"dds":0.009316770186335366,"last_synced_commit":"48ff66bc4682da047b6990463da6d45bf2c2eb52"},"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silverwind%2Fuppie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silverwind%2Fuppie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silverwind%2Fuppie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silverwind%2Fuppie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/silverwind","download_url":"https://codeload.github.com/silverwind/uppie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393569,"owners_count":20931812,"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":["browser","directory-upload","file-upload","javascript"],"created_at":"2024-08-01T13:01:54.024Z","updated_at":"2025-04-05T20:06:53.116Z","avatar_url":"https://github.com/silverwind.png","language":"JavaScript","readme":"# uppie\n[![](https://img.shields.io/npm/v/uppie.svg?style=flat)](https://www.npmjs.org/package/uppie) [![](https://img.shields.io/npm/dm/uppie.svg)](https://www.npmjs.org/package/uppie) [![](https://img.shields.io/bundlephobia/minzip/uppie.svg)](https://bundlephobia.com/package/uppie) [![](https://packagephobia.com/badge?p=uppie)](https://packagephobia.com/result?p=uppie)\n\n\u003e Cross-browser file and directory and upload library\n\n`uppie` is a tiny JavaScript library which helps you with file and directory uploads in browsers. It supports all current and past implementations of multi-file and directory uploads and provides you with a `FormData` object you can submit directly to a server through either `XMLHttpRequest` or `fetch`. Both the `\u003cinput type=\"file\"\u003e` element and drag-and-drop are supported.\n\n## Usage\n```bash\nnpm install uppie\n```\n```js\nimport {uppie} from 'uppie';\n\nuppie(document.querySelector('#file'), async (e, formData, files) =\u003e {\n  await fetch('/upload', {method: 'POST', body: formData});\n});\n```\n\n## Browser support\n\n|| files via input[type=file] | files via DnD | directories via input[type=file] | directories via DnD |\n|---------|---------------------- |---------------|----------------------|--------------|\n| Firefox | yes                   | yes           | yes (50+)            | yes (50+)    |\n| Chrome  | yes                   | yes           | yes (29+)            | yes (29+)    |\n| Edge    | yes                   | yes           | yes (13+)            | yes (14+)    |\n| Safari  | yes                   | yes           | yes (11.1+)          | yes (11.1+)  |\n\n## Notes\n\n- Empty directories are excluded from the results by all browsers as dictated by the spec.\n- Firefox and Safari exclude files and directories starting with a `.`.\n\n## API\n### uppie(node, [opts], callback)\n- `node` *Node* or *NodeList*: One or more DOM nodes. If a `\u003cinput type=\"file\"\u003e` is given, uppie will monitor it for `change` events. Any other element type will be enabled as a dropzone and watched for `drop` events. If you want to use both on the same element, use a hidden `\u003cinput\u003e` and forward the click event.\n- `opts` *Object*: A options object which can contain:\n  - `name`: The `name` attribute for creating the FormData entries. Default: `\"files[]\"`.\n- `callback` *Function*: callback which is called every time the selected files change or when files are dropped in the dropzone.\n\nThe callback receives\n\n- `event` *Event*: the original event. Useful for calling `event.stopPropagation()`.\n- `formData` *FormData*: FormData object to be used for XHR2 uploading.\n- `files` *Array*: Array of paths for preview purposes.\n\n#### FormData format\n\n`name` defaults to `\"files[]\"`, `filename` will be the full path to the file, with `/` used as path separator. Does not include a leading slash. Make sure to sanitize `filename` on the server before writing it to the disk to prevent exploits involving `..` in the path. Example FormData:\n\n```\n------Boundary\nContent-Disposition: form-data; name=\"files[]\"; filename=\"docs/1.txt\"\nContent-Type: text/plain\n\n[DATA]\n------Boundary\nContent-Disposition: form-data; name=\"files[]\"; filename=\"docs/path/2.txt\"\nContent-Type: text/plain\n\n[DATA]\n------Boundary\nContent-Disposition: form-data; name=\"files[]\"; filename=\"docs/path/to/3.txt\"\nContent-Type: text/plain\n```\n\n## Recommended `input` element attributes\n\n- `multiple`: allow multiple files or directories to be selected.\n- `webkitdirectory`: enable directory uploads.\n\n## PHP example\n\nBelow is example for PHP 7.0 and possibly earlier versions. PHP does not parse the path from the `filename` field, so it is necessary to submit the path through other means, like as separate FormData fields as done in the example.\n\n````js\nimport {uppie} from 'uppie';\n\nconst uppie = new Uppie();\n\nuppie(document.documentElement, (event, formData, files) =\u003e {\n  files.forEach(path =\u003e {\n    formData.append(\"paths[]\", path);\n  });\n\n  const xhr = new XMLHttpRequest();\n  xhr.open('POST', 'upload.php');\n  xhr.send(formData);\n});\n````\nAnd in `upload.php`:\n````php\nforeach ($_FILES['files']['name'] as $i =\u003e $name) {\n  if (strlen($_FILES['files']['name'][$i]) \u003e 1) {\n    $fullpath = strip_tags($_POST['paths'][$i]);\n    $path = dirname($fullpath);\n\n    if (!is_dir('uploads/'.$path)){\n      mkdir('uploads/'.$path);\n    }\n    if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'uploads/'.$fullpath)) {\n        echo '\u003cli\u003e'.$name.'\u003c/li\u003e';\n    }\n  }\n}\n````\n\nNote that PHP's [upload limits](http://php.net/manual/en/ini.core.php#ini.sect.file-uploads) might need to be raised depending on use case.\n\n© [silverwind](https://github.com/silverwind), distributed under BSD licence\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilverwind%2Fuppie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsilverwind%2Fuppie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilverwind%2Fuppie/lists"}