Class: Uploader

Uploader Class #

This class provides methods for managing file drop zones, inputs and upload queue.

Namespace#

ITHit.WebDAV.Client.Upload

new ITHit.WebDAV.Client.Upload.Uploader() #

Uploader
Create uploader instance.
Example
CODE
<!DOCTYPE html>
 <html lang="en">
 <head>
     <title>IT Hit WebDAV Uploader</title>
     <script src="ITHitWebDAVClient.js" type="text/javascript"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
     <script type="text/javascript">
         function UploaderGridView(sSelector) {
             this.Uploader = new ITHit.WebDAV.Client.Upload.Uploader();
             this.Uploader.DropZones.AddById('ithit-dropzone');
             this.Uploader = oUploader;
             this.Uploader.Queue.AddListener('OnQueueChanged', '_CollectionChange', this);
             this.$table = $(sSelector);
             this.rows = [];
         };
 
         /**
         * Observes adding and deleting of UploadItem and creates and removes rows in table.
         * @param {ITHit.WebDAV.Client.Upload.Queue#OnQueueChanged} oQueueChanged
         */
         UploaderGridView.prototype._CollectionChange = function(oQueueChanged) {
             $.each(oQueueChanged.AddedItems, function(index, value) {
                 var row = new UploaderGridRow(value);
                 this.rows.push(row);
                 this.$table.append(row.$el);
             }.bind(this));
 
             $.each(oQueueChanged.RemovedItems, function(index, value) {
                 var aRows = $.grep(this.rows, function(oElem) { return value === oElem.UploadItem; });
                 var iIndex = this.rows.indexOf(aRows[0]);
                 this.rows.splice(iIndex, 1);
                 aRows[0].$el.remove();
             }.bind(this));
         };
 
         /**
         * Represents table row and subscribes for upload change.
         * @param {ITHit.WebDAV.Client.Upload.oUploadItem} oUploadItem
         */
         function UploaderGridRow(oUploadItem) {
             this.$el = $('');
             this.oUploadItem = oUploadItem;
             this.oUploadItem.AddListener('OnProgressChanged', '_OnProgress', this);
             this.oUploadItem.AddListener('OnStateChanged', '_OnStateChange', this);
             this._Render(oUploadItem);
         };
 
 
         /**
         * Creates upload details view.
         * @param {ITHit.WebDAV.Client.Upload.oUploadItem} oUploadItem
         */
         UploaderGridRow.prototype._Render = function(oUploadItem) {
         /** @typedef {ITHit.WebDAV.Client.Upload.Progress} oProgress */
             var oProgress = oUploadItem.GetProgress();
             var columns = [
                 oUploadItem.GetName(),
                 oUploadItem.GetUrl(),
                 oUploadItem.GetSize(),
                 oProgress.UploadedBytes,
                 oProgress.Completed,
                 oProgress.ElapsedTime,
                 oProgress.RemainingTime,
                 oProgress.Speed,
                 oUploadItem.GetState()
             ];
 
             var $columns = [];
             columns.forEach(function(item) {
                 var $column = $('<td></td>');
                 $column.html(item);
                 $columns.push($column);
             });
 
             var $actions = $('<td></td>');
             this._RenderActions(oUploadItem).forEach(function(item) {
                 $actions.append(item);
             });
 
             $columns.push($actions);
             this.$el.empty();
             this.$el.append($columns);
         };
 
         /**
         * Creates upload actions view.
         * @param {ITHit.WebDAV.Client.Upload.oUploadItem} oUploadItem
         */
         UploaderGridRow.prototype._RenderActions = function(oUploadItem) {
             var actions = [];
             actions.push($('<a></a>').
                 html('<span class="glyphicon glyphicon-play"></span>').
                 attr('href', 'javascript:void(0)').
                 on('click', oUploadItem.StartAsync.bind(oUploadItem)));
 
             actions.push($('<a></a>').
                 html('<span class="glyphicon glyphicon-stop"></span>').
                 attr('href', 'javascript:void(0)').
                 on('click',oUploadItem.CancelAsync.bind(oUploadItem)));
         };
 
         /**
         * Handles UploadItem state change.
         * @param {ITHit.WebDAV.Client.Upload.UploadItem#OnStateChanged} oStateChangedEvent
         */
         UploaderGridRow.prototype._OnStateChange = function(oStateChangedEvent) {
             this._Render(oStateChangedEvent.Sender);
         };
 
         /**
         * Handles UploadItem progress change.
         * @param {ITHit.WebDAV.Client.Upload.UploadItem#OnProgressChanged} oProgressEvent
         */
         UploaderGridRow.prototype._OnProgress = function(oProgressEvent) {
             this._Render(oProgressEvent.Sender);
         };
 
         var sUploadUrl = 'https://webdavserver/path/';
         var oUploaderGrid = new UploaderGridView(oUploader, '.ithit-grid-uploads');
         oUploaderGrid.Uploader.SetUploadUrl(sUploadUrl);
     </script>
 </head>
 <body id="it-hit-dropzone">
     <table class="table table-responsive ithit-grid-uploads">
         <thead>
             <tr>
                 <th>Display Name</th>
                 <th>Download Url</th>
                 <th>Size</th>
                 <th>Uploaded Bytes</th>
                 <th>Completed</th>
                 <th>Elapsed TimeSpan</th>
                 <th>Remaining TimeSpan</th>
                 <th>Speed</th>
                 <th>State</th>
                 <th>Actions</th>
             </tr>
         </thead>
         <tbody>
         </tbody>
     </table>
 </body>
 </html>

Members#

readonly DropZones :ITHit.WebDAV.Client.Upload.DropZoneCollection #

DropZones
Collection of associated drop zones.

readonly Inputs :ITHit.WebDAV.Client.Upload.InputCollection #

Inputs
Collection of associated inputs.

readonly Queue :ITHit.WebDAV.Client.Upload.Queue #

Queue
Queue of uploads.

Settings :ITHit.WebDAV.Client.Upload.Settings #

Settings
Default settings for uploads.

Methods#

GetUploadUrl() → {string} #

GetUploadUrl
Get upload url for drop zones and inputs.
Returns:
string Upload url.

SetUploadUrl(sUrl) #

SetUploadUrl
Set upload url for drop zones and inputs.
Name Type Description
sUrl string Url to upload.