Uploading files to Amazon S3 directly from the front-end using JavaScript AWS SDK on a Django web application

Question

Uploading files to Amazon S3 directly from the front-end using JavaScript AWS SDK on a Django web application

I am working on a Django app and trying to upload files in the front end to bypass Heroku's timeout. However, I am struggling to get my code to function correctly.

<script type="text/javascript">
         AWS.config.update({
            region: 'us-east-1',
            credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: 'MY-IDENTITY-POOL-ID',
            })
        });

        var s3 = new AWS.S3({
            apiVersion: '2006-03-01',
            params: {Bucket: 'MYBUCKETNAME'}
    });

    <script type="text/javascript">

  function s3upload() { 
            var files = document.getElementById('fileUpload').files;
            if (files) 
            {
                var file = files[0];
                var fileName = file.name;
                var fileUrl = 'https://' + 'MYBUCKETNAME.s3.' + 'us-east-1' + '.amazonaws.com/' +  fileName;
                alert(fileUrl)

                var s3 = new AWS.S3({
                    apiVersion: '2006-03-01',
                    params: {Bucket: 'MYBUCKETNAME'}
                });          
                s3.upload({
                        Key: fileName,
                        Body: file,
                        ACL: 'public-read'
                    }, function(err, data) {
                        if(err) {
                            reject('error');
                        }
                        alert('Successfully Uploaded!');
                    });
            }
  };
</script>

I am aware that there might be an issue with how I am passing variables to the AWS API as this is my first time using this method. Can someone guide me on the correct way to structure the API variables above? The documentation available is quite confusing.

javascript django amazon-s3 large-files amazon-javascript-sdk

Answer 1

Answer №1

I managed to successfully implement my code using the following approach:

    <script type="text/javascript">

  function uploadToS3() { 
    AWS.config.region = 'us-east-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'My-CREDITIONALS',
    });

    var files = document.getElementById('fileUpload').files;
    if (files) 
    {
        var file = files[0];
        var fileName = file.name;
        var fileUrl = 'https://MY-BUCKET-NAME.s3.amazonaws.com/' + fileName;

        var s3 = new AWS.S3({apiVersion: '2006-03-01'}); 

        var params = {
            Bucket: 'MY-BUCKET',
            Key: fileName,
            Body: file,
        };

        var s3 = new AWS.S3({apiVersion: '2006-03-01'});  
        var options = {partSize: 5 * 1024 * 1024, queueSize: 1};

        s3.upload(params, options, function(err, data) {
                if(err) {
                    alert('error');
                } else{
                alert('uploaded suceessfully')
                };
        });
        console.log(s3)

    }
  };
</script>

For larger files over 40MB, I am currently working on enhancing the functionality to support such files.

Update: The issue with uploading large files was due to missing ETag in my CORS policy for multipart uploads. Now, it can handle files up to 470MB at a rate of about 1.5MB per second. A random integer is added to the URL to prevent naming conflicts caused by spaces, commas, and special characters like currency symbols.

    <div>
    <input type="file" id="fileUpload">
</div>

<div>
<button onclick="uploadToS3()">Submit</button>
</div>



<script type="text/javascript">

  function uploadToS3() { 
    AWS.config.region = 'us-east-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'MY-CREDENTIALS',
    });

    var files = document.getElementById('fileUpload').files;
    if (files) 
    {
        var file = files[0];
        var fileNameAllChars = file.name;
        var fileName = fileNameAllChars.replace(/\W/g, '')
        var random = Math.floor(Math.random() * 101)
        var fileUrl = 'https://MY-BUCKET.s3.amazonaws.com/' + fileName + random;
        alert(fileUrl)

        var s3 = new AWS.S3({apiVersion: '2006-03-01', Bucket: 'MY-BUCKET'}); 

        var params = {
            Bucket: 'MY-BUCKET',
            Key: fileName,
            Body: file,
        };

        var s3 = new AWS.S3({apiVersion: '2006-03-01'});  
        var options = {partSize: 15 * 1024 * 1024, queueSize: 1};

 
        s3.upload(params, options, function(err, data) {
                if(err) {
                    alert(err);
                } else{
                alert('success')
                };
        });
        console.log(s3)


    }
  };
</script>

Remember to include the JavaScript AWS SDK in the HTML header:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Unfortunately, this code does not function properly in production environments. The JavaScript AWS SDK also exceeds Heroku's 30-second timeout limit. As a result, I have developed a custom solution based on the above code. I will upload that solution later since I am currently unable to do so from my phone.

Answer 2

I managed to successfully implement my code using the following approach:

    <script type="text/javascript">

  function uploadToS3() { 
    AWS.config.region = 'us-east-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'My-CREDITIONALS',
    });

    var files = document.getElementById('fileUpload').files;
    if (files) 
    {
        var file = files[0];
        var fileName = file.name;
        var fileUrl = 'https://MY-BUCKET-NAME.s3.amazonaws.com/' + fileName;

        var s3 = new AWS.S3({apiVersion: '2006-03-01'}); 

        var params = {
            Bucket: 'MY-BUCKET',
            Key: fileName,
            Body: file,
        };

        var s3 = new AWS.S3({apiVersion: '2006-03-01'});  
        var options = {partSize: 5 * 1024 * 1024, queueSize: 1};

        s3.upload(params, options, function(err, data) {
                if(err) {
                    alert('error');
                } else{
                alert('uploaded suceessfully')
                };
        });
        console.log(s3)

    }
  };
</script>

For larger files over 40MB, I am currently working on enhancing the functionality to support such files.

Update: The issue with uploading large files was due to missing ETag in my CORS policy for multipart uploads. Now, it can handle files up to 470MB at a rate of about 1.5MB per second. A random integer is added to the URL to prevent naming conflicts caused by spaces, commas, and special characters like currency symbols.

    <div>
    <input type="file" id="fileUpload">
</div>

<div>
<button onclick="uploadToS3()">Submit</button>
</div>



<script type="text/javascript">

  function uploadToS3() { 
    AWS.config.region = 'us-east-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'MY-CREDENTIALS',
    });

    var files = document.getElementById('fileUpload').files;
    if (files) 
    {
        var file = files[0];
        var fileNameAllChars = file.name;
        var fileName = fileNameAllChars.replace(/\W/g, '')
        var random = Math.floor(Math.random() * 101)
        var fileUrl = 'https://MY-BUCKET.s3.amazonaws.com/' + fileName + random;
        alert(fileUrl)

        var s3 = new AWS.S3({apiVersion: '2006-03-01', Bucket: 'MY-BUCKET'}); 

        var params = {
            Bucket: 'MY-BUCKET',
            Key: fileName,
            Body: file,
        };

        var s3 = new AWS.S3({apiVersion: '2006-03-01'});  
        var options = {partSize: 15 * 1024 * 1024, queueSize: 1};

 
        s3.upload(params, options, function(err, data) {
                if(err) {
                    alert(err);
                } else{
                alert('success')
                };
        });
        console.log(s3)


    }
  };
</script>

Remember to include the JavaScript AWS SDK in the HTML header:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Unfortunately, this code does not function properly in production environments. The JavaScript AWS SDK also exceeds Heroku's 30-second timeout limit. As a result, I have developed a custom solution based on the above code. I will upload that solution later since I am currently unable to do so from my phone.

Uploading files to Amazon S3 directly from the front-end using JavaScript AWS SDK on a Django web application

Answer №1

Similar questions

Methods for delivering static resources on multiple routes in Express JS

Utilizing Twitter Bootstrap to populate form fields from a dropdown selection

Error: ExecJS encountered a problem when attempting to run the code in this ChatRooms

CFGRID Binding Issue: Element Not Located in CF11 Compared to CF2018

I'm having trouble getting the npm install for classnames to work within my li tag

Using Node.js variables outside of a function

Ways to recycle a section of Javascript for multiple uses on a single page

Loop through a collection of objects and combine their values

Navigating to a new page once a backend function in Express has finished executing

What is the best way to retrieve the overall error status from the Material UI DataGrid?

Tips on organizing JSON data with JavaScript

The return value from vue-query is ObjectRefImpl, not the actual data

Modify components in a web application based on the content of a JavaScript variable

Mysterious Source within AngularJS $resource

Switching the background image when hovering over a list element

"Exploring the power of Nextjs Server-Side Generation with 10 million

Creating a JSON object using various inputs through AngularJS

Obtain the current date using Moment JS in JavaScript

What is the best way to transmit a JavaScript array using Ajax?

Retrieve the array from the response instead of the object