Uploading files to Tiggzi Database

What are we going to build?

In this tutorial we are going to build a mobile app that uploads images to Tiggzi database.

The app is going to be HTML5 app that uses browsers File API (different from Tiggzi Database File API). File API is supported in most desktop browsers. However, if you want to try this app in a mobile browser, you would need to install Firefox Mobile or Opera Mobile browser. Both have support for the File API. More information on which browsers support the File API.

The app looks like this:

Before you start

• Tutorial level: Advanced
• Prerequisites: Completed at least 1 beginner and 1 other advanced tutorial.

Creating new app

Let’s start by creating a new app.

1. From Apps page, for app name enter UploadingImagesApp and click Create.
2. A new app will be created, and the mobile builder will be loaded.
3. When the mobile builder loads, you should see something like this:
4. On the left-hand side click Pages > startSceen - editor with an empty startScreen will open:

Building the Sign In page

File upload functionality requires a user to be signed in. User managment feature is built into Tiggzi database, so it’s pretty simple to implement. Rename the default first page to Login and then build the following page:

• The input fields are named: username and password.
• Name and Password are both placeholders.
• The Password field, its type is set to password.

Creating a new database and user

1. To create a new database, go to http://io.tiggzi.com or click the Backend Services button
2. Enter FileDB for database name and click Create. You will see the database Dashboard:
   
3. Next, open Users tab
4. Click New (on the left-hand side) to create a new user.
5. Enter the username and password:
   

6. Click Add to save this user.

You can create as many users as you want.

It’s also possible to create users via REST API, but in this tutorial we are manually entering a user directly into the database.

Signing in the user into the app

Creating Sign In REST service

Now that we got a Sign In, a user in the database, let’s work on creating the actual service to sign in the user.

You can always create a new REST service by going to Create New > Service and then entering all the information such as URL, and request parameters. There is a new and faster way to do the same with database integration in the app builder.

1. Click Create New > Database Services
2. Select FileDB database:
   
3. We only need Login, so check that service.
4. Click Import selected services button.

Under Services, the FileDB_login_service will be created (plus a settings file that has the database ID in it). Next we need to add the service to the page and map it to the page. If you open the service, you will see that the URL, request parameters and response parameters are all defined.

Mapping the service to the page

1. Let’s first add the service to the page. To add a service instance to the page, go to Data tab > from list select Service > FileDB_login_service, click Add button.
2. Let’s also rename the service instance, set its name to signin.
3. To map the service to the page, click Edit Mapping button.
4. For Request Mapping, map the components as follows:
   
5. Switch to Response Mapping.
6. We want to save the sessionToken in local storage. On the right-hand side, in the input at the top enter: token and click Create > Local storage variable. The variable will be shown under Local Storage.
7. Create the following mapping:
   

We save user’s sessionToken in local storage so that we can use later.

We now want to invoke the service to sign in the user and navigate to a page where we can upload an image. The second page doesn’t exist yet so let’s create it.

alert ("Signin failed");

<form enctype="multipart/form-data" method="post" name="fileinfo" style="visibility:hidden">
   <fieldset>
      <input type ="file" name ="fileselect" id="fileselect"></input>
   </fieldset>
</form>
<script type="text/javascript">
   // set event listener for call preview after select file
   var fileselect = $('#fileselect');
   fileselect.bind("change", fileSelectHandler);
</script>

$('#fileselect').trigger('click');

var file;
function fileSelectHandler(e) {
    var files = e.target.files || e.dataTransfer.files;
    file = files[0];
    previewFile();
}
function upload() {
    var serverUrl = 'https://api.tiggzi.com/rest/1/db/files/' + file.name;
    $.ajax({
        type: "POST",
        beforeSend: function(request) {
            request.setRequestHeader("X-Tiggzi-Database-Id", FileDB_settings['database_id']),             
            request.setRequestHeader("X-Tiggzi-Session-Token", localStorage.getItem('token')),
            request.setRequestHeader("Content-Type", file.type);
        },
        url: serverUrl,
        data: file,
        processData: false,
        contentType: false,
        success: function(data) {
            // OPTIONAL, this is the file name under which the image was stored in database....
            // localStorage.setItem('db_file_name', file.name);
         },
        error: function(data) {
            // do something in case of an error...
        }
    });
}
function previewFile() {
    var previewContainer = $('table[dsid=preview]');
    var fileName = $('[name=fileName]');
    // make the preview container visible once a file was selected
    previewContainer.toggle();
    // set the file name
    fileName.text(file.name);
    // display image in preview container
    if (file.type.indexOf("image") == 0) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var image = $('[name=image]');
            image.attr('src', e.target.result);
            $('[class=mobileimage1_div]').show();
        }
        reader.readAsDataURL(file);
    }
}

upload();

https://api.tiggzi.com/rest/1/db/files/_image_name_from_db

return "data:;base64," + value;