jquery.fileupload completed callback and add image as list with template.

gistfile1.js

          $('#fileupload').fileupload('option', {
        .........
        /* on upload complete event*/
        completed:function(e, responseJSON){
                  var files = getFilesFromResponse(responseJSON);
                  var file = files[0] ||
                  {error: 'Empty file upload result'};

                  if (!file.error) {
                      var data = {};
                      data.id = name;
                      /* fill data with what you want */
                      data.fileName = file.name;
                      insertListItems(ulImgContainer, data);
                      console.log(file.name);

                  }

            }  ,
            
            .............
            
          });
          
    var ulImgContainer = $("#img-container-ul");
    var itemRender = $("#itemTemplate");
          
      /* apply data to jsrender template and add element */ 
      function insertListItems(el, data) {
        var irendered = itemRender.render(data);
        var emptyImg = $("li.add-img-r").first();
        if (emptyImg.length) {
            emptyImg.replaceWith(irendered);
        }
        else {
            el.prepend(irendered);
        }
    }

    function getFilesFromResponse(data) {
        if (data.result && $.isArray(data.result.files)) {
            return data.result.files;
        }
        return [];
    }

upload-img.html

<script id="itemTemplate" type="text/x-jsrender">
    <li id="{{>fileName}}">
        <div class="thumbnail" >
            <div class="image-style">
                <img src="/subfiles/serving/{{>fileName}}">
            </div>
        </div>
    </li>
</script>


.........

   <div id="img-container">
        <ul id="img-container-ul" class="thumbnails">
  .............