AJAX Upload a User Selected File to AWS S3

In modern web applications, the ability to allow users to upload files is a common requirement. One popular cloud storage solution for storing these uploaded files is Amazon Web Services (AWS) S3. AJAX (Asynchronous JavaScript and XML) provides a way to perform these file uploads asynchronously, without reloading the entire web page. This blog post will guide you through the process of using AJAX to upload a user - selected file to AWS S3, covering core concepts, typical usage scenarios, common practices, and best practices.

Table of Contents#

  1. Core Concepts
    • AJAX
    • AWS S3
  2. Typical Usage Scenarios
  3. Common Practice
    • Setting up AWS S3
    • Front - end code for file selection and AJAX upload
    • Back - end code for generating presigned URLs
  4. Best Practices
    • Security considerations
    • Error handling
    • Performance optimization
  5. Conclusion
  6. FAQ
  7. References

Article#

Core Concepts#

AJAX#

AJAX is a set of web development techniques that uses various web technologies on the client - side to create asynchronous web applications. Instead of making a full - page request to the server, AJAX allows you to send and receive data asynchronously in the background. This means that the user can continue interacting with the web page while the file upload is in progress.

AWS S3#

Amazon S3 (Simple Storage Service) is an object storage service offered by AWS. It provides a highly scalable, reliable, and inexpensive way to store and retrieve data. S3 stores data as objects within buckets. Each object has a unique key, and you can set various permissions and access controls on buckets and objects.

Typical Usage Scenarios#

  • Image and Video Sharing Platforms: Users can upload their photos and videos to the platform. AJAX uploads ensure a smooth user experience as they can continue browsing the site while the upload is happening.
  • Document Management Systems: Allows users to upload documents such as PDFs, Word files, etc. to the system for storage and sharing.
  • E - commerce Platforms: Sellers can upload product images and catalogs to the platform.

Common Practice#

Setting up AWS S3#

  1. Create an AWS Account: If you don't have one already, sign up for an AWS account at https://aws.amazon.com/.
  2. Create an S3 Bucket: Navigate to the S3 service in the AWS Management Console. Click on "Create bucket" and follow the wizard to configure the bucket, including setting the name, region, and access permissions.
  3. Configure Bucket Permissions: You need to set up proper permissions to allow your application to upload files to the bucket. You can use IAM (Identity and Access Management) policies to manage access.

Front - end code for file selection and AJAX upload#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale=1.0">
    <title>AJAX File Upload to S3</title>
</head>
 
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload</button>
 
    <script>
        function uploadFile() {
            const file = document.getElementById('fileInput').files[0];
            if (!file) {
                alert('Please select a file');
                return;
            }
 
            // Get a presigned URL from the back - end
            fetch('/getPresignedUrl', {
                method: 'POST',
                headers: {
                    'Content - Type': 'application/json'
                },
                body: JSON.stringify({ fileName: file.name })
            })
           .then(response => response.json())
           .then(data => {
                const presignedUrl = data.presignedUrl;
                const xhr = new XMLHttpRequest();
                xhr.open('PUT', presignedUrl, true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            alert('File uploaded successfully');
                        } else {
                            alert('Upload failed');
                        }
                    }
                };
                xhr.send(file);
            });
        }
    </script>
</body>
 
</html>

Back - end code for generating presigned URLs#

Here is an example using Node.js and the AWS SDK:

const express = require('express');
const aws = require('aws - sdk');
const app = express();
const PORT = 3000;
 
app.use(express.json());
 
// Configure AWS
aws.config.update({
    accessKeyId: 'YOUR_ACCESS_KEY',
    secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
    region: 'YOUR_BUCKET_REGION'
});
 
const s3 = new aws.S3();
 
app.post('/getPresignedUrl', (req, res) => {
    const { fileName } = req.body;
    const bucketName = 'YOUR_BUCKET_NAME';
    const params = {
        Bucket: bucketName,
        Key: fileName,
        Expires: 3600
    };
 
    s3.getSignedUrl('putObject', params, (err, presignedUrl) => {
        if (err) {
            console.error(err);
            res.status(500).send('Error generating presigned URL');
        } else {
            res.json({ presignedUrl });
        }
    });
});
 
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Best Practices#

Security considerations#

  • Use HTTPS: Always use HTTPS to encrypt the data being transferred between the client and the server. This protects the file content and the presigned URL from being intercepted.
  • Proper IAM Permissions: Only grant the minimum necessary permissions to your AWS IAM roles. For example, the role used to generate presigned URLs should only have the s3:PutObject permission for the specific bucket.

Error handling#

  • Client - side: Display meaningful error messages to the user. For example, if the upload fails due to a network issue, inform the user to check their connection.
  • Server - side: Log errors on the server for debugging purposes. Return appropriate HTTP status codes and error messages to the client.

Performance optimization#

  • Chunked Uploads: For large files, consider using chunked uploads. This allows the file to be uploaded in smaller parts, reducing the risk of a single large upload failing due to network issues.
  • Caching: Implement caching mechanisms to reduce the number of requests for presigned URLs if possible.

Conclusion#

Uploading a user - selected file to AWS S3 using AJAX provides a seamless user experience and efficient data storage. By understanding the core concepts, following common practices, and implementing best practices, you can build a reliable and secure file upload system for your web application.

FAQ#

  • Q: Can I upload multiple files at once?
    • A: Yes, you can modify the front - end code to handle multiple file selections and loop through each file to get a presigned URL and upload it.
  • Q: How long are presigned URLs valid?
    • A: The validity period of a presigned URL can be set when generating it. In the example above, it is set to 3600 seconds (1 hour).
  • Q: What if the user closes the browser during the upload?
    • A: The upload will be interrupted. You can implement a resume feature by keeping track of the uploaded chunks on the server and allowing the client to resume from where it left off.

References#

2025-10