HTML Input File

Lotus Input File

Here's an example of lotus DragDropFileCollectionView component. The x-lotus-upload tag extends the Lotus.LotusHTMLElement tag. Our x-lotus-upload is also mapped to a Lotus component in the call to context.componentMap.mapComponent('x-lotus-upload', Lotus.LotusHTMLElement.prototype, Lotus.DragDropFileCollectionView, xtag);.A new instance of Lotus.DragDropFileCollectionView is attached to each tag instance. Open your console to observe the file upload callbacks. In order to upload files your callbacks should trigger upload behaviors and update the files load status. See the commnets in the code example at the bottom of this page for psuedo code.

Dynamically Change Skin

If your browser does not natively support web component (Safari) you will not see any change. See the xTag polyfill workaround below.

Changing the appearance of any image control instance is as simple as attaching a different skin using data-template-url="templates/fileUpload2.html". Below is the exact same custom set of tags with a different skin attached. All using the same set of selectors encapsulated with Shadow DOM. Imagine how many skins could be created without a single change to the component code.

xTag Pollyfill Workaround

Note: If your browser does not natively support web components you have to attach the new skin using a different tag. In this example we do the following: context.componentMap.mapComponent('x-lotus-upload2', Lotus.LotusHTMLElement.prototype, Lotus.DragDropFileCollectionView, xtag);. This is an issue with the xTag core and how it encapsulates styles using the tag name.

Mediating Components

The x-lotus-upload the following events: `Lotus.FileEvent.UPLOAD_FILE, Lotus.FileEvent.ABORT_FILE_UPLOAD`. In order to listen for those events you have to assign an event handler after the document loads. An example is below. However if you are serious about event mediation of we encourage you to check out lotusjs-mvw. This is a full blown MVW framework which comes with a mediator map for your components (and much more). This allows you to build application mediators that are mapped to your custom tags. Mediators can do all sorts of useful things like triggering business logic, dispatching application events to trigger commands, and setting up data binding within your surrounding application.

            var context = (function (xtag) {
            var context = new Lotus.Context(new Lavender.Config);
            context.componentMap.mapComponent('x-lotus-upload', HTMLSelectElement.prototype, Lotus.DragDropFileCollectionView, xtag);
            context.componentMap.mapComponent('x-lotus-upload2', HTMLSelectElement.prototype, Lotus.DragDropFileCollectionView, xtag);
            return context;
        }(xtag));
        //the following is an example of how you can mediate the component events that are dispatched.
        //A better alternative is to use https://www.npmjs.com/package/lotusjs-mvw and take advantage of component mediators
        window.onload = function () {

            var list = document.getElementsByTagName('x-lotus-upload');
            var handler = {
                onChange: function (event) {
                    /*
                     //store a reference to the file
                     this.file = event.payload.file
                     //add you code to trigger your API here
                     //then update the load status of the file similar to the code below
                     //Note Lotus.XhrHttpService is part of the lotusjs-mvw package on npm
                     this.xhr = new Lotus.XhrHttpService(true, true);
                     this.xhr.addResponder(this);
                     var fd = new FormData();
                     fd.append('Filedata', this.file.fileObj);
                     this.xhr.send('POST', this.getUrl(), fd, null, null, this.config.cacheServiceResults);
                     //update load status in oyur API onStatus callback
                     this.file.state = ( percentage == 1 ) ? Lotus.File.LOAD : Lotus.File.PROGRESS;//progress events are often dispatched a second time after the load event, so we have to make sure to set the correct state
                     this.file.percentLoaded = percentage;
                     * */
                    console.log('My file upload callback function received file for upload: ' + event.payload.file.id);
                },
                onAbort:function(event){
                    //find the xhr request associated with the file and cancel it.
                    //This requires you create a hash for upload requests by file object in your Lotus.FileEvent.UPLOAD_FILE callback.
                    console.log('My abort callback function received file for upload: ' + event.payload.file.id);
                }
            }
            for (var i = 0; i < list.length; i++) {
                //the lotus syntax for addEventListener is slightly different than that of DOM elements,
                //but it ensures the scope of this within a callback is always relative the the second parameter which is the object instance
                list[i].lotusComponentInstance.addEventListener(Lotus.FileEvent.UPLOAD_FILE, handler, 'onChange');
                list[i].lotusComponentInstance.addEventListener(Lotus.FileEvent.ABORT_FILE_UPLOAD, handler, 'onAbort');
            }
            //set up work around for pollyfill issue with xTag core
            list = document.getElementsByTagName('x-lotus-upload2');
            for (var i = 0; i < list.length; i++) {
                //the lotus syntax for addEventListener is slightly different than that of DOM elements,
                //but it ensures the scope of this within a callback is always relative the the second parameter which is the object instance
                list[i].lotusComponentInstance.addEventListener(Lotus.FileEvent.UPLOAD_FILE, handler, 'onChange');
                list[i].lotusComponentInstance.addEventListener(Lotus.FileEvent.ABORT_FILE_UPLOAD, handler, 'onAbort');
            }
        };