pip install flask flask-socketio
# app.py
from flask import Flask, request
from flask_socketio import SocketIO, emit
import os
app = Flask(__name__)
socketio = SocketIO(app)
@socketio.on('upload_file')
def handle_file_upload(data):
file_data = data['file']
filename = data['filename']
total_size = data['total_size']
chunk_size = data['chunk_size']
# Open the file for writing in binary mode
with open(filename, 'ab') as f:
f.write(file_data)
# Calculate the progress
file_size = os.path.getsize(filename)
progress = (file_size / total_size) * 100
# Emit the progress to the frontend
emit('upload_progress', {'progress': progress})
if __name__ == '__main__':
socketio.run(app, debug=True)
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Progress</title>
</head>
<body>
<input type="file" id="fileInput">
<progress id="progressBar" value="0" max="100"></progress>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<script>
const socket = io();
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
const chunkSize = 1024 * 1024;
let offset = 0;
const reader = new FileReader();
reader.onload = function(e) {
const fileData = e.target.result;
socket.emit('upload_file', {
file: fileData,
filename: file.name,
total_size: file.size,
chunk_size: chunkSize,
});
};
const readChunk = () => {
const chunk = file.slice(offset, offset + chunkSize);
reader.readAsArrayBuffer(chunk);
offset += chunkSize;
if (offset < file.size) {
readChunk();
}
};
readChunk();
});
socket.on('upload_progress', (data) => {
progressBar.value = data.progress;
});
</script>
</body>
</html>