Using C1Upload with Bootstrap v3.2.0 and jQuery v3.3.1

Posted by: carlos.taracena on 9 June 2018, 6:00 am EST

  • Posted 9 June 2018, 6:00 am EST

    Hello,

    Is it possible to use C1UploadProgress.axd with bootstrap?
    When I try to use it I get the following error loading
    WijmoControlsResource.axd

    Thank you.

    Uncaught TypeError: Cannot read property 'find' of undefined
    at e.(anonymous function).(anonymous function).t._createPreview (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:37:7570)
    at e.(anonymous function).(anonymous function)._createPreview (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:11:7903)
    at e.(anonymous function).(anonymous function).t._createDom (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:37:6989)
    at e.(anonymous function).(anonymous function)._createDom (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:11:7903)
    at e.(anonymous function).(anonymous function).t._create (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:37:1926)
    at e.(anonymous function).(anonymous function).<anonymous> (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:11:7903)
    at e.(anonymous function).(anonymous function).r._create (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:53:439)
    at e.(anonymous function).(anonymous function)._create (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:11:7903)
    at e.(anonymous function).(anonymous function)._createWidget (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:11:9973)
    at e.(anonymous function).(anonymous function).n._createWidget (http://localhost/VegaInmoAdmin/WijmoControlsResource.axd?scripts=3;4;141;140;8;143;63;125;64;127;113;111;119;72;6;15;6;15;40;44&t=636560469780000000:32:5767)
  • Replied 9 June 2018, 6:06 am EST

    I forgot to mention the C1.Web.Wijmo.Controls.4 version is 4.0.20181.283

    Thank you.
  • Marked as Answer

    Replied 10 June 2018, 4:21 am EST

    Never mind. It looks like is working now
  • Replied 10 June 2018, 1:34 pm EST

    Hi Carlos,
    Thank you for notifying that your issue has been resolved.

    ~Manish
  • Replied 20 December 2018, 8:02 pm EST

    It is simple example I created, you can try this code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <script src="Script/bootstrap-progressbar.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#fuUpload').on("change", function () {
                    var sizeInKb = parseFloat($(this).prop("files")['0'].size / 1024).toFixed(2);
                    var fileName = $(this).prop("files")['0'].name;
                    uploadProgress = $('#dvProgress').progressbarManager({
                        totalValue: sizeInKb,
                        initValue: '0kb',
                        animate: true,
                        stripe: true,
                        style: 'primary'
                    });
                    var chunk = 0;
                    var uploading = setInterval(function () {
                        uploadProgress.setValue(chunk);
                        if (uploadProgress.isComplete()) {
                            clearInterval(uploading);
                            uploadProgress.style('success');
                        }
                        chunk += 500;
                    }, 500);
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div align="center">
            <label class="btn btn-primary" for="fuUpload">
                <input id="fuUpload" type="file" style="display: none;" />
                Select file
            </label>
            <br />
            <div id="dvProgress" style="width: 200px; min-width: 2em;">
            </div>
        </div>
        </form>
    </body>
    </html>



    (function(a){a.fn.progressbarManager=function(h){if(!a.fn.progressbarManager.GUID){a.fn.progressbarManager.GUID=1}var e=a.extend({debug:false,initValue:0,totalValue:100,style:"primary",animate:false,stripe:false,id:"pbm-bootsrap-progress-"+a.fn.progressbarManager.GUID,barIdPrefix:"pbm-progress-bar-",total:h.totalValue,addDefaultBar:true,data:{},showValueHandler:function(j){var k=j.elem.attr("aria-valuenow")+"%";j.elem.text(k)},hideValueHandler:function(j){j.elem.text("")},onComplete:function(){},onBarComplete:function(){}},h);
    e.total=parseInt(e.total);
    var i=a(this);function f(k){var l=this;var o=1;var r={};var n;var p=0;var q=false;var m=c(k);i.append(m);var n="";var j=function(){p=0;for(var s in r){p+=r[s].totalValuePercent}};this.setValue=function(w,u){var t=this.getBar(u);w=parseInt(w);if(t){if(w>t.totalValue){b("New Bar value is greater that the totalValue. Setting the bar percentage to full");w=t.totalValue}var v=g(w,e.total);var s=Math.round(v*10)/10;t.elem.attr("aria-valuenow",s);t.currentPercent=v;t.currentPercentRounded=s;t.currentValue=w;t.elem.css("width",Math.round(v)+"%");if(t.showText){this.showValue(u)}if(this.isComplete(u)){e.onBarComplete.call(t)}j();if(this.isComplete()){e.onComplete()}}return this};this.animate=function(t){var s=this.getBar(t);if(s){s.elem.addClass("active")}return this};this.animateRemove=function(t){var s=this.getBar(t);if(s){s.elem.removeClass("active")}return this};this.stripe=function(t){var s=this.getBar(t);if(s){s.elem.addClass("progress-bar-striped")}return this};this.removeStripe=function(t){var s=this.getBar(t);if(s){s.elem.removeClass("progress-bar-striped")}return this};this.style=function(s,u){var t=this.getBar(u);if(t){t.elem.removeClass("progress-bar-"+t.style);t.style=s;t.elem.addClass("progress-bar-"+s)}return this};this.showValue=function(u){var t=this.getBar(u);if(u===true){for(var s in r){s.showText=true;s.showValueHandler(t)}}if(t){t.showText=true;t.showValueHandler(t)}return this};this.hideValue=function(u){var t=this.getBar(u);if(u===true){for(var s in r){s.showText=false;s.hideValueHandler(t)}}if(t){t.showText=false;t.hideValueHandler(t)}return this};this.isComplete=function(t){var s=this.getBar(t);return(s&&s.currentValue>=s.totalValue)};this.complete=function(t){var s=this.getBar(t);if(s){this.setValue(s.totalValue,t)}return this};this.completeAll=function(){var s;for(s in r){l.complete(s)}};this.addBar=function(B){var w=a.extend({initValue:0,totalValue:100,style:"primary",animate:false,stripe:false,data:{},showValueHandler:e.showValueHandler,hideValueHandler:e.hideValueHandler},B);var s=e.barIdPrefix+o;var x=parseInt(w.initValue)||0;var y=parseInt(w.totalValue)||(100-p);var v=g(x,e.total);var t=Math.round(v*10)/10;var A=g(y,e.total);var z=Math.round(A*10)/10;if((z+p)>100){b("container can not contain the new bar element based on the percentage of its total: "+z);b("Available space in percent is :"+(100-p));return true}if(x>y){t=z}var u=d(s,Math.round(v),w.style,x,y,w.animate,w.stripe);m.append(u);r[s]={totalValue:y,currentValue:x,init:x,initPercent:v,totalValuePercent:A,totalValuePercentRounded:z,currentPercent:v,currentPercentRounded:t,style:w.style,elem:u,showText:true,id:s,data:w.data,showValueHandler:w.showValueHandler,hideValueHandler:w.hideValueHandler};w.showValueHandler(r[s]);o++;j();return s};this.removeBar=function(t){var s=this.getBar(t);if(s){s.elem.remove()}};this.destroy=function(){m.remove()};this.getBar=function(s){var t=s||n;if(r[t]){return r[t]}b("No progress bar element with id: "+t);return null};if(e.addDefaultBar){n=this.addBar(e)}}var c=function(j){return a("<div></div>",{id:j,"class":"progress"})};var d=function(l,p,k,o,q,m,r){var n=a("<div></div>");var j="progress-bar progress-bar-"+k;if(m){j+=" active "}if(r){j+=" progress-bar-striped"}n.attr("id",l).attr("role","progress-bar");n.attr("aria-valuenow",p).attr("aria-valuemin",o);n.attr("aria-valuemax",q).css({width:p+"%","min-width":"2em"});n.addClass(j);n.append('<span class="sr-only sr-indicator">'+p+"% Complete</span></div>");return n};var g=function(k,j){return 100-(j-k)/j*100};var b=function(j){if(e.debug){console.log("Progress Bar Manager Debug => "+j)}};a.fn.progressbarManager.GUID++;return new f(e.id)}}(jQuery));
  • Replied 26 December 2018, 4:21 pm EST

    Thanks, Rahil for your code snippet but this does not seem related to C1upload.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels