[feat]: show percentage progress during upload

zluipaiva commented 1 year ago

Related Issue

Closes: #20

Describe the add-ons or changes you've made

Added a div to show the upload progress at the centre of the load spinner. When the upload starts, the total file size is stored and the progress is updated every time the onStoredChunk callback from web3.storage is called. Also had to make some slight changes to the html structure to center the spinner + text elements.

Type of change

[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Code style update (formatting, local variables)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] This change requires a documentation update

How Has This Been Tested?

Tested using a random 10MB file and a 50MB file. I also tested with small files, but the chunks are at least 9MB each so depending on size we can't see the calculation being done (goes from 0 to 100%)

Checklist:

[x] My code follows the "contribution guidelines" of this project.
[x] I have performed a self-review of my own code.
[x] I have commented my code, particularly wherever it was hard to understand.
[x] My changes generate no new warnings.
[ ] Any dependent changes have been merged and published in downstream modules.

Screenshots (Only for Front End and UI/UX Designers)

Original	Updated
Original Screenshot	Updated Screenshot

zluipaiva commented 1 year ago

thanks! I don't use twitter but my discord is zluiz#8997

akhileshthite commented 1 year ago

thanks! I don't use twitter but my discord is zluiz#8997

Sure. I've opened some issues. Let me know if you're interested.

akhileshthite commented 1 year ago

thanks! I don't use twitter but my discord is zluiz#8997

Sure. I've opened some issues. Let me know if you're interested.

@zluipaiva Also, is it possible to decrease the frequency of progress percentage?

Like right now it's showing 0%-100% directly for smaller sized files, and 1%-24%-56%-100% for larger sized files. Is it possible to decrease that % frequency (1%-2%-3%-4%-5%...100%)?

zluipaiva commented 1 year ago

Sure. I've opened some issues. Let me know if you're interested.

Ok! maybe I will take a look next week

@zluipaiva Also, is it possible to decrease the frequency of progress percentage?

I think there are two ways of doing it, first would be to reduce the maxChunkSize from web3.storage api (we would have to upgrade to version 4.0.0). I tested and it works, the problem is that the upload seems to slow down by noticeable amount for larger files

The second way would be to increase the % by hand using a loop, just to give the impression of continuous loading

akhileshthite commented 1 year ago

Sure. I've opened some issues. Let me know if you're interested.

Ok! maybe I will take a look next week

@zluipaiva Also, is it possible to decrease the frequency of progress percentage?

I think there are two ways of doing it, first would be to reduce the maxChunkSize from web3.storage api (we would have to upgrade to version 4.0.0). I tested and it works, the problem is that the upload seems to slow down by noticeable amount for larger files

The second way would be to increase the % by hand using a loop, just to give the impression of continuous loading

I think second one would be a good option. My concern is, will it affect future builds if we upgrade the version?

What's your opinion? What do you think is the most ideal option for all aspects?

zluipaiva commented 1 year ago

I think second one would be a good option. My concern is, will it affect future builds if we upgrade the version?

What's your opinion? What do you think is the most ideal option for all aspects?

I also think the second option would be the best because it won't affect the upload time. I really don't know if there is a case where reducing the maxChunkSize will bring any benefits, but I don't think we should worry about it since we just want a visual improvement.

Anyway, the upgrade doesnt seem to break anything, but I haven't tested it that much (just to be clear the upgrade isnt required for option 2)

akhileshthite commented 1 year ago

I think second one would be a good option. My concern is, will it affect future builds if we upgrade the version? What's your opinion? What do you think is the most ideal option for all aspects?

I also think the second option would be the best because it won't affect the upload time. I really don't know if there is a case where reducing the maxChunkSize will bring any benefits, but I don't think we should worry about it since we just want a visual improvement.

Anyway, the upgrade doesnt seem to break anything, but I haven't tested it that much (just to be clear the upgrade isnt required for option 2)

Okay ✌️

p2plabsxyz / dscan