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 routing/routers/index.routes.js:

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

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

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

Step 1: Create the upload submission route.

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

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

Here, we invoke the _flit.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 controllers/Home.controller.js:

post_upload(req, res){
    const file_name = req.files.img.new_name
    
    res.send('File uploaded as: '+file_name)
}

The _flit.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 routing/routers/index.routes.js:

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

Add the handler function in 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.
    _flit.uploads.model.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.
        	_flit.uploads.serve(res, file)
        }
    })
}

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.

No Comments
Back to top