Node Tutorial

Building a Simple Image Server with Deta Drive#

Setup#

To get started, create a directory image-server and change the current directory into it.

$ mkdir image-server && cd image-server

Before we begin, let's install all the necessary dependencies for this project.

$ npm install deta express express-fileupload 

In this tutorial, we are using express to build our server, and express-fileupload allows us to access the uploaded file data.

To configure the app, import the dependencies and instantiate drive in index.js

const { Deta } = require("deta");
const express = require("express");
const upload = require("express-fileupload");

const app = express();

app.use(upload());

const deta = Deta("Project_Key");
const drive = deta.Drive("images");

We have everything we need to 🚀

Uploading Images#

First, we need to render a HTML snippet to display the file upload interface.

We'll expose a function that renders the HTML snippet on the base route /

app.get('/', (req, res) => {
    res.send(`
    <form action="/upload" enctype="multipart/form-data" method="post">
      <input type="file" name="file">
      <input type="submit" value="Upload">
    </form>`);
});

We are simply rendering a HTML form that sends a HTTP POST request to the route /upload with file data.

Let's complete file upload by creating a function to handle /upload

app.post("/upload", async (req, res) => {
    const name = req.files.file.name;
    const contents = req.files.file.data;
    const img = await drive.put(name, {data: contents});
    res.send(img);
});

We can access the image details from req and store it in Drive.

Downloading Images#

To download images, we can simply use drive.get(name)

If we tie a GET request to the /download path with a param giving a name (i.e /download/space.png), we can return the image over HTTP.

app.get("/download/:name", async (req, res) => {
    const name = req.params.name;
    const img = await drive.get(name);
    const buffer = await img.arrayBuffer();
    res.send(Buffer.from(buffer));
}); 

app.listen(3000);

Running the server#

To run the server locally, navigate to the terminal in the project directory (image-server) and run the following command:

$ node index.js

curl -X 'POST' \
  'http://127.0.0.1:3000/upload' \
  -H 'accept: application/json' \
  -H 'Content-Type: multipart/form-data' \
  -F 'file=@space.png;type=image/png'

Response 
"space.png"

curl -X 'GET' \
  'http://127.0.0.1:3000/download/space.png' \
  -H 'accept: application/json'

Response 
The server should respond with the image. 

Issues#

If you run into any issues, consider reporting them in our Github Discussions.