Tutorial: Overview: flitter-upload

Overview: flitter-upload

Overview

flitter-upload provides a simple, middleware-based file upload system for Flitter. This allows files to be uploaded, stored, and categorized seamlessly. This is done with the hope of reducing the hassle of keeping track of and serving uploaded files. Here, we'll build a sample picture uploader to take a look at how to use flitter-upload.

Step 0: Create the basic upload form and routes.

Create views/upload.pug:

html
    body
        form(method='post' enctype='multipart/form-data')
            input(type='file' name='img' required)
            button(type='submit') Upload

Create the route in app/routing/routers/index.routes.js:

get: {
    '/': [ _flitter.controller('Home').welcome ],
    '/upload': [ _flitter.controller('Home').get_upload ],
},

Create the controller function in app/controllers/Home.controller.js:

get_upload(req, res){
    return _flitter.view(res, 'upload')
}

Step 1: Create the upload submission route.

Create the route in app/routing/routers/index.routes.js:

post: {
    '/upload': [ _flitter.upload('img', 'upload-img'), _flitter.controller('Home').post_upload ]
},

Here, we invoke the **_flitter**.upload() middleware before we pass off control to the post_upload() handler. We call this middleware with two arguments. The first is the name of the file uploaded. In this case, img. It should match exactly the name attribute of the file input field. The second is an arbitrary string that categorizes the uploaded files. In our case, they will be tagged upload-img. The files are then stored in the specified upload directory, uploads/ by default.

Step 2: Add the controller method.

Add the following to app/controllers/Home.controller.js:

post_upload(req, res){
    const file_name = req.files.img.new_name

    res.send('File uploaded as: '+file_name)
}

The **_flitter**.upload() middleware replaces whatever file name it uploads with an instance of flitter-upload/deploy/File in req.files. Here, that instance is created in req.files.img. Then, we just send a text response to the user with the UUID name of the file.

Step 3: Add the retrieval route.

Create the route in app/routing/routers/index.routes.js:

get: {
    '/': [ _flitter.controller('Home').welcome ],
    '/upload': [ _flitter.controller('Home').get_upload ],
    '/file/:name' : [ _flitter.controller('Home').get_file ],
},

Add the handler function in app/controllers/Home.controller.js:

get_file(req, res, next){
    // Get the name of the file from the route.
    const file_name = req.params.name

    // Find the file instance with the corresponding name.
    _flitter.model('upload:File').findOne({new_name: file_name}, (error, file) => {
          // If an error occurs, let Flitter handle it.
        if ( error ) next(error)

          // If the file isn't found, throw a 404 error.
          if ( file === null ) {
            const e = new Error('File with name not found.')
            e.status = 404.
            next(e)
        }
          else {
              // Otherwise, serve the file.
              res.type(file.mime)
              res.sendFile(path.resolve(_flitter.upload_destination, file.new_name))
        }
    })
}

Now the file with the given name will be served to the user. Here, we find the instance of the flitter-upload/deploy/File model with the given file name. If the file is found, serve it to the user. flitter-upload handles the MIME type setting.