uploading image files inside consumers.py with Django-Channels

[remoteconn-7891]

I need some help with implementing uploading/receiving image files between end-users with Django-Channels/Websockets inside Consumers.

Here are my consumers.py and also I'm using VueJS as the frontend.

import json
from channels.exceptions import StopConsumer
from channels.generic.websocket import AsyncJsonWebsocketConsumer


# Channel consumer for both chat room group

class ChatConsumer(AsyncJsonWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = f'chat_{self.room_name}'
        
        # Join room group
        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
        
        await self.accept()
        
        
    async def disconnect(self, close_code):

        # Leave room group
        await self.channel_layer.group_discard(self.room_group_name, self.channel_layer)
        
    # Receive message from WebSocket
    
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        
        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name, {'type': 'chat.message', 'message': message}
        )
        
    # Receive message from room group
    
    async def re(self, event):
        message = event['message']
        
        # send message to websocket
        await self.send(text_data=json.dumps({'message': message}))
        
        
# Channel Consumer that consumed events for uploading/receiving image files in the message room

class UploadImageConsumer(AsyncJsonWebsocketConsumer):
    async def connect(self):
        await self.accept()
        

    async def disconnect(self, close_code):
        raise StopConsumer()
    
    
    async def receive(self, bytes_data=None, text_data=None):
        if bytes_data:          
            # Handles image file chunks (binary data)
            
            with open('uploaded_image.jgp', 'ab') as f:
                f.write(bytes_data)
            await self.send(text_data=json.dumps({'message': 'Image chunk received'}))
        elif text_data:
            # Handles metadata (text data)
            
            await self.sesnd(text_data=json.dumps({'message': text_data}))
            
            
    async def send_image(self, event):
        image_data = event['image_text']
        await self.send(bytes_data=image_data)

Sorry I'm still new to Django-Channels/Websockets. The files uploaded (images) don't need to be large in bytes. Please let me know if you to see additional relevant files in my Django project

[legend048]

Hey there,

I've taken a look at your code and have a few suggestions that might help resolve the issues you’re facing:

first you have one typo:

await self.sesnd(text_data=json.dumps({'message': text_data}))

corrected:

await self.send(text_data=json.dumps({'message': text_data}))

File Writing:

Using 'ab' to append binary chunks is a good start. However, consider how you’ll determine when the full image has been received. You might need to implement a protocol for signaling the start and end of the file transfer (e.g., sending metadata indicating chunk boundaries or a final chunk).

synchronous File I/O:

Although for small files synchronous writes can be acceptable, if you expect any scale or larger file sizes in the future, exploring asynchronous file handling could be beneficial.

Other Consideration:

File Naming & Extension:

The file is currently saved as uploaded_image.jgp. You probably want to change the extension to .jpg, and to avoid conflicts (especially in multi-user scenarios), generate a unique filename per upload.

[remoteconn-7891]

Okay I fixed the syntax errors you mentioned. How should I go about the file handling, that is integrating a protocol for signaling start/end of file transfer to the frontent? Are there any links you can provide me?

Also some resource links for asynchronous file handling? I've heard that importing base64 is good for this also

[remoteconn-7891]

Here is my edited consumers.py

import json
from channels.exceptions import StopConsumer
from channels.generic.websocket import AsyncJsonWebsocketConsumer
import base64


# Channel consumer for both chat room group

class ChatConsumer(AsyncJsonWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name
        
        # Join room group
        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
        
        await self.accept()
        
        
    async def disconnect(self, close_code):

        # Leave room group
        await self.channel_layer.group_discard(self.room_group_name, self.channel_layer)
        
    # Receive message from WebSocket
    
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        
        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name, {'type': 'chat.message', 'message': message}
        )
        
    # Receive message from room group
    
    async def re(self, event):
        message = event['message']
        
        # send message to websocket
        await self.send(text_data=json.dumps({'message': message}))
        
        
# Channel Consumer that consumed events for uploading/receiving image files in the message room

class UploadImageConsumer(AsyncJsonWebsocketConsumer):
    async def connect(self):
        await self.accept()
        

    async def disconnect(self, close_code):
        raise StopConsumer()
    
    
    async def receive(self, bytes_data=None, text_data=None):
        if bytes_data:          
            # Handles image file chunks (binary data)
            
            with open('image.jpg', 'rb') as f:
                fcontent = f.read()
            await self.send(base64.b64encode(fcontent).decode('utf-8'))
        elif text_data:
            # Handles metadata (text data)
            
            await self.send(text_data=json.dumps({'message': text_data}))
            
            
    async def send_image(self, event):
        image_data = event['image_text']
        await self.send(bytes_data=image_data)
        ```