Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/girish1729/progress-up
Progress.up HTML5 multiple files upload progress indicator with image preview
https://github.com/girish1729/progress-up
file-uploader html5 http image-preview progress-bar
Last synced: about 1 month ago
JSON representation
Progress.up HTML5 multiple files upload progress indicator with image preview
- Host: GitHub
- URL: https://github.com/girish1729/progress-up
- Owner: girish1729
- License: mit
- Created: 2022-10-15T06:04:53.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-25T09:30:46.000Z (4 months ago)
- Last Synced: 2024-09-26T00:08:44.343Z (about 2 months ago)
- Topics: file-uploader, html5, http, image-preview, progress-bar
- Language: JavaScript
- Homepage: https://progress-up.live
- Size: 112 MB
- Stars: 59
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Progress-up - File Uploader for HTTPS
## What is this?
Progress-up is a HTTPS multiple files Upload plugin with progress bar
indicator.
There is support for 10 types of progress displays.
> Plugins for Angular, Svelte, Vue and React
This uses the [HTTP File API](https://www.w3.org/TR/FileAPI/) to show continuous progress.
>This is the very first attempt to create a clean no frills upload plugin
>in 100% Typescript. Now available for Angular, Vue, Svelte and React.
Uses the HTML input file for file uploads.
[Canonical home page](https://progress-up.live)
## Demo
[Live demo](https://luxury-kangaroo-af6a24.netlify.app/)
Other demos are [here](https://progress-up.live/demo)
## Configuration
There are two types of configuration in Progress-up.
- Static config.json with one time values
- Dynamic config with runtime form filling
A sample static config is `config.json` inside the root directory of
proect.
```json
{
"uploadURL": "https://localhost:2324/uploadmultiple",
"filesName": "uploadFiles",
"progressType": "Line"
}
```
You can choose one of 10 progress types.
- Line
- Fan
- Bubble
- Energy
- Rainbow
- Stripe
- Text
- Circle
## How to build and run as plain js
### The backend is [CORS enabled](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing).
So you don't have to deal with pesky same origin security errors with
file uploads. Also each plugin enables you to name the file array in the
HTML `` file selector.
By specifying backend URL and file name in `input HTML element` file
upload is no longer a hassle.
With that out of the way let us focus on the frontend.
```shell
$ git clone https://github.com/girish1729/progress.up
$ cd progress.up/backend
$ yarn install
# or
$ npm install
$ mkdir uploads
$ npm start
```
You also need live-server.
```shell
# npm install -g live-server
```
Go to [https://localhost:2324](https://localhost:2324)
and try uploading files.
You may use manual upload.
The uploaded files are present in `backend/uploads` folder.
## Backend
This backend is [Node.js HTTP server express.js](https://expressjs.com) with [multer middleware](http://expressjs.com/en/resources/middleware/multer.html)
> This ensures that this code is platform agnostic.
> Most issues with file upload plugins extant today hover around
> not specifying backend correctly. Not making it easy to use.
> Not explaining what should be the input file name attribute etc.
>
We require a backend that accepts `multipart/form-data` as upload
protocol.
Also the name of the `