Login

06-10-2012, 07:39 PM

[eluser]bill19[/eluser]
Hello everyone,

I was not able to figure out how to do it following https://github.com/blueimp/jQuery-File-U...gniter-2.1 . But after continuing work on the following thread: http://ellislab.com/forums/viewthread/218279/, I seem to have the plugin working as an asset. Please refer to thread 218279 above for more details, on downloading and the folder structure.

Next create a controller:

Code:
class Blueimp extends CI_Controller {

    public function index() {

        $this->load->helper('url');

      $this->load->view('blue_view');

  }

After this the heart of the code is the view ('blue_view'). Please see the next posts:
Hope it helps someone.

Regards,

Bill

( please note , I,ve changed all 'script's to 'skript's )

06-10-2012, 07:44 PM

[eluser]bill19[/eluser]
[code]
<!DOCTYPE HTML>

<html lang="en">
<head>
<meta charset="utf-8">

<title>jQuery File Upload Demo</title>
<meta name="description" content="File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">

<link rel="stylesheet" href="<?php echo base_url('blueimp/css/style.css')?>">


<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">



<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">

<link rel="stylesheet" href="<?php echo base_url('blueimp/css/jquery.fileupload-ui.css')?>">



</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">

<div class="page-header">
<h1>jQuery File Upload Demo</h1>
</div>
<blockquote>
<p>File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.<br>
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
</blockquote>
<br>


<form id="fileupload" action="<?php echo base_url('blueimp/server/php/index.php')?>" method="POST" enctype="multipart/form-data">

<div class="row fileupload-buttonbar">
<div class="span7">

<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
</div>

<div class="span5 fileupload-progress fade">

<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar">/div>
</div>

<div class="progress-extended"> </div>
</div>
</div>

<div class="fileupload-loading"></div>
<br>

<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
<br>
<div class="well">
<h3>Demo Notes</h3>
<ul>
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
<li>You can <strong>drag & drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.
</li>

06-10-2012, 07:46 PM

[eluser]bill19[/eluser]

Code:
&lt;!-- modal-gallery is the modal dialog used for the image gallery --&gt;

<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">

    <div class="modal-header">

        <a class="close" data-dismiss="modal">&times;</a>

        <h3 class="modal-title"></h3>

    </div>

    <div class="modal-body"><div class="modal-image"></div></div>

    <div class="modal-footer">

        <a class="btn modal-download" target="_blank">

            <i class="icon-download"></i>

            <span>Download</span>

        </a>

        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">

            <i class="icon-play icon-white"></i>

            <span>Slideshow</span>

        </a>

        <a class="btn btn-info modal-prev">

            <i class="icon-arrow-left icon-white"></i>

            <span>Previous</span>

        </a>

        <a class="btn btn-primary modal-next">

            <span>Next</span>

            <i class="icon-arrow-right icon-white"></i>

        </a>

    </div>

</div>

&lt;!-- The template to display files available for upload --&gt;

<skript id="template-upload" type="text/x-tmpl">

{% for (var i=0, file; file=o.files[i]; i++) { %}

    <tr class="template-upload fade">

        <td class="preview"><span class="fade"></span></td>

        <td class="name"><span>{%=file.name%}</span></td>

        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>

        {% if (file.error) { %}

            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>

        {% } else if (o.files.valid && !i) { %}

            <td>

                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar">/div></div>

            </td>

            <td class="start">{% if (!o.options.autoUpload) { %}

                <button class="btn btn-primary">

                    <i class="icon-upload icon-white"></i>

                    <span>{%=locale.fileupload.start%}</span>

                </button>

            {% } %}</td>

        {% } else { %}

            <td colspan="2"></td>

        {% } %}

        <td class="cancel">{% if (!i) { %}

            <button class="btn btn-warning">

                <i class="icon-ban-circle icon-white"></i>

                <span>{%=locale.fileupload.cancel%}</span>

            </button>

        {% } %}</td>

    </tr>

{% } %}

</skript>

&lt;!-- The template to display files available for download --&gt;

<skript id="template-download" type="text/x-tmpl">

{% for (var i=0, file; file=o.files[i]; i++) { %}

    <tr class="template-download fade">

        {% if (file.error) { %}

            <td></td>

            <td class="name"><span>{%=file.name%}</span></td>

            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>

            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>

        {% } else { %}

            <td class="preview">{% if (file.thumbnail_url) { %}

                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>

            {% } %}</td>

            <td class="name">

                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>

            </td>

            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>

            <td colspan="2"></td>

        {% } %}

        <td class="delete">

            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">

                <i class="icon-trash icon-white"></i>

                <span>{%=locale.fileupload.destroy%}</span>

            </button>

            &lt;input type="checkbox" name="delete" value="1"&gt;

        </td>

    </tr>

{% } %}

</skript>

06-10-2012, 07:47 PM

[eluser]bill19[/eluser]

Code:
<skript src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></skript>

&lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;

<skript src="&lt;?php echo base_url('blueimp/js/vendor/jquery.ui.widget.js')?&gt;"></skript>

&lt;!-- The Templates plugin is included to render the upload/download listings --&gt;

<skript src="http://blueimp.github.com/javaskript-Templates/tmpl.min.js"></skript>

&lt;!-- The Load Image plugin is included for the preview images and image resizing functionality --&gt;

<skript src="http://blueimp.github.com/javaskript-Load-Image/load-image.min.js"></skript>

&lt;!-- The Canvas to Blob plugin is included for image resizing functionality --&gt;

<skript src="http://blueimp.github.com/javaskript-Canvas-to-Blob/canvas-to-blob.min.js"></skript>

&lt;!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo --&gt;

<skript src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></skript>

<skript src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></skript>

&lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;

<skript src="&lt;?php echo base_url('blueimp/js/jquery.iframe-transport.js')?&gt;"></skript>

&lt;!-- The basic File Upload plugin --&gt;

<skript src="&lt;?php echo base_url('blueimp/js/jquery.fileupload.js')?&gt;"></skript>

&lt;!-- The File Upload file processing plugin --&gt;

<skript src="&lt;?php echo base_url('blueimp/js/jquery.fileupload-fp.js')?&gt;"></skript>

&lt;!-- The File Upload user interface plugin --&gt;

<skript src="&lt;?php echo base_url('blueimp/js/jquery.fileupload-ui.js')?&gt;"></skript>

&lt;!-- The localization skript --&gt;

<skript src="&lt;?php echo base_url('blueimp/js/locale.js')?&gt;"></skript>

&lt;!-- The main application skript --&gt;

<skript src="&lt;?php echo base_url('blueimp/js/main.js')?&gt;"></skript>

&lt;!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ --&gt;

&lt;!--[if gte IE 8]><skript src="&lt;?php echo base_url('blueimp/js/cors/jquery.xdr-transport.js')?&gt;"></skript><![endif]--&gt;

&lt;/body&gt; 

&lt;/html&gt;

06-10-2012, 11:51 PM

[eluser]somenet[/eluser]
While i am uploading the file following error is occur.

[{"error":"The upload path does not appear to be valid."}]

06-11-2012, 06:02 AM

[eluser]bill19[/eluser]
Hi Somenet,

I'm not a very experienced debugger. I would try some googling of the error message. For example what about http://ellislab.com/forums/viewthread/81679/.

One thing I should emphasize is that when I downloaded the plugin, I tested it first on my server to make sure it was working, before integrating with CI. It should be very easy if you follow the directions. Also in my example above, I should point out that I renamed the folder containing the plugin to 'blueimp'. That way lines like:

Code:
<skript src="&lt;?php echo base_url('blueimp/js/vendor/jquery.ui.widget.js')?&gt;"></skript>

will work.

Best regards,

Bill

08-27-2014, 05:16 AM

[eluser]Lykos22[/eluser]
Hi, I have a little problem here. I have set up all css and js files and the form correctly, but when I try to pick some files, the upload template doesn't show at all. any ideas?