Back to blog home page

Integrating an AngularJS App on Backand with Amazon S3

Posted by on Oct 30, 2015

Expanding Available Functionality

Amazon Web Services, or AWS, offer a lot of useful functionality for web developers: from hosting, to distributed computing, to data storage, and much more. We at Backand leverage AWS in several ways and in this post we’ll look at Amazon S3, and how you can integrate the object storage service into a Backand-powered application.

A Quick S3 Overview

Amazon’s Simple Storage Service, or S3, is an online file storage web service offered as a part of the Amazon Web Services suite of functionality. It was first launched in the US in 2006, and uses standard web service interfaces for communication. Service consumers can simply authorize their app with S3, then perform a series of web service calls to manage their S3 storage bucket. By using this service, a developer can offload concerns about data availability, reliability, and storage space to Amazon’s server farms, simply paying a usage-based fee each month for the data stored.

Server-Side Action

Backand’s Noterious app has an excellent example of how simple an integration with S3 is. The functionality revolves around the creation of server-side actions to wrap the web service requests made over HTTP. The actual integration looks like this:

var data =
{
// enter your aws key
“key” : “AKIAIJX26SY3COIWV4FQ”,

// enter your aws secret key
“secret” : “ogun3pSOyw8FtP5i17s2STBPO9jQ8cs+lnpxwg82”,

// this should be sent in post body
“filename” : parameters.filename,
“filedata” : parameters.filedata,

“region” : “US Standard”,
“bucket” : “backand-free-upload”

}
var response = $http({method:”PUT”,url:CONSTS.apiUrl + “/1/file/s3” ,
data: data, headers: {“Authorization”:userProfile.token}});

return response;

The above code is inserted into a new Custom Server-Side JavaScript Action created using the Backand dashboard. It pulls the file information from the parameters passed to the action, then sends a request to S3’s file upload endpoint, putting the file into the bucket ‘backand-free-upload’. By customizing the above code, you can achieve any underlying file structure you desire.

Client-Side Integration

Of course the server-side code is only half of the story – we need to integrate this wrapped API call into our application for it to be useful. Going back to the Noterious demo application, you can see an example of this taking place in the Notes model class:

//Send file content in base64 to Backand on-demand action
self.s3FileUpload = function(filename, filedata, success, error)
{
return $http ({
method: ‘POST’,
url: Backand.getApiUrl() + ‘/1/objects/action/notes?name=upload2s3’,
headers: {
‘Content-Type’: ‘application/json’
},
data:
{
“filename”:filename,
“filedata”: filedata.substr(filedata.indexOf(‘,’)+1, filedata.length) //need to remove the file prefix type
}
});
};

The above code is pretty straightforward. It defines a function – s3FileUpload – that takes input from your application in the form of file data, and then communicates with your new custom JavaScript action via an HTTP POST request using JavaScript’s built-in AJAX capabilities. Simply call this function from your Angular code, and you will be uploading files in no time!

Conclusion

This example is obviously very basic, but it should serve as a guide for what is possible using Backand as your back-end. With a few minor modifications, you can use the supplied example to build out the rest of a file management system – everything from bucket and folder management to file creation and deletion. And all of this without investing a penny into a back-end server infrastructure – Backand and AWS do all of the heavy lifting. By leveraging this functionality, you can get your app up and running – and scaling and performing – more quickly than ever.

Get a free hosted AngularJS backend with features such as user management, social signin, payment integration, security and more – GET STARTED NOW.