Building a Web File Store

An online file storage drive you can access from all your devices is a very useful tool. It’s the basis of services like Dropbox and Google Drive.

Code Capsules’s File System Data Capsule mounts as a standard file system to a Backend Capsule, providing a convenient file storage option you can use instead of a blob store on other platforms. The file systems are well-supported in most programming languages and familiar to programmers.

In this tutorial, we’ll build a basic web interface to upload, download and delete files, secured with a simple, single-user authentication scheme.

We’ll use a with a file store Data Capsule, as the programming language, and as the web framework.

Overview and Requirements

You’ll need the following services and software set up for this tutorial:

set up and installed, and a registered .
installed.
A registered account.
An IDE or text editor to code the project in. We used in this tutorial, but you can use any tool you like.

Setting Up The Project

With our requirements in place, let’s get started setting them for our web file store project.

Creating a New Repo

First, we need a place to store our code, from which Code Capsules can deploy it to a capsule.

Head over to and create a new repo. We’re calling it filedrop here, but you can call it whatever you like. You can choose a Node .gitignore file to get started. Clone the new GitHub repo onto your computer and navigate to that directory in the terminal (or command prompt if you’re on Windows).

Initializing the Base Project

Copy

npx express-generator --hbs 
npm install

The command npm install downloads and installs all the dependencies and packages required by the base project. Open the folder with Visual Studio Code or your chosen editor, and browse through the files to get familiar with them. The app.js file in the project root is the main entry point for the app.

It’s time to push this boilerplate project up to Git. Type the following into the command prompt or terminal:

Copy

git add . 
git commit -am 'added base files for project'
git push origin

Creating a New Backend Capsule

A Capsule provides the server for hosting an application on Code Capsules.

Navigate to the “Capsules” tab. Once there, click the yellow + icon on the top right of the screen to add a new Capsule. Follow the instructions below to create a Backend Capsule:

Choose “Backend Capsule”, your Team and Space.
Choose your payment plan.
Click the GitHub button and provide access to the repository you forked at the start of the tutorial.
Choose the GitHub repository you forked.
Press “Next”.
Leave “Run Command” blank.
Click “Create Capsule”.

Creating a New Data Capsule

We’ll need some data storage to store the files uploaded to the web drive.

Navigate to the “Capsules” tab. Once there, click the yellow + icon on the top right of the screen to add a new Capsule.

To create a new Data Capsule for your Space follow the instructions below:

Choose “Persistent Storage”, your Team and Space.
Choose your payment plan.
Click “Create Capsule”.

Linking the Capsules

To use the Data Capsule with the Backend Capsule, we need to link the two. Head over to the backend capsule you created earlier, and click on the “Config” tab. Scroll down to “Bind Data Capsule”, and click “Bind” under the name of the data capsule you created. After binding the capsules, scroll up to the section “Capsule Parameters”. You’ll notice that an environment variable, PERSISTENT_STORAGE_DIR, is automatically added with the mount point. We’ll use this environment variable in the code to access the storage drive.

Writing the Web Files Code

Now that we have all our systems setup, we can get onto the best part – coding!

Getting the File List

Open the file index.js in the routes folder of our project. This is the server code file for the default route / in the application. We’ll use this route to show the file listing.

Copy

const fs = require('fs');

Then, modify the default get route to use the fs module to get the file listing on the storage drive:

Copy

router.get('/', function(req, res, next) {
  fs.readdir(process.env.PERSISTENT_STORAGE_DIR, function(err, files){
    if (err) return res.sendStatus(500); 
    files.sort(); 
    return res.render('index', {title: "File Drop", files: files}); 
  }); 
});

Rendering the File List

Our backend route gets the file list, and passes it through to the index HTML template. Let’s customize that template to display the files. Open index.hbs in the views folder, and update the contents to this code:

Copy

<h1>{{title}}</h1>

<div>
  <h2>File list</h2>
  <table>
    <tr>
      <th>File Name</th>
    </tr>
      {{#each files}}
      <tr>
        <td> 
            {{this}}
        </td>
      </tr>
      {{/each}}
  </table>
</div>

Handlebars uses the sequence {{ }} to indicate sections of the template to be populated. In the first line, {{title}} will be replaced with the title we specified in the return from the GET / route we added earlier.

Then we set up a simple table, and use the Handlebars of each function to iterate over the elements in the files array we passed from the Get / route. The Handlebars keyword {{this}} is used to reference the current file name on each iteration.

Adding the File Upload Route

Copy

<div>
  <h2>Upload a file</h2>
    <form ref='uploadForm' 
      id='uploadForm' 
      action='/' 
      method='post' 
      encType="multipart/form-data">
        <input type="file" name="newFile" />
        <input type='submit' value='Upload' />
    </form> 
</div>

This code adds in a new HTML form, which makes a POST request to the root / (our index page) on submit. We’ve given the form 2 inputs: a file upload field specified by the type="file" attribute, and the submit button. Note the name given to the file input – we’ll need to remember this when processing the upload on the server side.

Copy

router.post('/', function(req, res){

});

Copy

npm install express-fileupload

Copy

const fileUpload = require('express-fileupload');

Now insert the package into the Express middleware pipeline by adding the following line just under the var app = express(); statement:

Copy

app.use(fileUpload());

The express-fileupload module adds a files attribute to our req object. Through the files attribute, we can access any uploads as their own objects, which are named the same as the HTML form inputs.

Now we can expand on the route stub. In the index.js file, complete the POST route as follows:

Copy

router.post('/', function(req, res){

    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send('No files were uploaded.');
    }

    const newFile = req.files.newFile;
    const uploadPath = process.env.PERSISTENT_STORAGE_DIR + '/' + newFile.name;

    newFile.mv(uploadPath, function(err) {
      if (err) return res.status(500).send(err);
      return res.redirect('/');
    });

});

This is a good point to commit the code to Git, and test the new deployment on Code Capsules. After the capsule finishes rebuilding, navigate to the site. It should look something like this: The upload control may look slightly different depending on the web browser and operating system you use. Try choosing a file and uploading it, and you should see it appear in the browser.

Downloading a File

We’ve got the functionality to upload files, and to list what files are on the server. Now let’s add functionality to download files.

Add this route to the index.js file.

Copy

router.get('/:filename', function(req, res, next){
    const filepath = process.env.PERSISTENT_STORAGE_DIR + '/' + req.params.filename; 
    return res.download(filepath); 
});

This sets up a GET route, with the requested filename as a parameter. Then the function constructs a path to the file, using the environment variable for the data capsule mount point, along with the path separator / and the name of the requested file.

Copy

<div>
  <h2>File list</h2>
  <table>
    <tr>
      <th>File Name</th>
    </tr>
      {{#each files}}
      <tr>
        <td> 
            <a href='/{{this}}' download>{{this}}</a> 
        </td>
      </tr>
      {{/each}}
  </table>
</div>

Commit these changes, and wait for Code Capsules to redeploy the site. If you navigate to the site now, you should see the file you uploaded earlier as a hyperlink. Clicking on the link should download the file.

Deleting a File

Copy

router.delete('/:filename', function(req, res){
  const filepath = process.env.PERSISTENT_STORAGE_DIR + '/' + req.params.filename; 

  fs.unlink(filepath, function (err) {
    if (err) return res.sendStatus(500); 
    else return res.sendStatus(200); 
  }); 

});

Now let’s update the front end to be able to call this route. Open the index.hbs file, and add a new header column to the file table, along with a button for each file in the new column to delete it:

Copy

<div>
  <h2>File list</h2>
  <table>
    <tr>
      <th>File Name</th>
      <th></th>
    </tr>
      {{#each files}}
      <tr>
        <td> 
            <a href='/{{this}}' target="_blank">{{this}}</a> 
        </td>
        <td>
          <button>Delete</button>
        </td>
      </tr>
      {{/each}}
  </table>
</div>

Copy

<script type="text/javascript">
  function deleteFile(filename){

    var confirmation = confirm('Do you really want to delete the file ' + filename + '?'); 
    if (confirmation === true){
      fetch('/' + filename, { method: 'DELETE' })
      .then(response => location.reload())
      .catch(error => alert('Error deleting the file! ' + error)); 
    }
  }
</script>

Copy

<button onclick="deleteFile('{{this}}')">Delete</button>

Commit these changes, and wait for Code Capsules to redeploy the site. Then navigate to the site and try out the “Delete” button next to the filename.

Adding Authentication

We’ve created the basic functions of a web drive, but anyone can get to the site and upload, download or delete documents. We need a way to control access. For this tutorial, we’ll implement a simple access control system that only allows access to one pre-defined user.

Let’s start by installing all these packages and plugins. Type the following in the terminal:

Copy

npm install passport passport-local express-session

Now add references to these packages to the top section of the app.js file. A good place to add them is after the var logger = require('morgan'); line. Here’s the code you’ll need:

Copy

var passport = require('passport'); 
var LocalStrategy = require('passport-local').Strategy;
var session = require("express-session");

The first thing to add to the app is the session middleware, then the Passport authentication middleware. Add the following after the app.use(express.static(path.join(__dirname, 'public'))); line:

Copy

app.use(session({secret : "<YOUR_SECRET>"})); 
app.use(passport.initialize());
app.use(passport.session());

This inserts the session middleware into the app pipeline, to read and write persistent sessions to the app cookie. Replace the <YOUR_SECRET> parameter with a string of your choosing. This secret is used to sign the session information in the cookie. Normally, this is kept very secret, as anyone who has access to the secret could construct a session cookie that looks legitimate to the server and provide them with access to any account on the server. You can also add an environment variable to store this secret, rather than store it in the code repo.

Next, we initialize Passport into the middleware pipeline, and add in the code for Passport to use sessions to check and record authentication.

When using sessions with Passport, we need to implement serialization and de-serialization of user objects from session information, so that Passport can add the user object to the req object in the app pipeline. Add these functions to the bottom of the app.js file:

Copy

passport.serializeUser(function(user, done) {
  process.nextTick(function(){
    done(null, user);
  }); 
});

passport.deserializeUser(function(user, done) { 
  process.nextTick(function(){
    done(null, user);
  }); 
});

In our case, since we are implementing a super-simple authentication scheme with just one user, we don’t need to call out to a database or other store to get user information. In fact, since there is no real user information that is of use to our app currently, we just return the user object that Passport sends to us straight back, as we don’t really have a use for it. Even though we are doing nothing with the information, we need to register these functions with Passport, as it calls them, regardless.

Now we can set up the rest of the logic for Passport. Add this code just above the serialization code:

Copy

passport.use(new LocalStrategy(
  function(username, password, done) {
    if (username === process.env.USERNAME && password === process.env.PASSWORD){
      return done(null, {username: process.env.USERNAME}); 
    }
    else {
      return done(null, false, {message: "Incorrect username or password"}); 
    }
  })
);

This plugs in and registers the local authentication strategy module into Passport.

Passport’s local strategy uses a simple username and password, checked on the local server, so we’ll need a function to accept a username and password for validation. The function checks if entered credentials are valid, and sends back a user object if they are, using the done callback. If the credentials don’t check out, the user gets an error message.

Our function checks the username and password against what is stored in our environment variables. If the credentials to be checked match the credentials in our environment variables, we authenticate the user.

Head over to the “Config” tab on your backend Code Capsule, and add 2 new environment variables : USERNAME and PASSWORD. Supply values of your own to set your username and password, then click the “Save button to save the changes. Note: While this method of storing user credentials is appropriate for a small, single-user hobby project, it is not sufficient for production with customer credentials. Look to implementing a more robust user store, with password hashing and salting, or using a third-party authentication service such as a social network or an OAuth provider

Now that we have set the username and password for our app, we can add the login page routes to render the login page and send the form POST with user credentials to Passport.

Add these 2 routes just above the index routes (app.use('/', indexRouter);) in app.js:

Copy

app.get('/login', function(req, res){
    return res.render('login')
}); 
app.post('/login',
  passport.authenticate('local', { successRedirect: '/', failureRedirect: '/login' }));

There’s one more bit of code to include before we add the front-end login form. We need to check if a user is successfully authenticated before they can access the file list and other functionality. To do this, we’ll insert a call to an authentication check function in our app middleware. Add this code just above the app.use('/', indexRouter); line, so it’s called before the routes above are served:

Copy

app.use(isAuthenticated);

Now, let’s implement the reference isAuthenticated middleware. Add this function to the bottom of the app.js file:

Copy

function isAuthenticated(req, res, next) {
  if (req.isAuthenticated())
    return next();
  else 
    return res.redirect('/login');
}

If a user is successfully authenticated, the isAuthenticated() method, which is added by Passport to the req object, will return true. In that case, we can safely let the pipeline proceed to the next middleware function (in this case, one of the protected routes). If the authentication check comes back false, we redirect back to the login page, away from our protected pages.

Now we have all the back-end pieces for authentication in place, let’s add the login page and form. Add a new file called login.hbs in the views folder. Place this code into the new file:

Copy

<form action="/login" method="post">
    <div>
        <label>Username:</label>
        <input type="text" name="username"/>
    </div>
    <div>
        <label>Password:</label>
        <input type="password" name="password"/>
    </div>
    <div>
        <input type="submit" value="Log In"/>
    </div>
</form>

Here we’re adding a very simple form to make a POST request back to our /login route, with inputs for a username and password.

Next Steps

This project has some decent basic functionality, but there are many things you could add to upgrade it, such as:

Add styling to make it look better
Add support for sub-folders
Add support for multi-file upload
Add better authentication, and perhaps separate user accounts for a multi-user drive

PreviousGetting Started With MEAN Stack: A Step-by-Step Tutorial NextBuilding a Book Recommendations App With PHP, SQLite, and Docker

Last updated 11 days ago

Was this helpful?