Breaking News: Grepper is joining You.com. Read the official announcement!

how to upload file using socketio

Imam-Zamana answered on August 20, 2024 Popularity 1/10 Helpfulness 1/10

answer how to upload file using socketio

how to upload file using socketio

Comment

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; // 1MB
            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>

Popularity 1/10 Helpfulness 1/10 Language python

Source: Grepper

Tags: file upload using whatever

Link to this answer
Share Copy Link

Contributed on Aug 20 2024

Imam-Zamana

0 Answers Avg Quality 2/10

how to upload file using socketio

Contents

More Related Answers

how to upload file using socketio

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.