{"id":15064394,"url":"https://github.com/girish1729/progress-up","last_synced_at":"2025-04-09T15:02:12.390Z","repository":{"id":61854528,"uuid":"551807140","full_name":"girish1729/progress-up","owner":"girish1729","description":"Progress.up HTML5 multiple files upload progress indicator with image preview","archived":false,"fork":false,"pushed_at":"2025-01-18T23:39:02.000Z","size":117197,"stargazers_count":59,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T07:48:28.804Z","etag":null,"topics":["file-uploader","html5","http","image-preview","progress-bar"],"latest_commit_sha":null,"homepage":"https://progress-up.live","language":"JavaScript","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/girish1729.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"Waiting for you to sponsor me"}},"created_at":"2022-10-15T06:04:53.000Z","updated_at":"2025-01-18T23:39:05.000Z","dependencies_parsed_at":"2024-10-06T12:36:58.205Z","dependency_job_id":"ff478402-bfac-4ba4-9f7a-1494ae0c0744","html_url":"https://github.com/girish1729/progress-up","commit_stats":{"total_commits":186,"total_committers":3,"mean_commits":62.0,"dds":"0.016129032258064502","last_synced_commit":"d60b2f7b45d142ce24d43a1d927aad6ea80dd43a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/girish1729%2Fprogress-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/girish1729%2Fprogress-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/girish1729%2Fprogress-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/girish1729%2Fprogress-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/girish1729","download_url":"https://codeload.github.com/girish1729/progress-up/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055274,"owners_count":21040154,"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":["file-uploader","html5","http","image-preview","progress-bar"],"created_at":"2024-09-25T00:17:07.673Z","updated_at":"2025-04-09T15:02:12.362Z","avatar_url":"https://github.com/girish1729.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Waiting for you to sponsor me","https://www.buymeacoffee.com/girish1729"],"categories":[],"sub_categories":[],"readme":"# Progress-up - File Uploader for HTTPS\n\n![Progess-up](https://raw.githubusercontent.com/girish1729/progress.up/main/images/progress-up-logo.svg)\n\n## What is this?\n\nProgress-up is a HTTPS multiple files Upload plugin with progress bar\nindicator.\n\nThere is support for 10 types of progress displays.\n\n![Progess-up progress types](https://raw.githubusercontent.com/girish1729/progress.up/main/backend/public/images/progress-types.png)\n\n\n\u003e Plugins for Angular, Svelte, Vue and React\n\nThis uses the [HTTP File API](https://www.w3.org/TR/FileAPI/) to show continuous progress.\n\n\u003eThis is the very first attempt to create a clean no frills upload plugin\n\u003ein 100% Typescript. Now available for Angular, Vue, Svelte and React.\n\nUses the HTML input file for file uploads.\n\n[Canonical home page](https://progress-up.live)\n\n## Demo\n\n [Live demo](https://luxury-kangaroo-af6a24.netlify.app/)\n \n\nOther demos are [here](https://progress-up.live/demo)\n\n## Configuration\n\nThere are two types of configuration in Progress-up.\n\n- Static config.json with one time values\n- Dynamic config with runtime form filling\n\nA sample static config is `config.json` inside the root directory of\nproect.\n\n```json\n\n{\n         \"uploadURL\": \"https://localhost:2324/uploadmultiple\",\n         \"filesName\": \"uploadFiles\",\n         \"progressType\": \"Line\"\n}\n  \n```\n\nYou can choose one of 10 progress types.\n\n\n- Line\n- Fan\n- Bubble\n- Energy\n- Rainbow\n- Stripe\n- Text\n- Circle\n\n\n## How to build and run as plain js\n\n### The backend is [CORS enabled](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing).\n\nSo you don't have to deal with pesky same origin security errors with\nfile uploads. Also each plugin enables you to name the file array in the\nHTML `\u003cinput\u003e` file selector.\n\nBy specifying backend URL and file name in `input HTML element` file\nupload is no longer a hassle.\n\nWith that out of the way let us focus on the frontend.\n\n```shell\n$ git clone https://github.com/girish1729/progress.up\n\n$ cd progress.up/backend\n$ yarn install\n\n# or\n\n$ npm install\n\n$ mkdir uploads\n\n$ npm start\n```\n\nYou also need live-server.\n\n```shell\n# npm install -g live-server\n```\n\nGo to [https://localhost:2324](https://localhost:2324)\n\n and try uploading files.\n\nYou may use manual upload.\n\nThe uploaded files are present in `backend/uploads` folder.\n\n## Backend\n\nThis backend is [Node.js HTTP server express.js](https://expressjs.com) with [multer middleware](http://expressjs.com/en/resources/middleware/multer.html)\n\n\u003e This ensures that this code is platform agnostic.\n\u003e Most issues with file upload plugins extant today hover around\n\u003e not specifying backend correctly. Not making it easy to use.\n\u003e Not explaining what should be the input file name attribute etc.\n\u003e \n\nWe require a backend that accepts `multipart/form-data` as upload\nprotocol.\n\nAlso the name of the `\u003cinput type='file` attribute should `myFiles`.\n\n## Frontend - the plugin itself\n\nIt is using the HTML5 File API.\n\nThis is a clean way to get progress indicator for file uploads.\n\n## Instructions for Angular, Vue, Svelte and React\n\n\n```shell\n\t$ npm install progress-up-angular\n# or \n\t$ yarn add progress-up-angular\n```\n### Vue 3\n\n```shell\n\t$ npm install progress-up-vue\n# or \n\t$ yarn add progress-up-vue\n```\n### React.js\n\n```shell\n\t$ npm install progress-up-react\n# or \n\t$ yarn add progress-up-react\n```\n### Svelte\n\n```shell\n\t$ npm install progress-up-svelte\n# or \n\t$ yarn add progress-up-svelte\n```\n\n\n## Detailed instructions\n\n- [Developer docs](https://progress-up.live/docs)\n- [Vue](https://progress-up.live/docs/vue-docs)\n- [Svelte.ts](https://progress-up.live/docs/svelte-docs)\n- [Angular](https://progress-up.live/docs/angular-docs)\n- [React](https://progress-up.live/docs/react-docs)\n\n## Screenshots gallery\n\nSome are here. For complete list \n[go here](https://progress-up.live/screenshots)\n\n### Video of drag and drop\n\n ![Video of Drag and drop](https://raw.githubusercontent.com/girish1729/progress.up/main/images/dnd.gif)\n\n### Video of upload \n\n ![Video of upload](https://raw.githubusercontent.com/girish1729/progress.up/main/images/progress-video.gif)\n\n### Dark mode\n\n ![Dark mode](https://raw.githubusercontent.com/girish1729/progress.up/main/images/progress-up-darkmode.png)\n\n### Preview before upload\n\n ![Preview](https://raw.githubusercontent.com/girish1729/progress.up/main/images/progress-up-preview2.png)\n\n### Fully uploaded view\n\n ![Fully uploaded](https://raw.githubusercontent.com/girish1729/progress.up/main/images/progress-up-fullyuploaded.png)\n\n\n## Why should you care?\n\nIf you allow multiple large files upload then a progress indicator is a\ncool way to give user feedback.\n\nNowadays HTML5 File API based progress is the best way to achieve your\ngoal.\n\nThere is support for blocking uploads based on total size, individual\nsize and MIME type.\n\n## Screencast of upload\n\n![Progess.up screencast](https://raw.githubusercontent.com/girish1729/progress.up/main/images/progress-uploading.gif)\n\n## Resources for file upload\n\n- [tus.io](https://tus.io)\n\n- [Express multer](http://expressjs.com/en/resources/middleware/multer.html)\n\n- [HTML5 File API](https://jenkov.com/tutorials/html5/file-api.html)\n\n- [Uploading files over HTTP\n  article](https://themightyprogrammer.dev/article/uploading-files)\n\n## Testimonials \n\n![Testimonial from\nStaylight](https://raw.githubusercontent.com/girish1729/progress.up/main/images/testimonial-staylight.png)\n\n\n## Collaboration\n\nIf you wish to collaborate or send pull requests \nplease get in touch using my Github profile.\n\nIf you cannot write code, then buying me a coffee can work as well.\n\n\n## Alternatives\n\n- [Uppy](https://github.com/transloadit/uppy)\n- [UploadThing](https://uploadthing.com/)\n- [DropIt](https://github.com/ThalKod/DropIt)\n- [Resumable.js](https://github.com/23/resumable.js)\n- [Filepond](https://github.com/pqina/filepond)\n- [Krajee bootstrap file input](https://github.com/kartik-v/bootstrap-fileinput)\n- [Dropzone](https://github.com/dropzone/dropzone)\n\n## Contact\n\nYou can [DM me on Twitter](https://twitter.com/girish1729) for help/suggestions.\n\nYou can [follow me](https://twitter.com/intent/follow?screen_name=girish1729\n) for updates.\n\n## Tweet this to followers\n\n\u003ca class=\"twitter-share-button mr-10\" href=\"https://twitter.com/intent/tweet?text=Tweet+this+to+your+followers\u0026url=https%3A%2F%2Fgithub.com%2Fgirish1729%2Fprogress.up\u0026hashtags=github\u0026original_referer=http%3A%2F%2Fgithub.com%2F\u0026tw_p=tweetbutton\" target=\"_blank\" data-size=\"large\"\u003e\n       \u003cimg src=\"https://raw.githubusercontent.com/girish1729/progress.up/main//images/tweet.png\" alt=\"Tweet this\" /\u003e\n\u003c/a\u003e\n\n## Sponsor me using crypto\n\n[\u003cimg src=\"https://api.gitsponsors.com/api/badge/img?id=551807140\" height=\"20\"\u003e](https://api.gitsponsors.com/api/badge/link?p=v4LeMgCHEaLKwZ2rJnh+sAEPZt9WWjd0Zk+JyY37F7EbI9XoLtVVtfZMfesmkLXKqJj2LKAZ3JsN6QZ/XwlS77aH6Ckx222Da3WQN9LSow4HcUL+WJ84jn95CDSf4nY27mr9p9HhklpRepHrosBexw==)\n\n\n\n## Buy me a coffee to accelerate development\n\n\u003ca href=\"https://www.buymeacoffee.com/girish1729\" target=\"_blank\"\u003e\u003cimg\nsrc=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\u003c/a\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgirish1729%2Fprogress-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgirish1729%2Fprogress-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgirish1729%2Fprogress-up/lists"}