socket.io-file icon indicating copy to clipboard operation
socket.io-file copied to clipboard

started is the only event that is triggered and the File is not uploading

Open ArvedE opened this issue 4 years ago • 0 comments

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)
    }
}

ArvedE avatar Jun 29 '20 20:06 ArvedE