Forem: Jan Alfred Violanta

Building a Self-Destructing File Uploader with AWS Lambda, API Gateway, S3, and React

Jan Alfred Violanta — Thu, 10 Apr 2025 00:34:49 +0000

Do you want to share a file to someone—ensuring that it disappears(or get deleted) after a short time maybe for privacy or for temporary access?

In this blog, I’ll walk you through how I built a Self-Destructing File Uploader app using Amazon S3, AWS Lambda, API Gateway, and React.

What Each AWS Service Does in This Project

🪣 Amazon S3 – Used to store the uploaded files temporarily. S3 Lifecycle Rules are configured to automatically delete files after a specified time, making them "self-destructing."

🛠️ AWS Lambda – Powers the backend logic. It generates pre-signed URLs that allow secure file uploads to S3 without exposing direct credentials.

🌐 API Gateway – Acts as a bridge between the frontend and Lambda. It exposes an HTTP endpoint that React can call to get the pre-signed URL.

Frontend UI In This project

⚛️ React – Provides the frontend interface for users to upload files and generate shareable self-destructing links.

Now that we know what each component will do in this project—let's get to building.

Step-by-Step Guide

S3 Setup

1.) Navigate to Simple Storage Service (S3) in your AWS Management Console.

2.) Click on Create bucket then set its bucket name (this will be the storage of your temporary files) >> scroll down and make sure to have Block all public access on then click Create bucket

3.) Once your bucket is created navigate to General purpose buckets and click the bucket you just created

4.) Go to Permissions tab then set this as your bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "DenyUnSignedRequests",
            "Effect": "Deny",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::name-of-your-bucket/*",
            "Condition": {
                "Bool": {
                    "aws:SecureTransport": "false"
                }
            }
        }
    ]
}

This bucket policy is designed to enhance security by denying all access to your S3 bucket if the request is not using HTTPS (SecureTransport).

This policy is like saying: "Only talk to me if you're using a secure line."

If someone tries to upload or access files from the bucket without using a safe, encrypted connection (HTTPS), the request gets automatically blocked. It’s just a way to make sure all data stays private and protected.

5.) After setting up the bucket policies navigate to Management and click on Create a lifecycle rule.

6.) Enter your lifecycle rule name >> Apply to all objects in the bucket (or limit it) >> Expire current versions of objects.

7.) Set the number of days for the object to be "self-destructing" or automatically deleted—then finally create the rule.

Now that your storage is done—let's move on to creating the Lambda function ^_^.

Lambda Setup

1.) Open your AWS Management console and look for Lambda.

2.) Click on Create function >> Enter the function name >> Select the latest version of python as runtime >> create a role and just put s3 read only for now >> scroll down then create the function.

3.) Click your created function then scroll down to code and input your lambda function for handling files and generating the presigned url >> here is the code I used as the lambda function.

import json
import base64
import uuid
import boto3

s3 = boto3.client('s3')
BUCKET = 'bucket-name-here'

def lambda_handler(event, context):
    try:
        body = json.loads(event['body'])

        file_name = body.get('fileName', f"{uuid.uuid4()}.png")
        file_data = body.get('fileData')

        if not file_data:
            return {
                'statusCode': 400,
                'body': json.dumps({'error': 'No file data provided'})
            }

        file_extension = file_name.split('.')[-1].lower()
        content_types = {
            'png': 'image/png',
            'jpg': 'image/jpeg',
            'jpeg': 'image/jpeg',
            'gif': 'image/gif',
            'pdf': 'application/pdf'
        }

        if file_extension not in content_types:
            return {
                'statusCode': 400,
                'body': json.dumps({'error': 'Unsupported file type'})
            }

        file_data_decoded = base64.b64decode(file_data)
        file_key = f"uploads/{uuid.uuid4()}.{file_extension}"

        # Upload the file to S3
        s3.put_object(
            Bucket=BUCKET,
            Key=file_key,
            Body=file_data_decoded,
            ContentType=content_types[file_extension]
        )

        # Generate the presigned URL
        url = s3.generate_presigned_url(
            'get_object',
            Params={'Bucket': BUCKET, 'Key': file_key},
            ExpiresIn=3600  # Expiry time in seconds (Adjust this based on your preferred time)
        )

        return {
            'statusCode': 200,
            'headers': {
                'Access-Control-Allow-Origin': '*', #restrict this part to your specific domain (just used this for testing purposes)
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'OPTIONS, POST'
            },
            'body': json.dumps({
                'message': 'File uploaded successfully',
                'fileKey': file_key,
                'presignedURL': url,
                'expiresIn': 3600
            })
        }
    except Exception as e:
        return {
            'statusCode': 500,
            'body': json.dumps({'error': str(e)})
        }

This AWS Lambda function lets users upload a file (like an image or PDF) from your frontend, stores it temporarily in an S3 bucket, and then gives back a special link for accessing it or downloading it.

4.) Go back up then click on Add Trigger >> Select S3 as source >> then choose the bucket your created earlier

This will make the lambda function trigger whenever an object has been uploaded/created in the S3 bucket you created and returns the presigned url that will be sent to the frontend later on.

5.) Finally, go to Configuration >> Permissions >> Click the role name >> Add Permissions >> Create Inline Policies and attach this policy to ensure that the lambda function can put objects in the s3.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3-object-lambda:PutObject"
            ],
            "Resource": "arn:aws:s3:::your-bucket-name-here/*"
        }
    ]
}

Now that your lambda function is ready—let's move to the creation of the API using the API Gateway 🙌

Api Gateway Setup

1.) Look for the API Gateway in your AWS Management Console

2.) Create an API >> Build with HTTP API >> then set its name

3.) Click Add Integration and choose Lambda

4.) Add a Route for uploading using the API >> review then create the API

5.) On the left side of the screen of your selected API navigate to stages and look for the $default and click it. It should contain your Invoke url copy that and just put '/upload' in the end of the url

It should somewhat look like this

'https://qwerty1234.execute-api.us-east-1.amazonaws.com/upload'

6.) Navigate to CORS and configure it like the following:

Access-Control-Allow-Origin: http://localhost:5173 << Modify this to your specific domain
Access-Control-Allow-Methods: POST & OPTIONS
Access-Control-Allow-Headers: content-type

Your API and the rest of the required services are ready! time to test it using your frontend 😁.

You may create your own frontend it just needs to contain a file uploader, a way to trigger the api and retrieve the generated url of the lambda function

Checkout my frontend code here: github link

Sample Output

Why Create This?

Building a self-destructing file uploader helps to address the issue of temporary file sharing without the burden of manual cleanup where privacy, minimalism, and automation are important.

This project gives you the opportunity to:

🔐 Share files temporarily and securely without leaving traces.
🧹 Using S3 Lifecycle rules, automate file destruction to conserve storage.
⚙️ Use serverless AWS technologies for low maintenance and scalability.

Possible Applications

Such setups could develop into simple tools and integrations with practical applications such as:

📂 One-time file distribution solutions for sensitive documents or links.
📩 Event-based or feedback file drops can be uploaded via temporary upload gateways.
🔒 Services focusing on privacy where users are sure that their data will not last longer than intended.

Enhancing Accessibility: Integrating Amazon Transcribe & Polly into an Assistive Menu

Jan Alfred Violanta — Tue, 25 Feb 2025 10:17:09 +0000

Introduction

As technology advances, accessibility is an important part of designing inclusive digital experiences. Numerous users struggle to navigate new interfaces with visual impairments, motor limitations, or other needs for accessibility. Voice interaction can bridge the gap by allowing hands-free navigation and audio feedback. As part of my personal project, I created an assistive menu using Amazon Transcribe and Polly along with React as the frontend and see how voice technology can be used to improve accessibility.

What Are Amazon Transcribe & Polly?

Amazon Transcribe – A speech-to-text service that converts spoken language into written text in real-time or batch mode, enabling voice-based interactions in applications.

Amazon Polly – A text-to-speech service that transforms text into natural-sounding speech, providing audio feedback to improve accessibility for users who benefit from auditory prompts.

Why Amazon Transcribe and Polly?

As essential elements of my assistive menu, I selected Amazon Polly and Amazon Transcribe to increase accessibility. With Amazon Transcribe, users may use voice commands to interact with the interface, allowing hands-free navigation by converting speech to text. In order to improve the experience for users who are visually impaired or who require auditory cues, Amazon Polly transforms text into speech that sounds natural. Users can traverse the menu more conveniently and inclusively without depending entirely on conventional input techniques thanks to the combination of these technologies.

Implementation Overview

I integrated these services by following these key steps.

1.User Speech Capture:

Utilized Web Speech API for recording user input.
Sent the audio to Amazon Transcribe for the transcription process.

2.Speech-To-Text Processing:

Transcribe returning a text version of the user's speech.
Parsed the text for relevant commands (e.g., "open menu")

3.Generating Speech Feedback:

Used Amazon Polly for converting system responses into speech.
Played the generated audio from blocks of text to provide verbal feedback.

4.UI Integration

Built a simple UI that can be updated manually or using voice command.
Provided both text-based and audio-based feedback.

Code Implementation

Transcribing Speech:

export async function transcribeSpeech(setToastMessage, setShowToast) {
  try {
    setToastMessage("🎤 Listening...");
    setShowToast(true);
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];

    mediaRecorder.ondataavailable = (event) => {
      audioChunks.push(event.data);
    };

    return new Promise((resolve, reject) => {
      mediaRecorder.onstop = async () => {
        try {
          setToastMessage("📤 Uploading audio...");
          const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
          const s3Uri = await uploadAudioToS3(audioBlob);
          setToastMessage("⏳ Transcription in progress...");

          const transcribeParams = {
            TranscriptionJobName: `transcription-${Date.now()}`,
            LanguageCode: "en-US",
            MediaFormat: "webm",
            Media: { MediaFileUri: s3Uri },
            OutputBucketName: bucketName,
          };

          await transcribeClient.send(new StartTranscriptionJobCommand(transcribeParams));
          let jobData;
          let transcriptionStatus;
          do {
            await new Promise((res) => setTimeout(res, 3000));
            jobData = await transcribeClient.send(new GetTranscriptionJobCommand({
              TranscriptionJobName: transcribeParams.TranscriptionJobName,
            }));
            transcriptionStatus = jobData.TranscriptionJob.TranscriptionJobStatus;
          } while (transcriptionStatus === "IN_PROGRESS");

          if (transcriptionStatus !== "COMPLETED") {
            reject("Transcription failed.");
            return;
          }

          setToastMessage("✅ Transcription complete!");
          const resultUrl = new URL(jobData.TranscriptionJob.Transcript.TranscriptFileUri);
          const response = await fetch(resultUrl.href);
          const json = await response.json();
          resolve(json.results.transcripts[0].transcript);
        } catch (error) {
          setToastMessage("❌ Error during transcription.");
          reject(error.message);
        }
      };
      mediaRecorder.start();
      setTimeout(() => mediaRecorder.stop(), 3000);
    });
  } catch (error) {
    throw new Error("Failed to record audio: " + error.message);
  }
}

Uploading Audio to S3

export async function uploadAudioToS3(audioBlob) {
  const fileKey = `recordings/${Date.now()}.webm`;
  try {
    const arrayBuffer = await audioBlob.arrayBuffer();
    await s3Client.send(
      new PutObjectCommand({
        Bucket: bucketName,
        Key: fileKey,
        Body: arrayBuffer,
        ContentType: "audio/webm",
      })
    );
    return `s3://${bucketName}/${fileKey}`;
  } catch (error) {
    console.error("Error uploading audio to S3:", error);
    throw error;
  }
}

Synthesizing Speech with Polly

export async function synthesizeSpeech(text) {
  const params = {
    OutputFormat: "mp3",
    Text: text,
    VoiceId: "Joanna",
  };

  try {
    const command = new SynthesizeSpeechCommand(params);
    const response = await pollyClient.send(command);
    if (!response.AudioStream) {
      throw new Error("Polly did not return an audio stream.");
    }
    const audioStream = await response.AudioStream.transformToByteArray();
    const audioBlob = new Blob([audioStream], { type: "audio/mpeg" });
    return URL.createObjectURL(audioBlob);
  } catch (error) {
    console.error("Error synthesizing speech:", error);
    throw error;
  }
}

To use Amazon Transcribe, Polly, and S3, you need an IAM user with the correct permissions. This ensures secure access to AWS services within your project

Essential Policies to Attach:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "transcribe:StartTranscriptionJob",
                "transcribe:GetTranscriptionJob",
                "transcribe:ListTranscriptionJobs"
            ],
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR_BUCKET_NAME",
                "arn:aws:s3:::YOUR_BUCKET_NAME/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "polly:SynthesizeSpeech"
            ],
            "Resource": "*"
        }
    ]
}

Challenges and Limitations

Transcribe Processing Delay: Despite Transcribe being accurate—one major challenge I encountered was that Amazon Transcribe took a while to process speech, leading to delays in activating voice commands. This impacted the user experience, as the system was not as responsive as I intended.
Multilingual and Accent Challenges in Polly: I noticed that some voices may not accurately capture regional pronunciations or speech patterns. This can lead to a less natural listening experience, especially when switching between languages or using localized terms.

Check it out on GitHub

You can find my full source code for this assistive menu project on GitHub: Assistive Menu Project

Menu Preview

Enabling Read Aloud

Activating Voice Command

Accessibility Help

Conclusion

Integrating Amazon Transcribe and Polly into a project was an insightful learning experience. It reinforced the importance of accessibility and opened various ideas for voice-driven applications. If you're interested in adding similar features to your projects, AWS provides a powerful set of tools to get started.

Amazon Lightsail: Instances, Access, and Best Practices

Jan Alfred Violanta — Fri, 20 Dec 2024 09:01:45 +0000

If you're a developer, tech enthusiast (or a cloud computing enthusiast like me), or small business owner looking for an easy, cost-effective way to start with cloud computing, then Amazon Lightsail may be your answer. It is intended to make deploying and managing virtual private servers easy, and this means setting up apps and resource management even easier for beginners. To help you get the most out of this robust yet user friendly platform, I will go over the steps to set up a Lightsail instance, how you access it, and go through some of the best practices for this service.

What is Amazon Lightsail?

AWS Lightsail is a part of Amazon Web Services that provides pre-configured virtual servers, networking storage, and an easy-to-use interface for quick application deployment. It is great for:

Hosting websites
Executing basic applications
Managing lightweight databases
Setting up development environments

Lightsail's consistent pricing and seamless integration with the larger AWS ecosystem make it a powerful yet a reasonably priced option.

Setting Up an Amazon Lightsail Instance

Step 1: Log in to the AWS Management Console

1.) Search for Amazon Lightsail in the search bar located at the top left of the console and look for Lightsail in the filtered results.

Step 2: Create an Instance

1.) Click on the Create instance button.
2.) Choose your instance location (region) to ensure low latency for your users.

Step 3: Select an Instance Image

1.) Choose a Platform

2.) Choose a Blueprint (The blueprints available vary depending on the platform selected)

Step 4: Choose Your Plan

1.) Choose a Network Type (The selected blueprint is Linux, IPv6-only is available on the Windows platform, and when OS only on Linux/Unix for the selected blueprint)

2.) Select Size (Prices vary depending on the selected plan and instance image)

Step 5: Configure Your Instance
1.) Assign a unique name to your instance

Step 6: Launch Your Instance
1.) Click Create Instance to create and see your newly created Instance. This should be ready within a few minutes.

Now that you’ve successfully created your instance, let’s dive into how you can access it! 😁

Accessing Your Instance

First Things First: What is SSH?

SSH, is a tool that lets you securely connect to a server over the internet. Think of it as a private, encrypted tunnel that lets you control your server, run commands, and transfer files safely. With SSH, you can manage your Lightsail instance directly, just like sitting in front of a computer, but from anywhere in the world.

Option 1: Connect via SSH

1.) Navigate to your created instance.

2.) On the connect section, click on Connect using SSH to directly access your instance through the Amazon Lightsail console.

Option 2: Using a Third-Party SSH Client

1.) Download the SSH Key located in the Use your own SSH client section.
2.) Use an SSH client like Terminal (Linux / macOS) or PuTTY (Windows) to connect.

Using PuTTY to access Lightsail Instances

1.) Install PuTTY from their website or through the Microsoft Store.

2.) Convert the Private Key:

Open PuTTYgen
Click Load, and select the .pem file you downloaded.
Save the key as a .ppk file by clicking Save private key.

3.) Configure PuTTY:

Open PuTTY and enter the Public IP Address of your Lighsail instance.
In PuTTY, navigate to Connection -> SSH -> Auth -> Credentials and browse for the private key you just saved.

4.) Connect to Your Instance:

Click Open to start the connection.
Log in with the username provided by Lightsail which can be seen under the Connect tab of your instance.

Creating Backups with Amazon Lightsail

1.) Click on the instance you created

2.) Navigate to the Snapshots section

3.) Click Create snapshot then Provide a name for your snapshot.

Why do Creating Snapshots Matter?
Snapshots enable you to roll back your instance to any point in time, ensuring that downtime and data loss are at a minimum.

Best Practices for Amazon Lightsail

1.) Make Regular Backups: Make regular backups of your instance using Lightsail snapshots.
2.) Optimize Security: Turn on firewall rules and update frequently to protect your instance.
3.) Utilize Monitoring Tools: Leverage Lightsail's built-in metrics to monitor performance and resource usage.
4.) Plan for Scalability: Design your applications to scale using Lightsail’s load balancers and additional instances.
5.) Leverage Automation: Automate repetitive operations with technologies like AWS CLI to increase efficiency.

Conclusion

Amazon Lightsail offers a simple platform for the deployment and management of cloud applications. Its user friendly interface, consistent pricing structure, and integration with AWS services make it an excellent option for developers and small organizations.
This post is a part of my learning journey in AWS, during which I had initially planned to deploy a simple web application on Lightsail. Though I did not have the required knowledge at that time, the experience and new insights were very useful for my learning. I am looking forward to exploring more of the AWS ecosystem and further improving my skills in cloud computing. 😁🙌