Simple and easy way to upload file to node server with socketio/javascript?

Question

I've been trying modules and libraries for the last couple of hours. From socketio-fileupload to other of that sort. None worked for me. I just want something basic and simple if possible. I'm unable to transfer the file to the server. How can I do this with the least hassle possible?

html

client

function updateAvatar(){
$('.saveImage').on('click',function(){
        
var file = $('#imageUpload').val();
var filename = file.name;
var filesize = file.size;
var enc = file.encoding;
        
console.log(file);
        
socket.emit('update-avatar', {
data : file,
size : filesize,
name : filename,
enc : enc
}
);
});
}

server

socket.on('update-avatar',function(data){
    
console.log(data);
var filename = path.basename(data.name);
var filepath = path.join('./uploads', filename);  
    
});

user_12687061 · Answer

Here simple way to upload image to Nodejs using socketio. Works for me using FileReader(). No need for library just send everything through base64. You do need fs module(npm install fs). I'm posting the whole thing here.

With this code snippet you will be able to

Upload image/file from HTML with javascript fileReader
Encode/Decode base64 file
Transfer file in real time using socketio/nodejs

Server

//load fs module
const fs = require('fs');
    
/*
    
Upload file to folder
Send image back to client to display in real time
    
*/
    
socket.on('update-avatar',function(json){
        
//variables
var image = json.data.file;
var data = image.replace(/^data:image\/\w+;base64,/, '');
var fileName =  'user'+userid+Date.now() + "image.png";
        
//upload to folder
fs.writeFile("../user/upload/" + fileName, data, {encoding: 'base64'}, function(err){
        
        
if(err){
        
console.log(err);

}else{

//success
//return image back to js-client
io.to(socketid).emit('avatar-updated',{valid:'true',message:'success',buffer: data.toString('base64') 
});
}
});
});

client

/*

DISPLAY AVATAR

*/
document.getElementById("imageUpload").onchange = function () { displayAvatar() };

function displayAvatar() {
const file = document.getElementById("imageUpload").files[0];
const reader = new FileReader();
reader.onloadend = function () {
document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
$('.saveImage').show('slow');
$('.cancelImage').show('slow');
}
if (file) {
reader.readAsDataURL(file);
} else {
    
}
}
/*


UPLOAD AVATAR


*/
function updateAvatar(){

$(".saveImage").on('click', function() {
// validate type of file
if(['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].indexOf($("#imageUpload").get(0).files[0].type) == -1) {
alert('Error : Only JPEG, PNG & GIF allowed');
return;
}

var reader = new FileReader();
reader.onload = function(){
var $data = {'file': reader.result };

//send 
socket.emit('update-avatar',{data:$data});
};
reader.readAsDataURL($("#imageUpload").get(0).files[0]);    
});


}

/*FILE UPLOAD AVATAR.HTML*/
.avatar-upload {
position: relative;
max-width: 205px;
margin: 50px auto;
}
.avatar-upload .avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.avatar-upload .avatar-edit input {
display: none;
}
.avatar-upload .avatar-edit input + label {
display: inline-block;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
background: #f1f1f1;
border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
font-family: 'FontAwesome';
color: #757575;
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.avatar-upload .avatar-preview {
width: 192px;
height: 192px;
position: relative;
border-radius: 100%;
text-align: center !important;
border: 6px solid grey;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview > div {
background-image: url('');
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.saveImage{
display:none;
}
.cancelImage{
display:none;
}

Simple and easy way to upload file to node server with socketio/javascript?

1 Answers

Server

client