title: Custom template in the fileupload.js
body: <p>I want to customize the fileupload UI component in the primefaces which inturn uses blueimp fileupload.js. I want to overwrite default primefaces template with my custom template and append the rendered template to a div "#errorMessage_wbMessages" instead of default ".fileupload-content"</p>
  
  <p>I tried setting the uploadContent and uploadTemplate as below but it don't work. </p>
  
  <h2>Custom template</h2>
  
  <p>fileLoader is the given name of attribute widgetVar in the fileupload component</p>
  
  <pre><code>fileLoader.uploadContent = $("#errorMessage_wbMessages");
      fileLoader.cfg.uploadTemplate = '&lt;div class="ui-message-fatal ui-corner-all"&gt;&lt;a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;"&gt;&lt;span class="ui-icon ui-icon-close"&gt;&lt;/span&gt;&lt;/a&gt;&lt;span class="ui-messages-fatal-icon"&gt;&lt;/span&gt;&lt;ul&gt;&lt;li&gt;&lt;span class="ui-messages-fatal-summary"&gt;File Upload Issue :{{if error === "maxFileSize"}}File Limit exceeded{{else error === "minFileSize"}}File Limit exceeded{{else error === "acceptFileTypes"}}Invalid File{{else error === "maxNumberOfFiles"}}Max number of files exceeded.{{else}}${error}{{/if}}&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;';
  </code></pre>
  
  <p><strong>fileupload.js which is used by primefaces</strong> </p>
  
  <pre><code>(function(a) {
      a.widget("blueimpUI.fileupload", a.blueimp.fileupload, {options: {autoUpload: false,maxNumberOfFiles: undefined,maxFileSize: undefined,minFileSize: 1,acceptFileTypes: /.+$/i,previewFileTypes: /^image\/(gif|jpeg|png)$/,previewMaxWidth: 80,previewMaxHeight: 80,previewAsCanvas: true,uploadTemplate: a("#template-upload"),downloadTemplate: a("#template-download"),dataType: "json",add: function(d, c) {
                  var b = a(this).data("fileupload");
                  b._adjustMaxNumberOfFiles(-c.files.length);
                  c.isAdjusted = true;
                  c.isValidated = b._validate(c.files);
                  c.context = b._renderUpload(c.files).appendTo(a(this).find(".files")).fadeIn(function() {
                      a(this).show()
                  }).data("data", c);
                  if ((b.options.autoUpload || c.autoUpload) &amp;&amp; c.isValidated) {
                      c.jqXHR = c.submit()
                  }
              },send: function(d, c) {
                  if (!c.isValidated) {
                      var b = a(this).data("fileupload");
                      if (!c.isAdjusted) {
                          b._adjustMaxNumberOfFiles(-c.files.length)
                      }
                      if (!b._validate(c.files)) {
                          return false
                      }
                  }
                  if (c.context &amp;&amp; c.dataType &amp;&amp; c.dataType.substr(0, 6) === "iframe") {
                      c.context.find(".ui-progressbar").progressbar("value", parseInt(100, 10))
                  }
              },done: function(d, c) {
                  var b = a(this).data("fileupload");
                  if (b) {
                      if (c.context) {
                          c.context.each(function(e) {
                              var f = (a.isArray(c.result) &amp;&amp; c.result[e]) || {error: "emptyResult"};
                              if (f.error) {
                                  b._adjustMaxNumberOfFiles(1)
                              }
                              a(this).fadeOut(function() {
                                  b._renderDownload([f]).css("display", "none").replaceAll(this).fadeIn(function() {
                                      a(this).show()
                                  })
                              })
                          })
                      } else {
                          b._renderDownload(c.result).css("display", "none").appendTo(a(this).find(".files")).fadeIn(function() {
                              a(this).show()
                          })
                      }
                  }
              },fail: function(d, c) {
                  var b = a(this).data("fileupload");
                  b._adjustMaxNumberOfFiles(c.files.length);
                  if (c.context) {
                      c.context.each(function(e) {
                          a(this).fadeOut(function() {
                              if (c.errorThrown !== "abort") {
                                  var f = c.files[e];
                                  f.error = f.error || c.errorThrown || true;
                                  b._renderDownload([f]).css("display", "none").replaceAll(this).fadeIn(function() {
                                      a(this).show()
                                  })
                              } else {
                                  c.context.remove()
                              }
                          })
                      })
                  } else {
                      if (c.errorThrown !== "abort") {
                          b._adjustMaxNumberOfFiles(-c.files.length);
                          c.context = b._renderUpload(c.files).css("display", "none").appendTo(a(this).find(".files")).fadeIn(function() {
                              a(this).show()
                          }).data("data", c)
                      }
                  }
              },progress: function(c, b) {
                  if (b.context) {
                      b.context.find(".ui-progressbar").progressbar("value", parseInt(b.loaded / b.total * 100, 10))
                  }
              },progressall: function(c, b) {
                  a(this).find(".fileupload-progressbar").progressbar("value", parseInt(b.loaded / b.total * 100, 10))
              },start: function() {
                  a(this).find(".fileupload-progressbar").progressbar("value", 0).fadeIn()
              },stop: function() {
                  a(this).find(".fileupload-progressbar").fadeOut()
              },destroy: function(d, c) {
                  var b = a(this).data("fileupload");
                  if (c.url) {
                      a.ajax(c).success(function() {
                          b._adjustMaxNumberOfFiles(1);
                          a(this).fadeOut(function() {
                              a(this).remove()
                          })
                      })
                  } else {
                      c.context.fadeOut(function() {
                          a(this).remove()
                      })
                  }
              }},_scaleImage: function(b, d) {
              d = d || {};
              var c = document.createElement("canvas"), e = Math.min((d.maxWidth || b.width) / b.width, (d.maxHeight || b.height) / b.height);
              if (e &gt;= 1) {
                  e = Math.max((d.minWidth || b.width) / b.width, (d.minHeight || b.height) / b.height)
              }
              b.width = parseInt(b.width * e, 10);
              b.height = parseInt(b.height * e, 10);
              if (!d.canvas || !c.getContext) {
                  return b
              }
              c.width = b.width;
              c.height = b.height;
              c.getContext("2d").drawImage(b, 0, 0, b.width, b.height);
              return c
          },_createObjectURL: function(b) {
              var d = "undefined", c = (typeof window.createObjectURL !== d &amp;&amp; window) || (typeof URL !== d &amp;&amp; URL) || (typeof webkitURL !== d &amp;&amp; webkitURL);
              return c ? c.createObjectURL(b) : false
          },_revokeObjectURL: function(b) {
              var d = "undefined", c = (typeof window.revokeObjectURL !== d &amp;&amp; window) || (typeof URL !== d &amp;&amp; URL) || (typeof webkitURL !== d &amp;&amp; webkitURL);
              return c ? c.revokeObjectURL(b) : false
          },_loadFile: function(c, d) {
              if (typeof FileReader !== "undefined" &amp;&amp; FileReader.prototype.readAsDataURL) {
                  var b = new FileReader();
                  b.onload = function(f) {
                      d(f.target.result)
                  };
                  b.readAsDataURL(c);
                  return true
              }
              return false
          },_loadImage: function(e, g, d) {
              var f = this, c, b;
              if (!d || !d.fileTypes || d.fileTypes.test(e.type)) {
                  c = this._createObjectURL(e);
                  b = a("&lt;img&gt;").bind("load", function() {
                      a(this).unbind("load");
                      f._revokeObjectURL(c);
                      g(f._scaleImage(b[0], d))
                  }).prop("src", c);
                  if (!c) {
                      this._loadFile(e, function(h) {
                          b.prop("src", h)
                      })
                  }
              }
          },_enableDragToDesktop: function() {
              var e = a(this), c = e.prop("href"), b = decodeURIComponent(c.split("/").pop()).replace(/:/g, "-"), d = "application/octet-stream";
              e.bind("dragstart", function(g) {
                  try {
                      g.originalEvent.dataTransfer.setData("DownloadURL", [d, b, c].join(":"))
                  } catch (f) {
                  }
              })
          },_adjustMaxNumberOfFiles: function(b) {
              if (typeof this.options.maxNumberOfFiles === "number") {
                  this.options.maxNumberOfFiles += b;
                  if (this.options.maxNumberOfFiles &lt; 1) {
                      this._disableFileInputButton()
                  } else {
                      this._enableFileInputButton()
                  }
              }
          },_formatFileSize: function(b) {
              if (typeof b.size !== "number") {
                  return ""
              }
              if (b.size &gt;= 1000000000) {
                  return (b.size / 1000000000).toFixed(2) + " GB"
              }
              if (b.size &gt;= 1000000) {
                  return (b.size / 1000000).toFixed(2) + " MB"
              }
              return (b.size / 1000).toFixed(2) + " KB"
          },_hasError: function(b) {
              if (b.error) {
                  return b.error
              }
              if (this.options.maxNumberOfFiles &lt; 0) {
                  return "maxNumberOfFiles"
              }
              if (!(this.options.acceptFileTypes.test(b.type) || this.options.acceptFileTypes.test(b.name))) {
                  return "acceptFileTypes"
              }
              if (this.options.maxFileSize &amp;&amp; b.size &gt; this.options.maxFileSize) {
                  return "maxFileSize"
              }
              if (typeof b.size === "number" &amp;&amp; b.size &lt; this.options.minFileSize) {
                  return "minFileSize"
              }
              return null
          },_validate: function(d) {
              var c = this, b;
              a.each(d, function(e, f) {
                  f.error = c._hasError(f);
                  b = !f.error
              });
              return b
          },_uploadTemplateHelper: function(b) {
              b.sizef = this._formatFileSize(b);
              return b
          },_renderUploadTemplate: function(c) {
              var b = this;
              return a.tmpl(this.options.uploadTemplate, a.map(c, function(d) {
                  return b._uploadTemplateHelper(d)
              }))
          },_renderUpload: function(e) {
              var d = this, c = this.options, b = this._renderUploadTemplate(e);
              if (!(b instanceof a)) {
                  return a()
              }
              b.css("display", "none");
              b.find(".progress div").slice(1).remove().end().first().progressbar();
              b.find(".preview").each(function(f, g) {
                  d._loadImage(e[f], function(h) {
                      a(h).hide().appendTo(g).fadeIn()
                  }, {maxWidth: c.previewMaxWidth,maxHeight: c.previewMaxHeight,fileTypes: c.previewFileTypes,canvas: c.previewAsCanvas})
              });
              return b
          },_downloadTemplateHelper: function(b) {
              b.sizef = this._formatFileSize(b);
              return b
          },_renderDownloadTemplate: function(c) {
              var b = this;
              return a.tmpl(this.options.downloadTemplate, a.map(c, function(d) {
                  return b._downloadTemplateHelper(d)
              }))
          },_renderDownload: function(c) {
              var b = this._renderDownloadTemplate(c);
              if (!(b instanceof a)) {
                  return a()
              }
              b.css("display", "none");
              b.find(".delete button").button({text: false,icons: {primary: "ui-icon-trash"}});
              b.find("a").each(this._enableDragToDesktop);
              return b
          },_startHandler: function(d) {
              d.preventDefault();
              var b = a(this).closest(".template-upload"), c = b.data("data");
              if (c &amp;&amp; c.submit &amp;&amp; !c.jqXHR) {
                  c.jqXHR = c.submit();
                  a(this).fadeOut()
              }
          },_cancelHandler: function(d) {
              d.preventDefault();
              var b = a(this).closest(".template-upload"), c = b.data("data") || {};
              if (!c.jqXHR) {
                  c.errorThrown = "abort";
                  d.data.fileupload._trigger("fail", d, c)
              } else {
                  c.jqXHR.abort()
              }
          },_deleteHandler: function(c) {
              c.preventDefault();
              var b = a(this);
              c.data.fileupload._trigger("destroy", c, {context: b.closest(".template-download"),url: b.attr("data-url"),type: b.attr("data-type"),dataType: c.data.fileupload.options.dataType})
          },_initEventHandlers: function() {
              a.blueimp.fileupload.prototype._initEventHandlers.call(this);
              var b = {fileupload: this};
              a(this.options.namespace + " .files td.start button").die().live("click", b, this._startHandler).live("mouseover", function() {
                  a(this).addClass("ui-state-hover")
              }).live("mouseout", function() {
                  a(this).removeClass("ui-state-active ui-state-hover")
              }).live("mousedown", function() {
                  a(this).addClass("ui-state-active")
              }).live("mouseup", function() {
                  a(this).removeClass("ui-state-active")
              });
              a(this.options.namespace + " .files td.cancel button").die().live("click", b, this._cancelHandler).live("mouseover", function() {
                  a(this).addClass("ui-state-hover")
              }).live("mouseout", function() {
                  a(this).removeClass("ui-state-active ui-state-hover")
              }).live("mousedown", function() {
                  a(this).addClass("ui-state-active")
              }).live("mouseup", function() {
                  a(this).removeClass("ui-state-active")
              });
              a(this.options.namespace + " .files td.delete button").die().live("click", b, this._deleteHandler)
          },_destroyEventHandlers: function() {
              a.blueimp.fileupload.prototype._destroyEventHandlers.call(this)
          },_initFileUploadButtonBar: function() {
              var c = this.element.find(".fileupload-buttonbar"), d = this.element.find(".files"), b = this.options.namespace;
              c.addClass("ui-widget-header ui-corner-top")
          },_destroyFileUploadButtonBar: function() {
              this.element.find(".fileupload-buttonbar").removeClass("ui-widget-header ui-corner-top");
              this.element.find(".fileinput-button").each(function() {
                  var b = a(this).find("input:file").detach();
                  a(this).button("destroy").append(b)
              });
              this.element.find(".fileupload-buttonbar button").unbind("click." + this.options.namespace).button("destroy")
          },_enableFileInputButton: function() {
              this.element.find(".fileinput-button input:file:disabled").each(function() {
                  var c = a(this), b = c.parent();
                  c.detach().prop("disabled", false);
                  b.button("enable").append(c)
              })
          },_disableFileInputButton: function() {
              this.element.find(".fileinput-button input:file:enabled").each(function() {
                  var c = a(this), b = c.parent();
                  c.detach().prop("disabled", true);
                  b.button("disable").append(c)
              })
          },_initTemplates: function() {
              if (this.options.uploadTemplate instanceof a &amp;&amp; !this.options.uploadTemplate.length) {
                  this.options.uploadTemplate = a(this.options.uploadTemplate.selector)
              }
              if (this.options.downloadTemplate instanceof a &amp;&amp; !this.options.downloadTemplate.length) {
                  this.options.downloadTemplate = a(this.options.downloadTemplate.selector)
              }
          },_create: function() {
              a.blueimp.fileupload.prototype._create.call(this);
              this._initTemplates();
              this.element.addClass("ui-widget");
              this._initFileUploadButtonBar();
              this.element.find(".fileupload-content").addClass("ui-widget-content ui-corner-bottom");
              this.element.find(".fileupload-progressbar").hide().progressbar()
          },destroy: function() {
              a.blueimp.fileupload.prototype.destroy.call(this)
          },enable: function() {
              a.blueimp.fileupload.prototype.enable.call(this);
              this.element.find(":ui-button").not(".fileinput-button").button("enable");
              this._enableFileInputButton()
          },disable: function() {
              this.element.find(":ui-button").not(".fileinput-button").button("disable");
              this._disableFileInputButton();
              a.blueimp.fileupload.prototype.disable.call(this)
          }})
  }(jQuery));
  PrimeFaces.widget.FileUpload = PrimeFaces.widget.BaseWidget.extend({init: function(b) {
          this._super(b);
          this.form = this.jq.parents("form:first");
          this.buttonBar = this.jq.children(".fileupload-buttonbar");
          this.uploadContent = this.jq.children(".fileupload-content");
          var a = this;
          this.cfg.uploadTemplate = '&lt;tr class="template-upload{{if error}} ui-state-error{{/if}}"&gt;&lt;td class="preview"&gt;&lt;/td&gt;&lt;td class="name"&gt;${name}&lt;/td&gt;&lt;td class="size"&gt;${sizef}&lt;/td&gt;{{if error}}&lt;td class="error" colspan="2"&gt;{{if error === "maxFileSize"}}' + this.getMessage(this.cfg.invalidSizeMessage, this.INVALID_SIZE_MESSAGE) + '{{else error === "minFileSize"}}' + this.getMessage(this.cfg.invalidSizeMessage, this.INVALID_SIZE_MESSAGE) + '{{else error === "acceptFileTypes"}}' + this.getMessage(this.cfg.invalidFileMessage, this.INVALID_FILE_MESSAGE) + '{{else error === "maxNumberOfFiles"}}' + this.getMessage(this.cfg.fileLimitMessage, this.FILE_LIMIT_MESSAGE) + '{{else}}${error}{{/if}}&lt;/td&gt;{{else}}&lt;td class="progress"&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td class="start"&gt;&lt;button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"&gt;&lt;span class="ui-button-icon-left ui-icon ui-icon ui-icon-arrowreturnthick-1-n"&gt;&lt;/span&gt;&lt;span class="ui-button-text"&gt;ui-button&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;&lt;td class="cancel"&gt;&lt;button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"&gt;&lt;span class="ui-button-icon-left ui-icon ui-icon ui-icon-cancel"&gt;&lt;/span&gt;&lt;span class="ui-button-text"&gt;ui-button&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;{{/if}}&lt;/tr&gt;';
          this.cfg.downloadTemplate = "";
          this.cfg.fileInput = $(PrimeFaces.escapeClientId(this.id + "_input"));
          this.cfg.paramName = this.id;
          this.cfg.sequentialUploads = true;
          this.cfg.dataType = "xml";
          this.cfg.namespace = this.jqId;
          this.cfg.disabled = this.cfg.fileInput.is(":disabled");
          var c = this.form.children("input[name='javax.faces.encodedURL']");
          this.cfg.url = (c.length == 1) ? c.val() : this.form.attr("action");
          $.ajaxSetup({converters: {"iframe xml": this.parseIFrameResponse}});
          this.cfg.formData = function() {
              return a.createPostData()
          };
          this.cfg.dropZone = this.cfg.dnd &amp;&amp; !this.cfg.disabled ? this.jq : null;
          if (this.form.data().fileupload) {
              this.destroy()
          }
          this.form.fileupload(this.cfg).bind("fileuploadstart", function(f, d) {
              if (a.cfg.onstart) {
                  a.cfg.onstart.call(a)
              }
          }).bind("fileuploaddone", function(f, d) {
              PrimeFaces.ajax.AjaxResponse(d.result);
              if (a.cfg.oncomplete) {
                  a.cfg.oncomplete.call(a)
              }
          });
          if (this.cfg.disabled) {
              this.disable()
          }
          this.jq.show();
          PrimeFaces.skinButton(this.buttonBar.children(".ui-button"));
          this.buttonBar.children(".start.ui-button").click(function(d) {
              a.uploadContent.find(".start button").click()
          });
          this.buttonBar.children(".cancel.ui-button").click(function(d) {
              a.uploadContent.find(".cancel button").click()
          })
      },parseIFrameResponse: function(b) {
          var a = b.contents(), c = null;
          if ($.browser.mozilla || $.browser.opera || ($.browser.msie &amp;&amp; $.browser.version == "9.0")) {
              c = '&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;partial-response&gt;&lt;changes&gt;';
              a.find("update").each(function(d, f) {
                  var h = $(f), g = h.attr("id"), e = "&lt;![CDATA[" + h.text() + "]]&gt;";
                  c += '&lt;update id="' + g + '"&gt;' + e + "&lt;/update&gt;"
              });
              c += "&lt;/changes&gt;&lt;/partial-response&gt;"
          } else {
              c = $.trim(b.contents().text().replace(/(&gt; -)|(&gt;-)/g, "&gt;"))
          }
          return $.parseXML(c)
      },createPostData: function() {
          var a = this.cfg.process ? this.id + " " + this.cfg.process : this.id, b = this.form.serializeArray();
          b.push({name: PrimeFaces.PARTIAL_REQUEST_PARAM,value: "true"});
          b.push({name: PrimeFaces.PARTIAL_PROCESS_PARAM,value: a});
          b.push({name: PrimeFaces.PARTIAL_SOURCE_PARAM,value: this.id});
          if (this.cfg.update) {
              b.push({name: PrimeFaces.PARTIAL_UPDATE_PARAM,value: this.cfg.update})
          }
          return b
      },getMessage: function(a, b) {
          return a || b
      },destroy: function() {
          this.form.fileupload("destroy")
      },disable: function() {
          this.jq.children(".fileupload-buttonbar").find(".ui-button").addClass("ui-state-disabled").unbind().bind("click", function(a) {
              a.preventDefault()
          });
          this.cfg.fileInput.css("cursor", "auto")
      },INVALID_SIZE_MESSAGE: "Invalid file size.",INVALID_FILE_MESSAGE: "Invalid file type.",FILE_LIMIT_MESSAGE: "Max number of files exceeded."});
  </code></pre>
  
  <h2>Primefaces component</h2>
  
  <pre><code>&lt;h:form prependId="false" enctype="multipart/form-data" onclick="console.log('starting form');updateConfig(this);"&gt;
                          &lt;p:fileUpload onclick="alert('hi')"
                              fileUploadListener="#{fileUploadController.imageUpload}"
                              mode="advanced" id="fileuploader2" process="@form" sizeLimit="2"
                              label="Upload File" invalidSizeMessage="File Limit exceeded"
                              invalidFileMessage="Invalid File" cancelLabel="Cancel"
                              auto="true" styleClass="wboardUpload" widgetVar="fileLoader"  onstart="console.log('starting');updateConfig(this);console.dir(this);console.dir(this.form.fileupload)" /&gt;
                      &lt;/h:form&gt;
  </code></pre>