This procedure shows you how to change the default animation icon shown when a file is loading.

Overview

When you upload a file into your application, an animated icon displays in the chromebar. The default icon displays as in Figure 1.

Figure 1: Default file upload icon

You can use another animation icon, and center it in the screen, by customizing the ChromeBarItemUploadStatusWidget.

NOTE: If you want to configure the loading bar when the app is processing instead, see Center progress indicator icon.

Create your own ChromeBarItemUploadStatus Widget

In gbc-project-dir/customization/customization-project-dir/js/ add a js file : MyChromeBarItemUploadStatusWidget.js

In this example we inherit the default widget ChromeBarItemUploadStatusWidget to modify the way the icon is created. The icon is shown only when the widget is processing the loading of a file.

// in MyChromeBarItemUploadStatusWidget.js
// Inherit this customized widget from ChromeBarItemUploadStatusWidget
modulum('MyChromeBarItemUploadStatusWidget', ['ChromeBarItemUploadStatusWidget', 'WidgetFactory'],
    function(context, cls) {

      /**
       * Custom upload icon in ChromeBar
       * @class MyChromeBarItemUploadStatusWidget
       * @memberOf classes
       * @extends classes.ChromeBarItemUploadStatusWidget
       */
      cls.MyChromeBarItemUploadStatusWidget = context.oo.Class(cls.ChromeBarItemUploadStatusWidget, function($super) {
        return /** @lends classes.MyChromeBarItemUploadStatusWidget.prototype */ {
          __name: "MyChromeBarItemUploadStatusWidget",
          __templateName: "ChromeBarItemWidget",

          /**
           * @inheritDoc
           */
          constructor: function(opts) {
            $super.constructor.call(this, opts);
            // in default widget, we call: this.setImage("zmdi-upload");  
            this.setImage(context.ThemeService.getResource("img/html5_circle.gif"));
          },

        };
      });
      // Declare the custom widget as the default one
      cls.WidgetFactory.registerBuilder('ChromeBarItemUploadStatus', cls.MyChromeBarItemUploadStatusWidget);
    });

In this example:

• The image used, is located in customization-project-dir/resources/img/ folder.

  NOTE: You can access the image with javascript with the method: context.ThemeService.getResource("my-image") For more information see the Theme resources API.

Compile

$ gbc build --customization <customization_project_dir>

Test

View the changes by opening an app with file upload feature in your browser. Upload a large file to allow time to view the icon.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.