A Seamless Integration with AWS S3 for Data Storage and Retrieval

Do you know how application layer communicate to aws s3 for storing documents,images or files ?

In this blog we will talk about how the user send file to backend server and backend server stores the file in s3 storage using accesskey,secretkey and filekey.

AWS S3 is nothing but a simple storage service which is a highly scalable and reliable object storage service offered by Amazon Web Services (AWS). It lets you store any amount of data – from personal photos and documents to massive datasets and application files – in the cloud, accessing it from anywhere at any time.

In this blog we will integrate s3 with application layer where user upload file from the interface , then the route handler in the backend server handles the request by storing the file in the s3 bucket with some configuration which we will discuss in a moment.

Lets start from frontend application from where user sends file.

Step 1: Frontend with ReactJS

1.1 Install AWS SDK for JavaScript

In our ReactJS project, install the AWS SDK :

npm install aws-sdk

1.2 Create a File Upload Component

Create a React component for file uploads, let’s call it FileUploader.js:

import React, { useState } from 'react';
import { S3 } from 'aws-sdk';

const FileUploader = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    const s3 = new S3();
    const bucketName = 'your-s3-bucket-name';
    const fileKey = `uploads/${selectedFile.name}`;

    const params = {
      Bucket: bucketName,
      Key: fileKey,
      Body: selectedFile,
    };

    try {
      await s3.upload(params).promise();
      console.log('File uploaded successfully to S3');
    } catch (error) {
      console.error('Error uploading file to S3:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload File</button>
    </div>
  );
};

Step 2: Backend using Nodejs with TypeScript

2.1 Create an API Endpoint for File Upload

In your Nodejs backend with typescript , let’s say you have an Express server. Create an endpoint for handling file uploads, like uploadRoute.ts:

import { Router, Request, Response } from 'express';
import multer from 'multer';
import { S3 } from 'aws-sdk';

const router: Router = Router();
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.single('file'), async (req: Request, res: Response) => {
  const s3 = new S3();

  // Specify the S3 bucket name and file key
  const bucketName: string = 'your-s3-bucket-name';
  const fileKey: string = `uploads/${req.file.originalname}`;

  // Set up parameters for S3 upload
  const params: S3.Types.PutObjectRequest = {
    Bucket: bucketName,
    Key: fileKey,
    Body: req.file.buffer,
  };
  // fileKey is the unique indentifier for that specific file which makes searching fast
  // Upload the file to S3
  try {
    const data: S3.ManagedUpload.SendData = await s3.upload(params).promise();
    console.log('File uploaded successfully to S3:', data.Location);
    res.status(200).json({ message: 'File uploaded successfully' });
  } catch (error) {
    console.error('Error uploading file to S3:', error);
    res.status(500).json({ error: 'Internal Server Error' });
  }
});

export default router;

Step 3: Integration

3.1 Connect the Dots

Now, connect your ReactJS frontend and TypeScript backend. Ensure your frontend sends a request to the backend’s /upload endpoint with the selected file.

Do you know how your application stores images and documents ?