Theo's Typesafe Cult•14mo ago

To build global loader to view file upload status

I wanna make a loader where we can see the files being uploaded like in google drive . can anyone something for this I am using next js and thinking to use zustand to handle the global state , does anybody have example for this or any suggestion , do I need to store the api response to the localstorage ?

3 Replies

chdir•14mo ago

Something like a progress bar for showing how much of the total data is uploaded to the server?

prat1kgupta•14mo ago

yeah But I want it to show on all the pages , so that the user can watch the progress while exploring other stuff on my web application

chdir•14mo ago

Ok, If you need to display it as an overlay. Set the z-index of the element to be the highest on the page. And also render the component on the page statically. Which framework are you using? If you're using axios, you can just configure an onUploadProgress event in the config for axios

const config = {
    onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}

const req = axios('/api/upload', data, config)

const config = {
    onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}

const req = axios('/api/upload', data, config)

Gaming

Programming

To build global loader to view file upload status