Upload files and images

Aside from the reading and writing back numbers and strings into TM1, Canvas further extends TM1 functionality by allowing you to save URL paths that you can then use to display images for example, or embed link and control access to these links – the TM1 way.

To start uploading files, it is as simple as writing the following:

<tm1-ui-upload tm1-instance="dev"></tm1-ui-upload>

This will give you the following:

Clicking on the “Select File” on your page will open up a dialog box which will ask you for a file to open/upload. And that is it!

Now, where did the file go?

Let us create a full example to better explain what is going on by re-writing the previous example so that we can:

1. Get the URL path
2. Save this URL path into TM1
3. Display an image wherever applicable

This is the HTML mark up now of our code:

<tm1-ui-upload tm1-instance="dev" 
               tm1-after-upload="updatePreview(file)"></tm1-ui-upload>
<tm1-ui-dbr-image tm1-instance="dev" 
                  tm1-cube="System Info" 
                  tm1-elements="Current Date, Comment"></tm1-ui-dbr-image>

And this is the corresponding function updatePreview, on our controller file:

$scope.updatePreview = function(file){
        // uncomment to see what is being returned
        // console.debug(file); // instance, name, path
        
        $tm1Ui.cellPut(file.path, 'dev', 'System Info', 'Current Date', 'Comment').then(function(data){
            // uncomment to see what is being returned
            // console.debug('data %o', data);
            if(!data.success){
                $log.error(data);
            }
        });
    };

Below is the sequence of events:

1. The tm1-after-upload is an attribute by tm1-ui-upload directive that allows you to specify a function to be called after it has finished the upload.
2. Within the function, we then use a simplified script in saving data into TM1.
3. The directive tm1-ui-dbr-image is a variation of DBR that allows you to show images from a properly formatted URL in TM1.

The files are uploaded, relative to your Canvas application, within files/<instance> folder by default. If you want to save it into a different folder instead, go into your Canvas’ Admin console –> Settings and update the following: