How to upload a file? Example, KoaBody, Multer, Koa Router

[TrejoCode]

Hi, I'm trying to configure Multer to upload images and store them on my disk, but I can't find an example with KoaRouter, KoaBody and Multer, to be honest, I'm very confused, in the documentation of this repo I don't find "real" examples.
How do I upload the file received from a form?
How do I get the final path of the stored file?

const koaRouter = require('koa-router');
const koaBody = require('koa-body');
const multer = require('@koa/multer');
const IMG_DIR = require("../../auth/dir.js");

// EndPoint
const route = new koaRouter({ 
    prefix: '/products' 
});

// Multer
const upload = multer({
    dest: IMG_DIR        // c://exampleRoute/app/public/images
});

route.post('/add', koaBody({ multipart: true }), async (context) => {
    try {
       // For get the file?
        console.log(context.request.files);
       // Upload?
        upload.single(context.request.files.img1);
    } catch (error) {
        console.log(error.message);
        context.body = { error: true, message: error };
    }
});

[niftylettuce]

Look at the README

https://github.com/koajs/multer#usage

[TrejoCode]

Look at the README

https://github.com/koajs/multer#usage

It is evident that I had to read the documentation before being used, well, in the end I chose to use another tool since it is evident that there is no open community to help in any real implementation.
My best wishes to all devs.

[niftylettuce]

@TrejoCode you don't need to use both koa body and koa multer. you use one or the other. https://github.com/expressjs/multer#usage

[niftylettuce]

We are indeed an open community. You're building your technology on software made by people that dedicated tons of time to give it away for free. You need to spend more time reading documentation on packages used.

[niftylettuce]

In the multer section I linked above, there is a snippet of JS in the USAGE section that looks like this:

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

The comment // req.body will contain the text fields, if there were any is critical, as it indicates ctx.request.body (in Koa) will contain the text fields, if any.

Look at the source code here to see how this works:

https://github.com/koajs/multer/blob/master/index.js#L41-L42

We are piggybacking off multer here, and since it parses out the body, we bind it to ctx.request.body.

In your case, you need to change your code like this:

const koaRouter = require('koa-router');
const koaBody = require('koa-body');
const multer = require('@koa/multer');
const IMG_DIR = require("../../auth/dir.js");

// EndPoint
const route = new koaRouter({ 
    prefix: '/products' 
});

// Multer
const upload = multer({
    dest: IMG_DIR        // c://exampleRoute/app/public/images
});

+route.post('/add', upload.single('img1'), async (context) => {
-route.post('/add', koaBody({ multipart: true }), async (context) => {
    try {
       // For get the file?
        console.log(context.request.files);
+       // Note that `files` (plural) will be empty since it's a single upload
+        console.log(context.request.file);
+       // Output some fields from the body of the form submitted (e.g. <input type="text" name="first_name" />)
+       console.log(context.request.body);
       // Upload?
-        upload.single(context.request.files.img1);
    } catch (error) {
        console.log(error.message);
        context.body = { error: true, message: error };
    }
});

ALSO, WE STRONGLY RECOMMEND TO STOP USING koa-router IMMEDIATELY. INSTEAD PLEASE INSTALL @koa/router

[niftylettuce]

If you use upload.single('img1') then you will need to use ctx.file or its alias ctx.request.file. In your case you call ctx the variable name context. I have updated the snippet diff example above to show you.

[TrejoCode]

Thank you for everything, it has been very helpful

[niftylettuce]

No problem, let me know if you're still stuck with anything - and if so - share a code snippet like you did before. Thanks!

[SencoPan]

How to save file with his extension? I can't find option that provides this