jQuery File Upload & Fuel CMS

edival

I'm hoping someone can help me out. I'm trying to implement a module that has the drag & drop/multiple select file upload features of jQuery File Upload as shown with the demo here: http://blueimp.github.com/jQuery-File-Upload/

I found this thread, and I've been working with it:
http://getfuelcms.com/forums/discussion/203/how-would-you-approach-projects-images-modules/p1
and the CodeIgniter documentation: https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-6.5-with-CodeIgniter-2.1

but I'm not having much luck.

If I use Fuel's class="multiple", I can only select one upload at a time, but it does list them and upload them all at once.
If I use the jQuery File Upload scripts and features I can select them (and it lists the # of files I've selected), but it will only upload the first.

Is there a way of making the 2 work together painlessly?

Having these 2 pieces of tech working together would be amazing for any project requiring an image gallery or other file archiving system, and it doesn't use flash... love it.

Thanks guys.

admin

I'm not exactly sure what the issue may be at the moment but one guess may be how CIs Upload Class handles the $_FILES upload array for multiple files. More can be found here:
http://stackoverflow.com/questions/1908247/codeigniter-multiple-file-upload

Where to test would be in the fuel/modules/fuel/controllers/module.php _process_uploads method.

On a related note, we've made several changes for the next version including some to help with multiple file uploads as specified in the stackoverflow article. However, I'm not a fan of the multiple file plugin we are using either, but it didn't use Flash so we stuck with it. I'll definitely check out this plugin... seems pretty slick.

edival

I was able to get this working with CI by itself, so that's a bonus, which means there's no issues with the _process_uploads method.
This is because the upload loop is setup with the JavaScript.
This creates an interesting dilemma.

1) I need to be able to add some styling to the code to make it format decently, but I can't find a way to include external CSS files in the simple module like you can with external js files.

2) I need to be able to add extra html after the form for extra div's and javascript code so the images will show that are being uploaded.

Is there a way to do both of these with simple modules or will I have to move to advanced to do it?

Thanks again!

driechel

For adding extra html you could use "after_html method" of the formbuilder class because fuel uses this to create the forms for the modules.

http://www.getfuelcms.com/user_guide/libraries/form_builder

admin

There is also a fuel config value of 'xtra_css' that can be added which will be included for all pages in the CMS. It's a bit of overkill for one module but is another way to add javascript.

This issue will be addressed in the next release as well.

edival

I was looking for the "after_html" method which is exactly what I needed. Guess I was blind not being able to see it.

Also thanks for the xtra_css. That's perfect. (I couldn't find that in the docs either)

Soon as I get this working I'll post what I've done as I think it could help a lot of people.

edival

This project is starting to get me more comfortable with Fuel and I'm enjoying it. But here's today's questions:
1) I need to return a JSON response after on_after_post() in my simple module. What is the best way to make sure it's the last thing coming back to the page? Also I noticed that some JSON info is coming through, is there something automatically returning a response?

2) how can I enable a "select all" check box on the listing page of the module? Is there a simple setup feature I'm missing?

Thanks again!

admin

1) There is JSON on the page to return language specific stuff but that's probably not what you are needing. If you are needing JSON for your forms, consider adding that logic in the form_fields method perhaps using an after_html parameter on a field to attach the javascript. Or, there is an "ajax" method your javascript can use on your module that will automatically call a method on your model. The method on your model must begin with the prefix "ajax_". You can pass additional parameters to the method via $_GET:
// MODEL METHOD ... function ajax_my_ajax_method($params = array()) { // this would be any $_GET params passed print_r($params); } // YOUR JAVASCRIPT .... $(function(){ $.get(jqx_config.fuelPath + 'my_module/my_ajax_method', {param1: 'hello'}, function(json){ console.log(json)}); });
2) There is an "list_actions" simple module parameter you can use to add the button. However, you will need to add javascript as well which can be done with the "js" module parameter
http://www.getfuelcms.com/user_guide/modules/simple

edival

For adding the select/deselect all button in the list view I implemented the following:
In my extra_script.js file:
$(function() { $('a.ico_gallery_select').toggle(function(e) { e.preventDefault(); $('#multi_delete').css({'display':'block'}); $('#data_table .multi_delete').prop('checked', true); }, function() { $('#multi_delete').css({'display':'none'}); $('#data_table .multi_delete').prop('checked', false); }); });

In MY_fuel_modules.php:
$config['modules']['mod_name'] = array( 'js' => 'extra_script.js', 'list_actions' => array('gallery_select' => 'Select/Deselect All'), );

Works beautifully!

Lance

Sweet, thanks for sharing edival!

Might be worth noting to change prop() to attr() for older (1.5.1/fuel default) versions of jQuery.

Edit: really liked that so banged it into a project. Few little changes I made for me:

Config:
.... 'list_actions' => array('select_all' => 'Select all'), ...
Changed the name to be generic and label to reflect start

JS
$(function(){ $('a.ico_select_all').toggle(function(e){ e.preventDefault(); $('a.ico_select_all').html('Deselect all'); $('#multi_delete').css({'display':'block'}); $('#data_table .multi_delete').attr('checked', true); }, function(){ $('a.ico_select_all').html('Select all'); $('#multi_delete').css({'display':'none'}); $('#data_table .multi_delete').attr('checked', false); }); });

Just swaps the link text and attr() for default fuel/jQuery.

Added to the css:
.ico_select_all,.ico_pages{background-image:url(../images/ico_page_white_stack.png)}

admin

Nicely done... I'll look into rolling that in to the next release.

edival

Lance: That's perfect! Thanks, I implemented that!

Okay, my project is coming along great, but I'm totally stuck on the JSON info, it's very new to me and I want to learn how it works. My roadblock is with the communications between modules, perhaps someone would be willing to take a look at the site (test account) to see what I mean:
http://edival.net/pklive/fuel
user/pass: test
in the Gallery section.

Try uploading images and see what's returned after you do: just one error on success. Then compare it to here: http://blueimp.github.com/jQuery-File-Upload/
to see what's supposed to happen.
Obviously the file is uploaded fine and the thumbnail is created so it's only to do with passing the data back to the JS.

I'd paste the code, but apparently it doesn't like the extra 3900 characters

If you need anything let me know and I can email it to you.

I appreciate the help!

Thanks.

Lance

You're right JSON is being returned but then so is the markup for the create page.

galleries/create isn't a custom controller is it? If not I think you're going to need one. If you don't it'll use the default of /modules/fuel/controllers/module.php create() which has as its second to last line a view render (that's what is coming back after your JSON).

So in that custom controller you'd overwrite the create method with your own and return nothing but JSON

edival

I think I have it figured out... I don't know if there will be any side-effects yet or not, but what I did is:

fuel/modules/fuel/controllers/modules.php -> module.php
line 562 in Create() I changed the line to:
if (!is_ajax() ) $this->_render($this->views['create_edit'], $vars);

After doing this, I tested my Projects module from the tutorial and noticed NO issues. This actually looks like a great fix for those who want to use JSON in their simple modules!

Lance

It will work fine but it's not perfect.. IMO.

There's a few calls to redirect() in there for example and the show_error() that won't work as well as the fact that with just that line, you're still actually rendering the form without using it.

Last bit is easy enough to get around with:

if ( ! is_ajax()) { $vars = $this->_form(); $this->_render($this->views['create_edit'], $vars); }