rico345100 / socket.io-file

Socket.io-file is a node module for uploading file via Socket.io module
MIT License
48 stars 19 forks source link

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

Open ArvedE opened 4 years ago

ArvedE commented 4 years ago

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