wijupload Step 2 of 3: Initializing the Widgets

In the previous step, you added markup to determine where the Upload files button and progress bar will appear. Now you can add the jQuery script to initialize the widgets.

After the closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijupload and wijprogressbar widgets:

<script id="scriptInit" type="text/javascript">
            var supportXhr;
            $(document).ready(function () {
                     var progressbar = $("#progressbar");
                  var upload = $("#upload").wijupload({
                        change: function (e, data) {
                        },
                        upload: function (e, data) {
                        },
                        totalUpload: function () {
                              progressbar.show();
                        },
                        complete: function (e, data) {
                        },
                        totalComplete: function () {
                              progressbar.fadeOut(1500, function () {
                                    if (supportXhr) {
                                          $("#progressbar").wijprogressbar("option", "value", 0);
                                       }
                              });
                        },
                        totalProgress: function (e, data) {
                              if (supportXhr) {
                                    $("#progressbar").wijprogressbar("option", "maxValue", data.total);
                                    $("#progressbar").wijprogressbar("option", "value", data.loaded);
                              }
                        },
            action: "@Url.Content("~/Content/Upload/upload.ashx")"
                     });
      supportXhr = $("#upload").wijupload("supportXhr");
                  if (supportXhr) {
                        progressbar.wijprogressbar({ value: 0 });
                  } else {
                        progressbar.addClass("Loading");
                  }
                  progressbar.hide();
            });
      </script>