Introduction

This article will show developers how to use our API to upload a file to an Igloo using convenient JavaScript methods. For further information about our File API, please visit the Developer API Documentation page. 

JavaScript method

Here is a convenient JavaScript method that facilitates the uploading of the file(s) to an Igloo:

var igFiles = {
    /**
     * @name upload
     * @description This method uploads a single file to Igloo
     */
    upload: function (file, folderGuid) {
        var fileId = null,
            chunkIdx = 0,
            chunkSize = null,
            newFileGuid = null;

        /** Initiate the file upload */
        new ApiClient({
            apimethod: 'file_upload/create',
            method: 'post',
            postdata: {
                title: file.name,
                totalBytes: file.size,
                documentId: folderGuid
            },
            onSuccess: function (responseText, responseXML) {
                var result = JSON.parse(responseText);
                console.log(result);

                fileId = result.response.id;
                chunkSize = result.response.ChunkSize;

                /** Start the Upload Chunk process */
                uploadChunks(chunkSize)
            }
        });


        /**
         * @name uploadChunks
         * @description This function handles chunking by our platform
         * @param {*} chunkSize 
         */
        function uploadChunks(chunkSize) {
            var apiClient = new ApiClient({
                sendimmediately: false,
                apimethod: 'file_upload/' + fileId + '/add_chunk',
                apipath: '/.file_upload_api/',
                method: 'post',
                urlEncoded: false,
                emulation: false,
                queryparams: {
                    chunkIndex: chunkIdx
                }
            });

            /** Get Request URL */
            var requestUrl = apiClient.getRequestUrl();

            /** Chunk handling logic */
            var start = chunkIdx * chunkSize;
            var end = chunkSize;
            var total = start + end;

            if (total > file.size) {
                end = total - file.size;
            }

            var chunk = file.slice(start, total);

            /** Create the request */
            var chunkRequest = new Request({
                url: requestUrl,
                urlEncoded: false,
                noCache: true,
                headers: {
                    'Cache-Control': 'no-cache',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-File-Name': encodeURIComponent(file.name),
                    'X-File-Size': file.size,
                    'X-File-Id': fileId,
                    'X-File-Resume': 'true',
                    'Accept': 'application/json'
                },
                onSuccess: function (responseText, responseXML) {
                    var result = JSON.parse(responseText);
                    console.log(result);

                    /** Call to upload the file */
                    updateDocument();
                },
                onProgress: function (e) {
                    var progress = parseInt(e.loaded) + (parseInt(chunkIdx) * parseInt(chunkSize));
                    progress = progress / file.size * 100;
                }
            });

            chunkRequest.sendBlob(chunk);
        }


        /**
         * @name updateDocument
         * @description This function updates the document with the newly updated file
         */
        function updateDocument() {
            var apiClient = new ApiClient({
                apimethod: 'file_upload/' + fileId + '/update',
                method: 'post',
                postdata: {
                    title: file.name,
                    description: '',
                    label: '',
                    parentId: folderGuid
                },
                onSuccess: function (responseText, responseXML) {
                    var result = JSON.parse(responseText);
                    console.log(result);

                    /** Call function to publish the file */
                    createDocument();
                }
            });
        }


        /**
         * @name createDocument
         * @description This function finally publishes the file
         */
        function createDocument() {
            var apiClient = new ApiClient({
                apimethod: 'file_upload/' + fileId + '/create_document',
                method: 'post',
                queryparams: {
                    updateLastSignificantVersion: false
                },
                onSuccess: function (responseText, responseXML) {
                    var result = JSON.parse(responseText);
                    console.log(result);
                }
            });
        }
    }
};

Usage

When this script is present in your custom application, a file can be uploaded with the following code (Fig. 3.1):

/**
 * @description Upload a single file to an Igloo
 * @param {*} file File object to upload
 * @param {*} folderGuid The GUID of the Igloo folder to upload the file into
 */
igFiles.upload(file, folderGuid);