Integrating an AngularJS App on Backand with Amazon S3


Overview 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 atBackand leverage AWS in several ways andin this postwe’ll look at Amazon S3, and how youcan integrate the objectstorage service into aBackand-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 apphas 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


// 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’





“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!


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 freehostedAngularJS backend with features such as user management, social signin, payment integration, security and more–GET STARTED NOW.