{"id":20834488,"url":"https://github.com/komputronika/uploadfolder","last_synced_at":"2025-10-12T11:40:29.900Z","repository":{"id":217835903,"uuid":"240420707","full_name":"komputronika/UploadFolder","owner":"komputronika","description":"This script is for uploading a folder to a server by maintaining the structure of that folder. Using pure PHP, HTML and Javascript without additional libraries.","archived":false,"fork":false,"pushed_at":"2020-02-18T07:14:39.000Z","size":21,"stargazers_count":17,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-08T01:45:02.044Z","etag":null,"topics":["files","folder","googledrive","html","input","javascript","php","recursively","upload"],"latest_commit_sha":null,"homepage":"","language":"PHP","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/komputronika.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}},"created_at":"2020-02-14T03:31:46.000Z","updated_at":"2025-03-06T07:20:32.000Z","dependencies_parsed_at":"2024-01-18T13:07:58.707Z","dependency_job_id":"657a1120-6302-492a-81ab-a9539e7f76af","html_url":"https://github.com/komputronika/UploadFolder","commit_stats":null,"previous_names":["komputronika/uploadfolder"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/komputronika%2FUploadFolder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/komputronika%2FUploadFolder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/komputronika%2FUploadFolder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/komputronika%2FUploadFolder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/komputronika","download_url":"https://codeload.github.com/komputronika/UploadFolder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252983757,"owners_count":21835759,"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":["files","folder","googledrive","html","input","javascript","php","recursively","upload"],"created_at":"2024-11-18T00:19:26.675Z","updated_at":"2025-10-12T11:40:24.883Z","avatar_url":"https://github.com/komputronika.png","language":"PHP","readme":"# Upload Folder\n\nPure Javascript, HTML and PHP without any library\n\nThis demo allows you to choose a folder via a standard HTML file input. All files (including nested files) inside that folder are added to the input's files list. This script using `webkitdirectory` attribute that compatible with browser Chrome, Edge or Firefox.\n\nChoose a folder, and all files in that folder will be uploaded recursively (Inspiration came from Google Drive).\n\nSupported browser: Chrome, Edge, Firefox, Android, Samsung and other browsers that support [`webkitdirectory`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) attribut.\n\n### Installation\n\n1. Download or clone this repo\n2. Put the script on your web server's document root\n3. Open that folder in browser, eg: http://yourweb/uploadfolder/\n\n### Package Content\n\n1. HTML file that contain input element and user interfaces.\n2. CSS file for styling.\n3. Javascript file for handling file input and send request to server. \n4. PHP file that accept file from client and save file in server. \n\n### Screenshot\n\n\u003ca href=\"https://imgur.com/bCUHbvv\"\u003e\u003cimg src=\"https://i.imgur.com/bCUHbvv.png\" title=\"source: imgur.com\" /\u003e\u003c/a\u003e\n\n### Core Codes\n\n#### index.html\n\n```html\n    \u003ch3\u003eChoose Folder\u003c/h3\u003e\n    \u003cdiv class=\"picker\"\u003e\u003cinput type=\"file\" id=\"picker\" webkitdirectory multiple\u003e\u003c/div\u003e\n    \n    ...\n    \u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n```\n\n#### main.js\n\n```javascript\n    // On button input change (picker), process it\n    picker.addEventListener('change', e =\u003e {\n        ...\n        // Process every single file\n        for (var i = 0; i \u003c picker.files.length; i++) {\n            var file = picker.files[i];\n            sendFile(file, file.webkitRelativePath);\n        }\n    });\n\n    // Function to send a file, call PHP backend \n    sendFile = function(file, path) {\n        ...\n        // Set post variables \n        formData.set('file', file); // One object file\n        formData.set('path', path); // String of local file's path \n    \n        // Do request\n        request.open(\"POST\", 'process.php');\n        request.send(formData);\n    \n    };\n```    \n\n#### process.php\n```php\n    \u003c?php\n    require_once(\"include/upload.class.php\");\n    \n    $up = new Upload();\n    $up-\u003eset_folder(\"upload\");\n    $up-\u003eprocess($_POST[\"path\"], $_FILES[\"file\"]);\n    ?\u003e\n```\n### Todo\n\n* ~~Progress bar~~\n* Configurable Javascript\n* Composer style PHP class\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkomputronika%2Fuploadfolder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkomputronika%2Fuploadfolder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkomputronika%2Fuploadfolder/lists"}