08-29-2014, 01:58 AM
[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
These are the main parts on my view
My main view
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??
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??