Consider how to handle file upload

[ekryski]

With the current client it's not that easy to upload files. You can't quite do a create via the rest client. Instead you need to use the underlying library. I'm a big fan of how superagent handles multipart requests.

I think we should consider one of 3 options:

1. Adding the ability to pass additional options for multipart file handling to a create call, or
2. Add an attach method that allows you to add files for a create call.
3. See if we can create a client side hook for handling file upload

[daffl]

I haven't tried it yet but any reason

const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })
const fileService = {
  create(data, params) {
    // data is the file
    return Promise.resolve({});
  }
}

function setFile(req, res, next) {
  req.body = req.file;
  next();
}

app.post('/upload', upload.single('avatar'), setFile, fileService);

Wouldn't work?

[ekryski]

@daffl the server side piece works just fine. I mean from the client side. Currently, you need to circumvent feathers-client and use the underlying REST lib (superagent, request, axios, etc.) directly in order to upload via multipart/form. You can't just set hook.params.headers['Content-Type]. I don't know enough about the data structure format of multipart uploads but I think we can make it much easier to do file uploads on the client.

I'm also interested in exploring socket file upload. There seems to be a couple modules that do it in a non-feathers way, I wonder if we can adapt it (it's a great use of sockets imho).

You can use these two:

• socket.io-file
• socket.io-client

or this modules:

• https://github.com/vote539/socketio-file-upload

---

Most file upload implementations use base64 encoding. For large images this can be expensive on memory, especially on mobile. There are also some interesting constraints with React Native, base64 encoding a big image and uploading in your JS thread locks the UI so ideally you want that part to happen on the native side and you just have a JS interface into it.

[daffl]

How would you normally stream it in RN? I think feathersjs/feathers#384 might be related.

[ekryski]

Currently we are using this https://github.com/wkh237/react-native-fetch-blob. Working pretty well with multi-part but we're not stress testing with huge files. We're drastically shrinking the file size to save data when not on wifi.

For streaming I'm not sure. I think you could use sockets for it. That issue is definitely related.

On the server side, there is some sweet stuff happening with Multer. They have a streaming branch in the works (multer@next). I really like the look of it but haven't had time to test it out just yet. In theory you should be able to stream all the way from client to server to the final storage destination, which would be 👍 👍 .

How I got along that train of thought was specifically being able to transform files prior to saving them somewhere (ie. cropping before shipping to S3).

Related:

• Added the option to transform files before upload anacronw/multer-s3#56
• Switch to stream based API expressjs/multer#399

[daffl]

I'm going to close this in favour of continuing the discussion in the proposal for stream support at feathersjs/feathers#609