{"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

      \n
    • We can also advanced features like Image optimization and resizing for better performance.<\/li>\n\n\n\n
    • We can also include progress tracking during file upload process.<\/li>\n\n\n\n
    • Multiple file uploads are handled.<\/li>\n\n\n\n
    • Improved error handling and validation<\/li>\n<\/ul>\n\n\n\n

      Best Practices:<\/strong><\/p>\n\n\n\n

        \n
      1. Considering security purposes we should always store keys as environemntal variables and should not use directly in our code either client-side or server-side.<\/li>\n\n\n\n
      2. We should follow performance optimization methods.<\/li>\n\n\n\n
      3. To track the progress we should include the error handling techniques. <\/li>\n<\/ol>\n\n\n\n

        Using these methods, we can upload images to cloud storage and can preserve them.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Introduction: S3 (Simple Storage Service) is a cloud storage platform for handling file uploads, especially images. Whenever a mobile app […]<\/p>\n","protected":false},"author":502,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-9319","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2qj","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/502"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=9319"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9319\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=9319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=9319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=9319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}