How do I send image to server via socket.io?

As you mentioned, you can convert the image to base64 using FileReader.readAsDataURL and send the encoded string, and decode it on the server:

document.getElementById('file').addEventListener('change', function() { const reader = new FileReader(); reader.onload = function() { const base64 = this.result.replace(/.*base64,/, ''); socket.emit('image', base64); }; reader.readAsDataURL(this.files[0]); }, false); 

socket.on('image', async image => { const buffer = Buffer.from(image, 'base64'); await fs.writeFile('/tmp/image', buffer).catch(console.error); // fs.promises }); 

Or better use FileReader.readAsArrayBuffer to get an array of bytes that you'll send to the server.

document.getElementById('file').addEventListener('change', function() { const reader = new FileReader(); reader.onload = function() { const bytes = new Uint8Array(this.result); socket.emit('image', bytes); }; reader.readAsArrayBuffer(this.files[0]); }, false); 

socket.on('image', async image => { // image is an array of bytes const buffer = Buffer.from(image); await fs.writeFile('/tmp/image', buffer).catch(console.error); // fs.promises }); 

To receive from the server:

// Server side socket.emit('image', image.toString('base64')); // image should be a buffer 

// Client side socket.on('image', image => { // create image with const img = new Image(); // change image type to whatever you use, or detect it in the backend // and send it if you support multiple extensions img.src = `data:image/jpg;base64,${image}`; // Insert it into the DOM }); 

Base64 can work, but one more thing to keep in mind is that socket buffer size limit is 1 MB. (This can be increased according to docs).

So I guess if the file size is huge, its better to stream it with something like socket.io-stream

i don't know if any one is looking for it anymore but I made possible to send media via socket.io... here is the code:

// sending media from client side $("#send_media").change(function (e) { var data = e.originalEvent.target.files[0]; var reader = new FileReader(); reader.onload = function (evt) { var msg = {}; msg.file = evt.target.result; msg.fileName = data.name; socket.emit("base64 file", msg); console.log(msg) }; reader.readAsDataURL(data); }); // showing media to ui socket.on("base64 image", (msg) => { console.log("as", msg); $(".messages") .append(`<img src=${msg.file} alt="Red dot" />`); scrollToBottom(); }); 

// sending media from server side socket.on("base64 file", function (msg) { console.log("received base64 file from server: " + msg.fileName); socket.username = msg.username; io.to(roomId).emit('base64 image', //exclude sender // io.sockets.emit( // "base64 file", //include sender { file: msg.file, fileName: msg.fileName, } ); });