Large file upload in Flask

Question

I am trying to implement a flash application to download files. This file can be very large. For example, the size is almost 2G.

I completed the server side processing process as follows:

@app.route("/upload/<filename>", methods=["POST", "PUT"]) def upload_process(filename): filename = secure_filename(filename) fileFullPath = os.path.join(application.config['UPLOAD_FOLDER'], filename) with open(fileFullPath, "wb") as f: chunk_size = 4096 while True: chunk = flask.request.stream.read(chunk_size) if len(chunk) == 0: return f.write(chunk) return jsonify({'filename': filename}) 

As for the browser side, I have to give users the ability to send the file. One file at a time. Show a progress indicator to indicate the download process. But I have no idea about the browser code. How can I use javascript code to start the download and show its status?

Answer 1

It will be a difficult task for you to figure it out on your own. I would suggest a plugin like https://blueimp.imtqy.com/jQuery-File-Upload/

You can see from this project source code that they use a method name that basically considers how big the file is and how much data has been transferred so far, and how much percent full div remains to show.

sample code 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 want to come up with your own solution, I would suggest starting with creating a rectangle div UI that has a dynamic width that is updated according to your percentage calculation based on the file upload size and the downloaded data. or just go with an already installed solution.