{"id":9319,"date":"2025-08-25T17:21:24","date_gmt":"2025-08-25T11:51:24","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=9319"},"modified":"2025-08-25T17:21:28","modified_gmt":"2025-08-25T11:51:28","slug":"a-guide-to-upload-images-to-s3","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/a-guide-to-upload-images-to-s3\/","title":{"rendered":"A Guide to upload Images to S3"},"content":{"rendered":"\n

Introduction:<\/strong><\/p>\n\n\n\n

S3 (Simple Storage Service) is a cloud storage platform for handling file uploads, especially images. Whenever a mobile app or web application is developed, we need a reliable image storage solution. S3 provides scalable, secure and cost-effective storage with high performance.
In this blog, we can see the different approaches to upload images to s3.<\/p>\n\n\n\n

Why S3 storage?<\/strong>
This storage has lot of advantages:
Scalability:<\/em><\/strong> Handles millions of images
Durability: <\/em><\/strong>Has 99.99% data durability
Global CDN Integration:<\/em><\/strong> Very easily intehrated for fast image delivery
Cost-Effective:<\/em><\/strong> Pay only for what we use
Security:<\/em><\/strong> Fine-grained access control and encryption options
Integration: <\/em><\/strong>Works without any issues with other AWS services<\/p>\n\n\n\n

Prerequisites:<\/strong>
Before we start integrating, we must ensure we are having the following details.<\/p>\n\n\n\n

    \n
  1. An AWS account with s3 access<\/li>\n\n\n\n
  2. AWS Credentials (Access Key ID & secret Access key)<\/li>\n\n\n\n
  3. An S3 bucket created<\/li>\n<\/ol>\n\n\n\n

    Direct Upload from client-Side<\/strong><\/p>\n\n\n\n

    This can be easily done by using simple java script utility function.<\/p>\n\n\n\n

    Step 1:<\/em><\/strong> Install AWS SDK. The command is npm install aws-sdk.<\/p>\n\n\n\n

    Step 2:<\/em><\/strong>
    Basic Client side Upload:<\/p>\n\n\n\n

    Import the installed package.
    import AWS from ‘aws-sdk’;<\/p>\n\n\n\n

    We have to configure AWS.<\/p>\n\n\n\n

    AWS.config.update({
    accessKeyId: ‘YOUR_ACCESS_KEY’,
    secretAccessKey: ‘YOUR_SECRET_KEY’,
    region: ‘REGION USED WHILE CREATION’
    });<\/p>\n\n\n\n

    Step 3:<\/em><\/strong>
    const s3 = new AWS.S3();<\/p>\n\n\n\n

    function uploadImage(file, bucketName, key) {
    const params = {
    Bucket: bucketName,
    Key: key,
    Body: file,
    ContentType: file.type,
    ACL: ‘public-read’ \/\/ Make the file publicly accessible
    };<\/p>\n\n\n\n

    return s3.upload(params).promise();
    }<\/p>\n\n\n\n

    const result = await uploadImage(file, ‘your-bucket-name’, images\/${Date.now()}-${file.name}<\/code>);<\/p>\n\n\n\n

    If we call the function with the required parameters we can save the images in S3 bucket we have created.<\/p>\n\n\n\n

    Server-Side Upload:<\/strong><\/p>\n\n\n\n

    Server-side uploads can be done by using Node.js or Express. It is a better security process.
    Step 1:<\/em><\/strong>
    Setting Up Express Server.<\/p>\n\n\n\n

    \"\"<\/a><\/figure>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n

    Step 2:<\/em><\/strong><\/p>\n\n\n\n

    Upload images.<\/p>\n\n\n\n

    \"\"<\/a><\/figure>\n\n\n\n

    Predesigned URLs:<\/strong><\/p>\n\n\n\n

    This is a more secure way to allow direct client uploads without exposing AWS credentials.<\/p>\n\n\n\n

    Here attached steps to create a URL on both client and server side respectively.<\/p>\n\n\n\n

    \"\"<\/a><\/figure>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n

    Advanced Features:<\/strong><\/p>\n\n\n\n