Uploading Files

In order to upload files into Vault, you need to have some controller that will get and process requests on the server side. Vault uses REST API for processing server-side requests.

In general, the scheme of uploading a file to a server with Vault looks like this:

• you use one of the available methods for uploading a file via Vault: drag-n-drop a file for automatic upload, call the send() method, or click on the Upload button
• a POST request with a file represented as an HTML form is sent to a corresponding URL on a server
• the server-side controller processes a request and returns a response with one of the two statuses: 200 - in case of success, or error - if something has gone wrong

The example described in this article is based on Node.js.

Node.js example

Backend configuration

In the example below the following modules are used:

• the busboy node.js module for parsing uploaded files as HTML form data
• fs module for interacting with the file system
• Express Node.js framework

const Busboy = require('busboy');
const fs = require('fs');
const express = require('express');
const app = express();

Download logic

In case you want to provide the ability to download files added into Vault, you should specify the path to the directory where files will be stored, e.g.:

app.use('/backend/upload/files/:file', (req, res) => {
  var file = __dirname + '/files/'+req.params.file;
  res.download(file);
});

Upload logic

Below you can see an example of server-side code that gives an idea of how files upload can be processed. The handler function takes as a parameter the URL for file upload (this URL should be specified in the target configuration option of Vault). It contains the logic of processing an uploaded file:

// upload files
app.post('/backend/upload', (req, res) => {
  // check if the request method is "POST" 
  if (req.method === 'POST') {
    // create a busboy instance for stream parsing of a file
    const busboy = Busboy({ headers: req.headers });
    const response = {};
    busboy.on('file', (fieldname, file, { filename }) => {
      // define the directory for a file saving
      const saveTo = __dirname + "/files/" + filename;
      // add the link to this file for response
      response.link = `/backend/upload/files/${filename}`;
      // save the file
      file.pipe(fs.createWriteStream(saveTo));
    });
    busboy.on('finish', () => {
      // return the link to download the file
      res.json(response);
    })
    return req.pipe(busboy);
  }
  // show error 404 in case the request method is other than POST
  res.writeHead(404);
  res.end();
});

Request

Form data sent in the request to the server side contains the following fields:

file: (binary)
file_fullname: data.xlsx
file_id: u1552496187456

where:

• file_fullname - the path to a file including the directory (in case a folder with files has been uploaded), e.g. folder/file.jpg
• file_id - the auto-generated id of a file

Response

The server returns a response with one of the two statuses: 200 - in case of success, or error - in case something has gone wrong.

A server response may contain:

• the link option with a link for a file download:

{"link":"/vault/backend/upload/files/data.xlsx"}

• the preview option for a file preview image from the server:

{"preview":"/vault/backend/upload/files/preview.png"}

Back to top