Large file upload in Flask

This will be a difficult task for your to figure out on your own. I would suggest a plugin like https://blueimp.github.io/jQuery-File-Upload/

You can see from this projects source code they use a method name which essentially looks at how large the file is and how much data has been transferred thus far and how much remains to show a percentage complete div.

code example from this project

progressall: function (e, data) {                var $this = $(this);                $this.find('.fileupload-progress')                    .find('.progress').progressbar(                        'option',                        'value',                        parseInt(data.loaded / data.total * 100, 10)                    ).end()                    .find('.progress-extended').each(function () {                        $(this).html(                            ($this.data('blueimp-fileupload') ||                                    $this.data('fileupload'))                                ._renderExtendedProgress(data)                        );                    });            }

https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-jquery-ui.js

So if you do want to come up with your own solution, I would suggest you start by building a UI div rectangle which has a dynamic width which updates according to your percentage calculation based upon the file upload size and data uploaded... or just go with an already established solution.