[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="<?php echo base_url('js/bootstrap.min.js'); ?>" ></skript>
code here ....
// footer section
<skript src="<?php echo base_url('plugins/fileupload/js/vendor/jquery.ui.widget.js'); ?>" ></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="<?php echo base_url('plugins/fileupload/js/jquery.iframe-transport.js'); ?>" ></skript>
<skript src="<?php echo base_url('plugins/fileupload/js/jquery.fileupload.js'); ?>" ></skript>
<skript src="<?php echo base_url('plugins/fileupload/js/jquery.fileupload-process.js'); ?>" ></skript>
<skript src="<?php echo base_url('plugins/fileupload/js/jquery.fileupload-image.js'); ?>" ></skript>
<skript src="<?php echo base_url('plugins/fileupload/js/jquery.fileupload-audio.js'); ?>" ></skript>
<skript src="<?php echo base_url('plugins/fileupload/js/jquery.fileupload-video.js'); ?>" ></skript>
<skript src="<?php echo base_url('plugins/fileupload/js/jquery.fileupload-validate.js'); ?>" ></skript>
<skript src="<?php echo base_url('plugins/fileupload/js/main.js'); ?>" ></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">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="uploadModalLabel">
<i class="fa fa-folder-open"></i> <?php echo html_escape($album->title); ?>
</h4>
</div> -->
<div class="modal-body">
<form action="<?php echo base_url('admin/albums/upload/'.$album->album_id); ?>" method="POST" enctype="multipart/form-data" id="fileupload">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn green fileinput-button">
<i class="fa fa-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple />
</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>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress information -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-striped active">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped clearfix" role="presentation">
<tbody class="files"></tbody>
</table>
</form>
</div><!-- /.modal-body -->
<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>
<!-- The template to display files available for upload -->
<skript id="template-upload" type="text/x-tmpl">
code here ...
</skript>
<!-- The template to display files available for download -->
<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??