socket.io-file
socket.io-file copied to clipboard
started is the only event that is triggered and the File is not uploading
I implemented the Code like your Example. The Event started is triggered but after that nothing happened in the code. In the uploadDir you can find the File but its broken and has size 0. Frontend:
var uploadAvatarForm = document.getElementById('uploadAvatarForm')
var uploader = new SocketIoFileClient(this.$socket)
uploader.on('start', function(fileInfo) {
console.log('Start uploading', fileInfo);
});
uploader.on('stream', function(fileInfo) {
console.log('Streaming... sent ' + fileInfo.sent + ' bytes.');
});
uploader.on('complete', function(fileInfo) {
console.log('Upload Complete', fileInfo);
});
uploader.on('error', function(err) {
console.log('Error!', err);
});
uploader.on('abort', function(fileInfo) {
console.log('Aborted: ', fileInfo);
});
uploadAvatarForm.onsubmit = function(ev) {
ev.preventDefault()
var fileEl = document.getElementById('uploadAvatarFile')
var uploadIds = uploader.upload(fileEl)
};
Backend:
io.on('connection', async socket => {
try {
//Avatar upload
;(() => {
var uploader = new socketIoFile(socket, {
uploadDir: './public/dist/avatars',
accepts: ['image/png', 'image/jpeg'],
maxFileSize: 4194304,
chunkSize: 10240,
transmissionDelay: 0,
overwrite: true,
rename: filename => {
var file = path.parse(filename)
var ext = file.ext;
return '${RandomString(20)}${ext}'
}
})
uploader.on('start', (fileInfo) => {
console.log('Start uploading')
console.log(fileInfo)
})
uploader.on('stream', (fileInfo) => {
console.log('${fileInfo.wrote} / ${fileInfo.size} byte(s)')
})
uploader.on('complete', (fileInfo) => {
console.log('Upload Complete.')
console.log(fileInfo)
})
uploader.on('error', (err) => {
console.log('Error!', err)
})
uploader.on('abort', (fileInfo) => {
console.log('Aborted: ', fileInfo)
})
})()
}catch(error){
config.log('Error caught in io.on:', error)
}
}