[El Forum]

[eluser]Lykos22[/eluser]
Hi, I'd like some help please. I'm trying to setup blueimp in order to upload images. My folder structure look like this

Code:

- application
- system
- public_html
  -- index.php
  -- css
  -- js
  -- plugins
     --- fileupload ( contain css, js and img folders of blueimp )

These are the main parts on my view

Code:

// header section
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">

<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<?php echo link_tag('plugins/fileupload/css/jquery.fileupload.css').PHP_EOL; ?>
<?php echo link_tag('plugins/fileupload/css/jquery.fileupload-ui.css').PHP_EOL; ?>

<skript src="https://code.jquery.com/jquery.min.js" ></skript>
<skript src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" ></skript>
<skript src="&lt;?php echo base_url('js/bootstrap.min.js'); ?&gt;" ></skript>


code here ....


// footer section
<skript src="&lt;?php echo base_url('plugins/fileupload/js/vendor/jquery.ui.widget.js'); ?&gt;" ></skript>
<skript src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js" ></skript>
<skript src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js" ></skript>
<skript src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js" ></skript>
<skript src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/jquery.iframe-transport.js'); ?&gt;" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/jquery.fileupload.js'); ?&gt;" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/jquery.fileupload-process.js'); ?&gt;" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/jquery.fileupload-image.js'); ?&gt;" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/jquery.fileupload-audio.js'); ?&gt;" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/jquery.fileupload-video.js'); ?&gt;" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/jquery.fileupload-validate.js'); ?&gt;" ></skript>
<skript src="&lt;?php echo base_url('plugins/fileupload/js/main.js'); ?&gt;" ></skript>

My main view

Code:

<!-- Modal -->
<div class="modal fade bs-modal-lg" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="uploadModalLabel">
     <i class="fa fa-folder-open"></i> &lt;?php echo html_escape($album->title); ?&gt;
    </h4>
   </div> --&gt;

   <div class="modal-body">
    &lt;form action="&lt;?php echo base_url('admin/albums/upload/'.$album-&gt;album_id); ?&gt;" method="POST" enctype="multipart/form-data" id="fileupload">
     &lt;!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --&gt;
     <div class="row fileupload-buttonbar">
      <div class="col-lg-7">
       &lt;!-- The fileinput-button span is used to style the file input field as button --&gt;
       <span class="btn green fileinput-button">
        <i class="fa fa-plus"></i>
        <span>Add files...</span>
        &lt;input type="file" name="files[]" multiple /&gt;
       </span>

       <button class="btn blue start" type="submit">
        <i class="fa fa-upload"></i>
        <span>Start upload</span>
       </button>

       <button class="btn warning cancel" type="reset">
        <i class="fa fa-ban-circle"></i>
        <span>Cancel upload</span>
       </button>

       <button class="btn red delete" type="button">
        <i class="fa fa-trash"></i>
        <span>Delete</span>
       </button>

       &lt;input type="checkbox" class="toggle"&gt;
       &lt;!-- The global file processing state --&gt;
       <span class="fileupload-process"></span>
      </div>

      &lt;!-- The global progress information --&gt;
      <div class="col-lg-5 fileupload-progress fade">
       &lt;!-- The global progress bar --&gt;
       <div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-striped active">
        <div  class="progress-bar progress-bar-success"></div>
       </div>

       &lt;!-- The extended global progress information --&gt;
       <div class="progress-extended">&nbsp;</div>
      </div>
     </div>

     &lt;!-- The table listing the files available for upload/download --&gt;
     <table class="table table-striped clearfix" role="presentation">
      <tbody class="files"></tbody>
     </table>
    &lt;/form&gt;
   </div>&lt;!-- /.modal-body --&gt;

   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
   </div>
  </div>
</div>
</div>

&lt;!-- The template to display files available for upload --&gt;
<skript id="template-upload" type="text/x-tmpl">
code here ...
</skript>

&lt;!-- The template to display files available for download --&gt;
<skript id="template-upload" type="text/x-tmpl">
code here ...
</skript>

Everything seems ok, but when I tried to pick an image the template to display images that are available for upload does not appear at all on screen. I also don't get any errors on firebug. Any ideas what I'm doing wrong??