blueimp jquery multifile upload plugin with CI 2.1 |
[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 { 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 )
[eluser]bill19[/eluser]
[code] <!DOCTYPE HTML> <!-- /* * jQuery File Upload Plugin Demo 6.9 * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2010, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ --> <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"> <!-- Bootstrap CSS Toolkit styles --> <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css"> <!-- Generic page styles --> <link rel="stylesheet" href="<?php echo base_url('blueimp/css/style.css')?>"> <!-- Bootstrap styles for responsive website layout, supporting different screen sizes --> <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css"> <!-- Bootstrap CSS fixes for IE6 --> <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]--> <!-- Bootstrap Image Gallery styles --> <link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css"> <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --> <link rel="stylesheet" href="<?php echo base_url('blueimp/css/jquery.fileupload-ui.css')?>"> <!-- Shim to make HTML5 elements usable in older Internet Explorer versions --> <!--[if lt IE 9]>[removed][removed]<![endif]--> </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> <!-- The file upload form used as target for the file upload widget --> <form id="fileupload" action="<?php echo base_url('blueimp/server/php/index.php')?>" method="POST" enctype="multipart/form-data"> <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="row fileupload-buttonbar"> <div class="span7"> <!-- The fileinput-button span is used to style the file input field as button --> <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> <!-- The global progress information --> <div class="span5 fileupload-progress fade"> <!-- The global progress bar --> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="bar">/div> </div> <!-- The extended global progress information --> <div class="progress-extended"> </div> </div> </div> <!-- The loading indicator is shown during file processing --> <div class="fileupload-loading"></div> <br> <!-- The table listing the files available for upload/download --> <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>
[eluser]bill19[/eluser]
Code: <!-- modal-gallery is the modal dialog used for the image gallery -->
[eluser]bill19[/eluser]
Code: <skript src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></skript>
[eluser]somenet[/eluser]
While i am uploading the file following error is occur. [{"error":"The upload path does not appear to be valid."}]
[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="<?php echo base_url('blueimp/js/vendor/jquery.ui.widget.js')?>"></skript> will work. Best regards, Bill
[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? |
Welcome Guest, Not a member yet? Register Sign In |