Starting but not uploading

[benoitlahoz]

I'm using SocketIOFileUpload in a modular Express+Nuxt.js application.

On the client side I'm relying on the VueSocket.io library to connect through socket.io, so I ended up making a VueSocketIOFileUpload plugin to make it available in all my components.

The instance of SockettIOFileUpload is created by passing the this.$socket instance returned by VueSocket.io

Vue.prototype.$uploader = new SocketIOFileUpload(Vue.prototype.$socket)

Then I can access to the instance in my app through this.$uploader

Client-side

// I tried this
this.$uploader.listenOnInput(document.getElementById('siofu_input_0'))
// and this, with an element with ref="upload"
this.$uploader.listenOnDrop(this.$refs.upload)

this.$uploader.addEventListener("error", function(data){
  console.log('error')
  console.log(data)
  if (data.code === 1) {
    alert("Don't upload such a big file");
  }
})
this.$uploader.addEventListener("choose", function(data){
  console.log('choose')
  console.log(data)

})
this.$uploader.addEventListener("start", function(data){
  console.log('start')
  console.log(data)

})
this.$uploader.addEventListener("progress", function(data){
  console.log('progress')
  console.log(data)

})
this.$uploader.addEventListener("load", function(data){
  console.log('load')
  console.log(data)
})
this.$uploader.addEventListener("complete", function(data){
  console.log('complete')
  console.log(data)
})

Server-side

// I have a lot of modules that I 'register' by passing them the Express app
// In the specific module where SocketIOFileUpload is working, I do: 
app.use(SocketIOFileUpload.router) // It's the first middleware 'registered'

// Then:
// When https server emits 'listening' event
process.on('mobiusz:server.listening', server => {
  // Socket.io listens to the https server
  io = sio.listen(server, {
    pingTimeout: pingTimeout,
    pingInterval: pingInterval
  })
  io.on("connection", socket => {
    var uploader = new SocketIOFileUpload();
    uploader.dir = path.resolve(global.mobiusz.paths.data, '.tmp');

    uploader.listen(socket);
    uploader.on("start", event => {
      console.warn('START')
      console.log(event)
    })
    uploader.on("progress", event => {
      console.warn('PROGRESS')
      console.log(event)
    })
    uploader.on("complete", event => {
      console.warn('COMPLETE')
      console.log(event)
    })
    uploader.on("saved", event => {
      console.warn('SAVE')
      console.log(event)
    })
    uploader.on("error", event => {
      console.warn('ERROR')
      console.log(event.error)
    })
  })

  // Emit event to inform others that we connected
  // The server.listening event is the very last, so we can be sure
  // each module is properly listening
  process.emit('mobiusz:socket.listening', io)
})

The 'start' event is called both client-side and server-side but then... nothing happens and if my files are visible in the upload folder, they have a zero size FYI I'm uploading on a hard drive mounted on Ubuntu 18.04 if it does matter I tried to create my folders with full permissions and without hiding them by the '.' but nothing worked Both my server and the websockets are secured

Any idea on what is happening? Thank you!

EDIT:

Also tested by importing directly the client libray in one of my module. And on the main HD of my server... Same behavior... What am I doing wrong?

After some time debugging, it appears that the loadCb (on the FileReader) is never called.

I might precise that Express is not used at all for the routing...

[sffc]

I don't immediately see what's going wrong. If loadCb is never called, that would suggest that the file is failing to be read by the FileReader, or perhaps that the FileReader is not being initialized properly. If you end up solving your problem, I'd like to know how you did it.

[ghost]

I had the same problem, I noticed that on the client side he could send the send request but notreceiving confirmation from the server "_ready" the problem is when calling _listenTo> addEventListener, it does not exist in my case I have to call subscribe from my IO library so I replace the function:

var _listenTo = function (object, eventName, callback, bubble) { object.addEventListener(eventName, callback, bubble); _listenedReferences.push(arguments); };

to:

var _listenTo = function (object, eventName, callback, bubble) { if(object.subscribe) //object is socket object.subscribe(eventName, callback, bubble); else object.addEventListener(eventName, callback, bubble); _listenedReferences.push(arguments); }; excuse me for my bad english ;-)

[benoitlahoz]

Sorry for the late answer. It was actually a problem with Vue-Socket.io package not getting the messages from the server. I did refactor all the package code to a new module and it now works.

I'll publish my module on GitHub as soon as I can : it's implementing a very easy way to use socket.io and socketio-file-upload in Vue.

Thank you for the great work!

[ArvedE]

@oz- Would be really nice if you could share how you sloved the Problem as fast as you can. I have the exact same Error atm. Thx!