Painless file upload using FeathersJs service

Rowad
Rowad
Mar 29, 2019 · 4 min read

In this article, I aim to show a way to upload files using feathers service, and by the end, we can still use it as a normal feathers service.

  • I will be using MySQL and Sequelize ( But this will not affect anything ).

I’m starting from the beginning by generating a new feathers application using the CLI.

Then I will generate authentication using the CLI, which will create a users service, and generate a hook and express middleware for authentication.


Now we can start with the uploads service by :

  • Generating it.
  • Modifying the model.
  • Install multer & Modifying the service to make it handle file uploads and still behave normally.

Generating the uploads service :

Modifying the model:

I think the model is self-explanatory.

Install Multer & Modifying the service:

  • You can install Multer by typing into the root of your project.
  • I will store the uploaded files in a folder called inside the folder.

The service after modifying it, with comments to help you understand the changes.


Usage :

  • First I will create a user ( because we added the auth middleware ) :
  • to authenticate the user :

this will give us the user’s which we will use with the files to authorize the user

  • Uploading files ( using postman ) :
notice the key of the images is `files` which is the same string we passed to the multer middleware!, `upload.array(‘files’)`.
  • Without the jwt token, the files will not be stored!
  • with jwt, the response looks like this:
Adding the same `description` to the images is redundant, but it’s just to show an example, this might be a post_id or something like this.
  • Note that the service still behaves normally, if we tried to see the data via HTTP GET request we can:

trying to modify the image with id 1:

we can update, patch, delete, get, post using this service. However the files you uploaded still need to be removed in some time, you can do that with more hooks or by a .

If you want to filter the file based on the extension, you can register a using multer, I highly recommend you to read Multer’s documentation.

Notes :

  • The only line that is needed is a In the middleware, we added before creating the , which transfers the files into feathers and the code that shapes the data into the model format should be a and .

Another Approach: Express middleware.

We can create a normal express middleware that only handles files and returns their id after inserting the path of each file into a table.

let’s start by generating a service called .

  • the media model ( just storing the path and Sequelize will add the , , ).

now we need to generate the middleware and handle files:

generating the middleware with a path `media-upload`

go to and add the following code :

and in the middleware add the following code

To test the middleware :

The response :

Now you can use the returned id to link the media with any other table, this will be really useful when you don’t want to send a large request, but you will send the files when the user adds them and send only their id with the main request.


END

Hopefully, this was useful to you 🙂.

useful links

1 — About here.

2 — Feathers file upload docs here.

3 — a video which might be helpful

Rowad

Written by

Rowad

Currently I’m a software engineer @ Aspire(www.aspire.jo) my yt => https://www.youtube.com/channel/UC1Uw_GN4sodGisimwZNzMoA

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade