file upload & socket.io

[noor-tg]

how to upload file using socket.io transport with feathersjs v5 ?

the simplest way I found is to encode the file as base64 and send it as string with the form other data.

but this solution will not show file upload progress . and will need to be handled in backend too.

• like for example will need to store file manually after decoding from base64
• find file type to name it to disk
  ... etc

so any other solution ? which support :

• upload progress
• default directory
• general file naming

thank you

[ericuldall]

Do you have a hard requirement that your uploads are done via socket.io ?

I use feathers in some cases with socket.io, but I opt to handle my uploads via http/s as there's just more support there.

[noor-tg]

I am working on chat app. So either I use socket to upload files. or make two clients one for all app interactions with api by socket . And the other by rest to upload files.

[ericuldall]

Feathers will run rest and web socket server simultaneously and it's really simple to create a simple secondary http request (no need to use the feathers client) using fetch, axios or something similar. We recently did a project and we used this pattern in vue3 on the web admin as well as a react native implementation for android/ios.

[ericuldall]

For more context the reason we did it this way is to leverage the power of multipart form data over https. We did look at doing base64 encoded values but that is not as efficient and presented problems when working with large files (i.e. no chunking and inability to resume uploads).

[noor-tg]

I found out that socket.io supports uploading files as buffers. So, there is no need to convert it to string using base64 encoding method.

https://socket.io/how-to/upload-a-file

[ericuldall]

Yes, you definitely can do it, though my take was it's not as mature as what you get via http.
You'll also need to make some modifications to feathers itself to create a working upload services and there's currently some good support using multer, but i'm not sure how that scales into the sockets implementation.

If you're 100% set on only communicating with your api using the socket server it can definitely be done, but assuming there's no drawback to using both sockets and http it's worth considering the pros/cons.

[daffl]

I have done this before for a client project that needed resumable file uploads for very large files. It ended up working quite well but was quite a bit of work, both on the frontend and the backend.

We basically created an upload service that on create initiates a new stream with a unique id and on patch writes a chunk of data to that stream.

On the client, the HTML5 file API was used to read the file and split it into those chunks. That way it was also possible to reliably show the upload progress and easily resume uploads (when the connection dropped or even after the browser was closed).