https://github.com/samundrak/fetch-progress

Progress of response for fetch API
https://github.com/samundrak/fetch-progress

ecmascript fetch javascript progress

Last synced: about 5 hours ago
JSON representation

Progress of response for fetch API

• Host: GitHub
• URL: https://github.com/samundrak/fetch-progress
• Owner: samundrak
• License: mit
• Created: 2018-04-05T18:33:08.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T19:40:05.000Z (over 1 year ago)
• Last Synced: 2024-09-19T18:07:38.022Z (14 days ago)
• Topics: ecmascript, fetch, javascript, progress
• Language: JavaScript
• Homepage: https://samundrak.github.io/fetch-progress/
• Size: 679 KB
• Stars: 85
• Watchers: 3
• Forks: 10
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# [Fetch Progress](https://samundrak.github.io/fetch-progress)

Progress of response for fetch API.

Get progress report of your response called from fetch like percentage, speed, total, transferred, eta and remaining.

## Install

`npm i fetch-progress`

## Usage

import `fetchProgress` method to your project

```js

import fetchProgress from 'fetch-progress

```

Now use `fetchProgress` method on your fetch calls, try to put this before using response. You can

```js

fetch(this.props.src)

    .then(

      fetchProgress({

        // implement onProgress method

        onProgress(progress) {

          console.log({ progress });

          // A possible progress report you will get

          // {

          //    total: 3333,

          //    transferred: 3333,

          //    speed: 3333,

          //    eta: 33,

          //    percentage: 33

          //    remaining: 3333,

          // }

        },

      })

    )

```

# Example

```js

import fetchProgress from '../index';

const self = this;

    fetch(this.props.src)

      .then(

        fetchProgress({

          onProgress(progress) {

            self.setState({ progress });

          },

          onError(err) {

            console.log(err);

          },

        })

      )

      .then(r => r.blob())

      .then(src => {

        this.src = URL.createObjectURL(src);

        this.setState({

          loaded: true,

        });

      });

```

# Demo

[Live Demo](https://samundrak.github.io/fetch-progress)

Clone this repo and run `npm i` and `npm run dev` which will start a server or you can see `examples/` folder in this repo.