https://rdb-simpledb.restdb.io

Media archive API

Before we start to code, lets take a brief look at the API. It's really simple, only 4 endpoints:

Verb	Resource	Description
GET	https://[database]/media/[ID]	Gets the binary data for resource with ID. https://rdb-simpledb.restdb.io/media/56d5ac3dec65af7000000178
GET	https://[database]/media/meta[ID]	Gets the meta data for resource with ID. https://rdb-simpledb.restdb.io/media/56d5ac3dec65af7000000178/meta
POST	https://[database]/media/[ID]	Post a new media object to the database, returns ID. https://rdb-simpledb.restdb.io/media
DELETE	https://[database]/media/[ID]	Delete media object with ID. https://rdb-simpledb.restdb.io/media/56d5ac3dec65af7000000178

In our example we'll be using HTML5 and JQuery to build a web page that uploads files to the media archive and displays meta data for each file. The finished page looks something like this example: 

 
Before we begin, remember to set up your API key with CORS support. You must use a valid key that allows both POST and DELETE for this example.

var apikey = "569a2c875667r9cf4b98qa50";
$.ajaxPrefilter(function( options ) {
	if ( !options.beforeSend) {
		options.beforeSend = function (xhr) { 
			xhr.setRequestHeader('x-apikey', apikey);
		}
	}
});

POST a new image/file to the database

Now that our CORS API key is set up, we can move on to the HTML markup code for uploading files to the database. The HTML is just one input with type=file and a button that calls our Javascript when clicked.

<p><input type="file" name="file1" id="file1">	
<p><button id="uploadButton" type="button" onclick="ff()">Upload</button>

We use Ajax to post files, and to start that process we need to create a FormData object with the selected files.

var formData = new FormData();
var files = $('#file1')[0].files; 
// Loop through each of the selected files.
for (var i = 0; i < files.length; i++) {
	var file = files[i];
	var name = files[0].name;
	// Add the file to the request.
	formData.append('myfile', file, file.name);
}

The FormData object now contains the selected files ready to be uploaded. The code to upload files is straightforward.

$.ajax({
	"data": formData,
	"url": "https://rdb-simpledb.restdb.io/media",
	"method": "POST",
	"contentType": false,
}).done(function (response) {
	...
});

If the upload is a success, the returning data will contain a reference for the upload bulk and an array with the database ids for each file.

{
  "msg": "OK",
  "uploadid": "6772edc9cfcf010d04977a63b9bc3eb8",
  "ids": [
    "570e052d98290e490000006e"
  ]
}

GET an image/file from the database

To display the uploaded image, we just grab the id and generate an img tag with the correct source. In this example we use a little trick, using the onerror event to insert an alternative image for files that aren't an image.

<img src="https://rdb-simpledb.restdb.io/media/570e052d98290e490000006e" onerror="this.src='... some url ...'">

GET image/file meta data

In addition to uploading and storing the file, restdb.io also extracts all metadata from the uploaded file object and stores it in the media archive. To retrieve the metadata for an image, we use the ID to call the API.

$.getJSON("https://rdb-simpledb.restdb.io/media/570e052d98290e490000006e/meta", function(metadata){
	...
});

The return object contains all data about the media resource. The exif property contains additional meta data associated with the particular file type.

{
    "_id": "570e0a1798290e4900000071",
    "uploadid": "e45ad57eddffa14f5e8cb76caefa7481",
    "_created": "2016-04-13T08:57:59.821Z",
    "_createdby": "api",
    "app": "rdb-simpledb",
    "origname": "AutoWallpaper_ 300150.jpg",
    "file": "9b79501dbd42b59b12d737b4f66fe0f7AutoWallpaper_ 300150.jpg",
    "fullname": "/rdb-simpledb/mediaarchive/9b79501dbd42b59b12d737b4f66fe0f7AutoWallpaper_ 300150.jpg",
    "exif": {
      ...
    },
    "owner": "rdb-simpledb",
    "mediatype": "image"
  }

A typical exif meta data example for a JPEG image looks like:

DELETE image/file from the database

To delete a file from the media archive, we use the ID for the file to be deleted and call the API.

$.ajax({
	"url": 'https://rdb-simpledb.restdb.io/media/570e0a1798290e4900000071',
	"method": 'DELETE'
})
.done(function(resp){
	...
})
.fail(function(error){
	...
});	

We hope this example has shown you how easy it is to integrate dynamic media content in your application.