DEV Community

Cover image for Upload Files with any Cloud Service with just 10 lines of code
Ivan Zaldivar
Ivan Zaldivar

Posted on • Edited on

Upload Files with any Cloud Service with just 10 lines of code

#webdev #javascript #beginners #opensource

Hi developers! After months of not posting anything, here I am again, and this time with an open source project that I've been working on for months. Well let's get started.

⚠️ Filesrocket of the moment is in beta, please note that it is not ready for production yet, thanks for your understanding ️️❤️

Table of contents

  1. What is a Filesrocket
  2. Features
  3. Prerequisites
  4. Setup
  5. Basic usage
  6. Conclusions

🤔 What is a Filesrocket?

Filesrocket is an packages of Node.js that allows management your files through strategies that help manage with any cloud services (Local, Cloudinary, AWS).

🌈 Features

  • 🔭 Manage your files with multiple cloud storage services (Cloudinary, Amazon S3, Local)
  • ✅ Validations (validate extensions, file sizes and more)
  • ⚡ Easy to configure and integrate
  • 🛡️ Written in Typescript
  • 👨🏻‍💻 Community driven

📝 Prerequisites

  • Have Node.js installed.
  • Have VSCode (or your favorite Code Editor) installed.

⚙️ Setup

Now we are going to add some configurations for our node.

Creating project.

mkdir filesrocket-app-example

cd filesrocket-app-example
Enter fullscreen mode Exit fullscreen mode

Initialize project.

npm i typescript ts-node -g

npm init -y

tsc --init
Enter fullscreen mode Exit fullscreen mode

Now is necessary installed the following packages.

npm i express filesrocket filesrocket-local

npm i @types/express -D
Enter fullscreen mode Exit fullscreen mode

Perfect, with this we already have everything we need.

🧑‍💻 Basic Usage

Create a src/index.ts and initialize app

import express from "express";

const app = express();

app.listen(3030, () => {
  console.log("App execute in port:3030");
})
Enter fullscreen mode Exit fullscreen mode

Setting service

import { Filesrocket } from "filesrocket";

import { LocalFileService } from "filesrocket-local";

// Initialize
const filesrocket = new Filesrocket();

// Config your service
const service = new LocalFileService({
  pagination: { default: 15, max: 50 },
  host: "http://localhost:3030",
  directory: "uploads",
});

// We register the service
filesrocket.register("local", service);
Enter fullscreen mode Exit fullscreen mode

Register your endpoints

const controller = filesrocket.controller("local");

// Create/Upload files.
app.post("/files", async (req, res) => {
  const files = await controller.create(req, {});
  res.status(200).json(files);
})

// List files.
app.get("/files", async (req, res) => {
  const query = req.query;

  const files = await controller.list(query);

  res.status(200).json(files);
})

// Remove files.
app.delete("/files", async (req, res) => {
  const query = req.query;
  const { id } = query;

  const files = await controller.remove(id, query)

  res.status(200).json(files)
})
Enter fullscreen mode Exit fullscreen mode

Expose static files.

app.use("/uploads", express.static(path.resolve("uploads")));
Enter fullscreen mode Exit fullscreen mode

Execute server

ts-node src/index.ts
Enter fullscreen mode Exit fullscreen mode

With this example you can manage your files locally.

Examples 👀

To make it easier to understand the tool we have created several repositories with the most popular frameworks so that you can clone them on your computer and play with them.

Framework Repository
Express filesrocket-express-app

🔥 Conclusions

As you have just seen, Filesrocket is a tool that allows you not only to upload your files like multer, express-fileupload and others, but it also allows you to consult, delete, provides you with a pre-formed URL and other metadata. This was a short article, if you want to learn more in depth we recommend you visit the official documentation.

❤️ Follow me

Top comments (0)