How to Upload File From Url @google-cloud/storage

In this tutorial, I will bear witness you how to upload file to Google Cloud Storage (GCS) with Node.js example.

This Node.js App works with:
– Athwart viii Customer / Angular 10 Client / Angular eleven Client / Angular 12
– Angular Fabric 12
– Vue Customer / Vuetify Client
– React Client / React Hooks Client
– Fabric UI Client
– Axios Client

Related Posts:
– Node.js Limited File Upload (to static binder) case
– How to upload multiple files in Node.js
– Upload/store images in MySQL using Node.js, Express & Multer
– How to upload/store images in MongoDB using Node.js, Express & Multer
– Node.js Rest APIs example with Express, Sequelize & MySQL

Contents

Node.js upload File to Google Cloud Storage case
Technology
Projection Structure
Setup Node.js File Upload to GCS project
Setup Google Cloud Service Saucepan with Credentials
Create middleware for processing file
Restrict file size before uploading to GCS
Create Controller for GCS file upload/download
- GCS Upload File API
- GCS Read Files and Download API
Define Route for uploading file
Create Express app server
Run & Bank check
Conclusion
Farther Reading
Source Code

Node.js upload File to Google Deject Storage example

Our Node.js Awarding will provide APIs for:

uploading File to Google Cloud Storage saucepan (restricted file size: 2MB)
downloading File from server with the link
getting listing of Files' information (file name & url)

Hither are APIs to be exported:

Methods	Urls	Actions
Mail service	/upload	upload a File
Go	/files	get Listing of Files (name & url)
GET	/files/[filename]	download a File

– Upload a File:

– This is the saucepan that stores all uploaded files:

– If we get list of files, the Node.js Rest Apis will return:

– Upload a File with size larger than max file size (2MB):

– Download any file from ane of the paths higher up, or via the API.
For example: http://localhost:8080/files/1.png.

Technology

@google-cloud/storage 5.8.5
express four.17.i
multer 1.iv.ii
cors two.viii.v

Projection Structure

This is the projection directory that nosotros're gonna build:

– google-cloud-central.json contains credentials for working with Google Cloud Storage.
– middleware/upload.js: initializes Multer Storage engine and defines middleware role to procedure file before uploading it to Google Cloud Storage.
– file.controller.js exports Rest APIs: Mail a file, Get all files' information, download a File with url.
– routes/index.js: defines routes for endpoints that is called from HTTP Customer, employ controller to handle requests.
– server.js: initializes routes, runs Express app.

Setup Node.js File Upload to GCS projection

Open command prompt, modify current directory to the root folder of our project.
Install GCS, Limited, Multer, CORS modules with the post-obit command:

          npm install @google-cloud/storage express multer cors

The packet.json file will look similar this:

          {   "proper noun": "nodejs-upload-file-google-cloud-storage",   "version": "1.0.0",   "description": "Node.js Upload file to Google Deject Storage example",   "main": "server.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "keywords": [     "nodejs",     "upload",     "file",     "google cloud storage",     "residual api"   ],   "author": "bezkoder",   "license": "ISC",   "dependencies": {     "@google-cloud/storage": "^5.8.5",     "cors": "^2.viii.five",     "express": "^4.17.1",     "multer": "^i.four.2"   } }

Setup Google Cloud Service Bucket with Credentials

Commencement you lot need to follow footstep past footstep in this post for creating a new Saucepan named bezkoder-due east-commerce with a Credentials JSON file.

Once you get the file, rename it to google-cloud-key.json and put it into the root folder of Node.js project.

Create middleware for processing file

The middleware will utilize Multer for treatment multipart/form-data along with uploading files.

Inside middleware folder, create upload.js file:

          const util = crave("util"); const Multer = crave("multer"); let processFile = Multer({   storage: Multer.memoryStorage() }).unmarried("file"); let processFileMiddleware = util.promisify(processFile); module.exports = processFileMiddleware;

In the code to a higher place, we've done these steps:
– First, nosotros import multer module.
– Adjacent, nosotros configure multer to use Retention Storage engine.

util.promisify() makes the exported middleware object can be used with async-expect.

Restrict file size earlier uploading to GCS

With the new multer API. Nosotros can add limits: { fileSize: maxSize } to the object passed to multer() to restrict file size.

          const util = require("util"); const Multer = require("multer"); const maxSize = 2 * 1024 * 1024; let processFile = Multer({   storage: Multer.memoryStorage(),   limits: { fileSize: maxSize }, }).unmarried("file"); let processFileMiddleware = util.promisify(processFile); module.exports = processFileMiddleware;

Create Controller for GCS file upload/download

In controller folder, create file.controller.js:

          const upload = async (req, res) => {   ... }; const getListFiles = async (req, res) => {   ... }; const download = async (req, res) => {   ... }; module.exports = {   upload,   getListFiles,   download, };

GCS Upload File API

For File Upload method, we will export upload() part that:

use middleware function for processing file
apply Storage Bucket object for file upload
catch the error
return response with message

          const processFile = require("../middleware/upload"); const { format } = require("util"); const { Storage } = require("@google-cloud/storage"); // Instantiate a storage customer with credentials const storage = new Storage({ keyFilename: "google-cloud-key.json" }); const bucket = storage.bucket("bezkoder-e-commerce"); const upload = async (req, res) => {   try {     wait processFile(req, res);     if (!req.file) {       return res.condition(400).send({ message: "Please upload a file!" });     }     // Create a new blob in the bucket and upload the file data.     const blob = saucepan.file(req.file.originalname);     const blobStream = blob.createWriteStream({       resumable: false,     });     blobStream.on("error", (err) => {       res.status(500).transport({ message: err.message });     });     blobStream.on("terminate", async (data) => {       // Create URL for direct file access via HTTP.       const publicUrl = format(         `https://storage.googleapis.com/${bucket.name}/${blob.name}`       );       try {         // Make the file public         await bucket.file(req.file.originalname).makePublic();       } catch {         render res.condition(500).send({           message:             `Uploaded the file successfully: ${req.file.originalname}, but public access is denied!`,           url: publicUrl,         });       }       res.status(200).send({         bulletin: "Uploaded the file successfully: " + req.file.originalname,         url: publicUrl,       });     });     blobStream.terminate(req.file.buffer);   } catch (err) {     res.status(500).ship({       message: `Could not upload the file: ${req.file.originalname}. ${err}`,     });   } }; module.exports = {   upload,   ... };

– Nosotros call middleware function processFile() first.
– If the HTTP request doesn't include a file, send 400 condition in the response.
– Nosotros also catch the error and send 500 status with error message.

And then, how to handle the case in that user uploads the file exceeding size limitation?
We check error lawmaking (LIMIT_FILE_SIZE) in the grab() block:

          const upload = async (req, res) => {   effort {     look processFile(req, res);     ...   } catch (err) {     if (err.code == "LIMIT_FILE_SIZE") {       return res.status(500).send({         bulletin: "File size cannot exist larger than 2MB!",       });     }     res.status(500).transport({       message: `Could non upload the file: ${req.file.originalname}. ${err}`,     });   } };

GCS Read Files and Download API

For File Information and Download:

getListFiles(): read all files in GCS saucepan, return list of files' information (proper name, url)
download(): receives file proper noun as input parameter, get Media Link from file's Meta Data, so redirect browser to Media Link.

          ... const { Storage } = require("@google-deject/storage"); const storage = new Storage({ keyFilename: "google-cloud-key.json" }); const bucket = storage.bucket("bezkoder-eastward-commerce"); const getListFiles = async (req, res) => {   try {     const [files] = expect bucket.getFiles();     permit fileInfos = [];     files.forEach((file) => {       fileInfos.button({         name: file.proper name,         url: file.metadata.mediaLink,       });     });     res.status(200).send(fileInfos);   } catch (err) {     console.log(err);     res.status(500).send({       bulletin: "Unable to read list of files!",     });   } }; const download = async (req, res) => {   try {     const [metaData] = wait bucket.file(req.params.proper noun).getMetadata();     res.redirect(metaData.mediaLink);        } catch (err) {     res.status(500).send({       message: "Could not download the file. " + err,     });   } }; module.exports = {   ...   getListFiles,   download, };

Define Route for uploading file

When a customer sends HTTP requests, we need to determine how the server will response by setting upwards the routes.

There are iii routes with respective controller methods:

Post /upload: upload()
GET /files: getListFiles()
GET /files/[fileName]: download()

Create alphabetize.js file inside routes folder with content similar this:

          const limited = crave("limited"); const router = limited.Router(); const controller = crave("../controller/file.controller"); permit routes = (app) => {   router.post("/upload", controller.upload);   router.get("/files", controller.getListFiles);   router.go("/files/:name", controller.download);   app.use(router); }; module.exports = routes;

You can see that nosotros use controller from file.controller.js.

Create Express app server

Finally, we create an Express server in server.js:

          const cors = require("cors"); const limited = crave("express"); const app = express(); permit corsOptions = {   origin: "http://localhost:8081", }; app.apply(cors(corsOptions)); const initRoutes = crave("./src/routes"); app.utilise(limited.urlencoded({ extended: true })); initRoutes(app); const port = 8080; app.listen(port, () => {   console.log(`Running at localhost:${port}`); });

What we practise are:
– import limited and cors modules:

Express is for edifice the Rest apis
cors provides Express middleware to enable CORS with various options.

– create an Express app, then add together cors middlewares using app.employ() method. Observe that we set origin: http://localhost:8081.
– mind on port 8080 for incoming requests.

Run & Cheque

On the project root folder, run this command: node server.js.
Then apply Postman to brand HTTP POST/GET requests.

Decision

Today we've learned how to create Google Deject Storage with Node.js File Upload instance using Limited for Residuum API and Multer for processing file middleware. You as well know how to restrict file size and take hold of Multer file size limit error.

Post-obit tutorials explain how to build Front-stop Apps to work with our Node.js Express Server:
– Angular 8 Client / Angular x Customer / Athwart eleven Client / Athwart 12
– Angular Material 12
– Vue Client / Vuetify Customer
– React Customer / React Hooks Customer
– Material UI Customer
– React Prototype Upload with Preview
– Axios Customer

If yous want to upload file into server static folder, please visit:
Node.js Express File Upload Rest API example using Multer

Happy Learning! See y'all over again.

Farther Reading

https://cloud.google.com/storage/docs/how-to
https://world wide web.npmjs.com/bundle/express
https://www.npmjs.com/package/multer

Source Code

You can find the complete source code for this tutorial on Github.

longsurvis.blogspot.com

Source: https://www.bezkoder.com/google-cloud-storage-nodejs-upload-file/