javascript fetch file upload and get progress

Question

I want to upload a video to the server. I want to show the progress in ui. After uploading my server sends me message and I want to display that to the user..

Here is what I am doing by looking at some so questions

function consume(reader) {
  var total = 0
  return new Promise((resolve, reject) => {
    function pump() {
      reader.read().then(({done, value}) => {
        if (done) {     
          resolve(reader)
        }
        total += value.byteLength
        console.log("total", total)
        pump()
      }).catch(reject)
    }
    pump()
  })
}

var request = dispatch(api_put({url: 'add_video', data: data}
                    )).then(response => {
                        return consume(response.body.getReader()) // dont give server response
                        // return response.json() // gives proper server response
                    }).then(response => {
                        var message = response.message // my server message
                        // do something after upload and message

                    })

Here I am getting the total uploaded byte I guess.. but I am not getting the proper server response then.. If I do response.json it gives me proper server response else it doesnt ..

Is there any better approach by which I get progress and my server response ?

What is the issue with above code ??