Cloud storage integration concept in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Express framework.

Express

const express = require('[1]');

Drag options to blanks, or click blank then click option'

Apath

Bhttp

Cexpress

Dfs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'http' instead of 'express' to import the framework.

Forgetting to use quotes around the module name.

The Express framework is imported using require('express').

2fill in blank

medium

Complete the code to initialize the Express app.

Express

const app = [1]();

Drag options to blanks, or click blank then click option'

Aexpress

Brequire

Chttp

Drouter

Attempts:

3 left

💡 Hint

Common Mistakes

Calling http() instead of express().

Using require() without arguments.

To create an Express app, call express().

3fill in blank

hard

Fix the error in the code to upload a file to AWS S3 using the AWS SDK.

Express

const AWS = require('aws-sdk');
const fs = require('fs');
const s3 = new AWS.S3();

const params = {
  Bucket: 'my-bucket',
  Key: 'file.txt',
  Body: [1]
};

s3.upload(params, (err, data) => {
  if (err) console.log(err);
  else console.log('Upload success:', data.Location);
});

Drag options to blanks, or click blank then click option'

A'file.txt'

Bfs.createReadStream('file.txt')

Cfs.readFileSync('file.txt')

DBuffer.from('file.txt')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the file name string instead of file content.

Using readFileSync which reads the whole file into memory.

To upload a file stream to S3, use fs.createReadStream('file.txt') as the Body.

4fill in blank

hard

Fill both blanks to configure Express to parse JSON and handle file uploads with multer.

Express

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: '[1]' });

const app = express();
app.use(express.[2]());

Drag options to blanks, or click blank then click option'

Auploads/

Bjson

Curlencoded

Dpublic/

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'public/' instead of 'uploads/' for multer destination.

Using 'urlencoded' instead of 'json' for JSON parsing.

Set multer's destination folder to 'uploads/' and use express.json() middleware to parse JSON bodies.

5fill in blank

hard

Fill all three blanks to create an Express POST route that uploads a single file named 'photo' and sends a success message.

Express

app.post('/upload', upload.[1]('[2]'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('[3]');
  }
  res.send('File uploaded successfully');
});

Drag options to blanks, or click blank then click option'

Asingle

Barray

Cphoto

DNo file uploaded

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'array' instead of 'single' for one file upload.

Checking wrong request property for the file.

Sending a generic error message instead of 'No file uploaded'.

Use upload.single('photo') to handle one file named 'photo'. Send 'No file uploaded' if missing.

Practice

1. What is the main purpose of integrating cloud storage with an Express app?

easy

A. To store Express app logs locally

B. To speed up the Express server response time

C. To replace the Express router functionality

D. To save and share files online safely

Solution

1. Step 1: Understand cloud storage role

   Cloud storage is used to save files online so they can be accessed safely from anywhere.

2. Step 2: Relate to Express app integration

   Integrating cloud storage with Express allows the app to upload and store files securely in the cloud.

3. Final Answer:

   To save and share files online safely -> Option D

4. Quick Check:

   Cloud storage = safe online file saving [OK]

Hint: Cloud storage means saving files online safely [OK]

Common Mistakes:

• Thinking cloud storage speeds up server response
• Confusing cloud storage with routing features
• Assuming cloud storage is for local logs

2. Which middleware is commonly used in Express to handle file uploads before sending to cloud storage?

easy

A. body-parser

B. cors

C. multer

D. helmet

Solution

1. Step 1: Identify middleware for file uploads

   Multer is a popular Express middleware designed specifically to handle multipart/form-data, which is used for uploading files.

2. Step 2: Confirm other options' roles

   Cors handles cross-origin requests, body-parser parses JSON or urlencoded data, helmet adds security headers. None handle file uploads.

3. Final Answer:

   multer -> Option C

4. Quick Check:

   File upload middleware = multer [OK]

Hint: Multer handles file uploads in Express [OK]

Common Mistakes:

• Choosing cors for file uploads
• Confusing body-parser with file upload handling
• Selecting helmet which is for security headers

3. Given this Express snippet using multer and AWS SDK, what will be the output if the upload succeeds?

const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), async (req, res) => {
  const params = { Bucket: 'mybucket', Key: req.file.filename, Body: fs.createReadStream(req.file.path) };
  await s3.upload(params).promise();
  res.send('Upload successful');
});

medium

A. SyntaxError: Unexpected token

B. Upload successful

C. Error: Missing file parameter

D. Upload failed due to AWS credentials

Solution

1. Step 1: Analyze multer usage

   Multer saves the uploaded file to 'uploads/' and adds file info to req.file, so req.file.filename and req.file.path exist.

2. Step 2: Check AWS upload call

   The s3.upload call uses the file stream correctly and awaits the promise, so if AWS credentials are correct, upload succeeds.

3. Final Answer:

   Upload successful -> Option B

4. Quick Check:

   Correct multer + AWS upload = success message [OK]

Hint: If multer and AWS upload succeed, response is success message [OK]

Common Mistakes:

• Assuming syntax error due to async/await
• Forgetting multer adds req.file
• Ignoring AWS credentials setup

4. Identify the error in this Express route for uploading to Google Cloud Storage:

app.post('/upload', upload.single('file'), (req, res) => {
  const bucket = storage.bucket('mybucket');
  bucket.upload(req.file.path, (err, file) => {
    if (err) res.status(500).send('Upload error');
  });
  res.send('File uploaded');
});

medium

A. Missing await or callback handling before sending response

B. Incorrect bucket name syntax

C. upload.single should be upload.array

D. req.file.path is undefined

Solution

1. Step 1: Check asynchronous upload call

   bucket.upload is asynchronous with a callback, but res.send is called immediately after, not waiting for upload to finish.

2. Step 2: Understand response timing

   Sending response before upload completes can cause wrong success message even if upload fails.

3. Final Answer:

   Missing await or callback handling before sending response -> Option A

4. Quick Check:

   Async upload must finish before response [OK]

Hint: Wait for async upload before sending response [OK]

Common Mistakes:

• Sending response immediately without waiting
• Assuming bucket name syntax is wrong
• Confusing single vs array upload middleware

5. You want to upload multiple files from an Express app to Azure Blob Storage and keep track of their URLs. Which approach correctly handles this scenario? const upload = multer({ dest: 'uploads/' }); app.post('/upload-multiple', upload.array('files'), async (req, res) => { const urls = []; for (const file of req.files) { const blobClient = containerClient.getBlockBlobClient(file.filename); await blobClient.uploadFile(file.path); urls.push(blobClient.url); } res.json({ uploadedUrls: urls }); });

hard

A. Uploads files sequentially, collects URLs, then responds with JSON list

B. Uploads files but responds before uploads finish

C. Uses upload.single instead of upload.array for multiple files

D. Does not push URLs to array, so response is empty

Solution

1. Step 1: Check multer usage for multiple files

   upload.array('files') correctly handles multiple files and stores them in req.files array.

2. Step 2: Analyze upload loop and response

   The for loop uses await to upload each file sequentially, pushes each URL to the urls array, then sends JSON response with all URLs.

3. Final Answer:

   Uploads files sequentially, collects URLs, then responds with JSON list -> Option A

4. Quick Check:

   Sequential upload + URL collection = correct response [OK]

Hint: Use upload.array and await loop to collect URLs before response [OK]

Common Mistakes:

• Using upload.single for multiple files
• Responding before uploads finish
• Forgetting to collect URLs in array