Upload file to s3 in front-end with JavaScript AWS SDK on django

Question

I have a djnago app and I want to upload files in the front end to by pass heroku timeout. I can't get my code to work.

<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 understand that there is something wrong with how im passing in the variables to the aws API since this is my fist time using this method. Can anyone explain the right way to construct the api variables above. All documentations is very confusing.

Answer 1

I got my code to work with the following:

    <script type="text/javascript">

  function s3upload() { 
    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>

Althought it doesn't work with files over 40MB. I am currently trying to get it to work with large files.