Feature Request: Two Upload Buttons in Same View

[deewilcox]

Thanks for this incredible plugin! I am using it on a client site, and it's a breeze compared to some of the other methods I've used for image uploads with CakePHP in the past.

I'm using it on this project in two ways -- for any given Post ID, I'm creating a featured image and a gallery of images (with Fancybox). The user can upload to either of the two folders.

I copied your edit action in UploadHelper.php and added a featured action and a gallery action. They are basically identical.

Folder creation works successfully - I have Post/ID/featured and Post/ID/gallery in my folder structure. However, the view for $this->Upload(); is only rendering one upload button, and the upload is sending the image to whichever action is last. Here's the code for my form:

<?php

            $id = $this->data['Post']['id'];
            $dir = 'Post/'.$id;
            $featured_image = $dir . '/featured';

            echo $this->Form->create('Post', array('action' => 'edit'));
            echo $this->Form->input(__('title'));
            echo $this->Form->input(__('body'), array('rows' => '5'));
            echo $this->Form->checkbox(__('featured'),array('value' => 1));
            echo __('<h4>Check if Featured</h4>');
            echo '<br>';
            echo '<h4>Add a Featured Image</h4>';
            echo '<span style="font-size:12px; font-style:italic;">The featured image will be displayed at the top of your news item.</span><br><br>';
            echo $this->Upload->featured($dir, '/featured');

            echo '<h4>Add Gallery Images</h4>';
            echo '<span style="font-size:12px; font-style:italic;">The gallery images will be displayed in a lightbox gallery at the bottom of your news post.</span><br><br>';
            echo $this->Upload->gallery($dir, '/gallery');

            echo $this->Form->input('id', array('type' => 'hidden'));
            echo $this->Form->end(__('Save Post'));
         ?>

So I guess the question is how to create two instances of `$this->Upload();'. Any ideas?

Thanks again for your help! You rock!

[srs81]

Glad you like it. :) Yeah, I built it because I didn't find any CakePHP plugin that did exactly what I was looking for either, so glad its useful!

As for the two uploads not being present - that's interesting - I actually suspect it may have to do with some Javascript conflict due to the Javascript being loaded twice etc. I suspect that's what breaking it.

Can you open up your Javascript console (Firebug, Chrome developer, etc) and see what errors the Javascript might be throwing? If you find it, you can probably refactor the Upload JS code into a common location, and remove its being injected twice into the page.

I could be wrong, and there could be something else, but I highly suspect its the Javascript that's breaking it.

[deewilcox]

Thanks for your feedback! I opened up Console (Chrome), ran a couple of uploads, and no Javascript errors were thrown.

However, I did take a closer look at the code and noticed the createUploader() function uses document.getElementById('AjaxMultiUpload'). Using echo $this->Upload twice creates a div with that ID twice.

My guess is that the jQuery is firing on the last div with that ID. What do you think?

[deewilcox]

Okay, I don't think it has to do with the div IDs -- I tried updating my functions in UploadHelper.php to this, but it didn't make a difference. Removing one createUploader instance does allow the other one to work, so the conflict must be there instead.

public function featured ($model, $id) {
        require_once (ROOT . DS . APP_DIR . "/Plugin/AjaxMultiUpload/Config/bootstrap.php");
        $dir = Configure::read('AMU.directory');
        if (strlen($dir) < 1) $dir = "files";

        $str = $this->view ($model, $id, true);
        $webroot = Router::url("/") . "ajax_multi_upload";
        // Replace / with underscores for Ajax controller
        $lastDir = str_replace ("/", "___", 
            $this->last_dir ($model, $id)); 
        $str .= <<<END
            <br /><br />
            <link rel="stylesheet" type="text/css" href="$webroot/css/fileuploader.css" />
            <script src="$webroot/js/fileuploader.js" type="text/javascript"></script>
            <div id="featuredUpload">
                <noscript>
                     <p>Please enable JavaScript to use file uploader.</p>
                </noscript>
            </div>
            <script src="$webroot/js/fileuploader.js" type="text/javascript"></script>
            <script>        
                function createFeaturedUploader(){            
                    var uploader = new qq.FileUploader({
                        element: document.getElementById('featuredUpload'),
                        action: '$webroot/uploads/upload/$lastDir/',
                        debug: true
                    });           
                }
                window.onload = createFeaturedUploader;     
            </script>
END;
        return $str;
    }

    public function gallery ($model, $id) {
        require_once (ROOT . DS . APP_DIR . "/Plugin/AjaxMultiUpload/Config/bootstrap.php");
        $dir = Configure::read('AMU.directory');
        if (strlen($dir) < 1) $dir = "files";

        $str = $this->view ($model, $id, true);
        $webroot = Router::url("/") . "ajax_multi_upload";
        // Replace / with underscores for Ajax controller
        $lastDir = str_replace ("/", "___", 
            $this->last_dir ($model, $id)); 
        $str .= <<<END
            <br /><br />
            <link rel="stylesheet" type="text/css" href="$webroot/css/fileuploader.css" />
            <script src="$webroot/js/fileuploader.js" type="text/javascript"></script>
            <div id="galleryUpload">
                <noscript>
                     <p>Please enable JavaScript to use file uploader.</p>
                </noscript>
            </div>
            <script src="$webroot/js/fileuploader.js" type="text/javascript"></script>
            <script>        
                function createGalleryUploader(){            
                    var uploader = new qq.FileUploader({
                        element: document.getElementById('galleryUpload'),
                        action: '$webroot/uploads/upload/$lastDir/',
                        debug: true
                    });           
                }
                window.onload = createGalleryUploader;     
            </script>
END;
        return $str;
    }

[srs81]

OK I think you're on the right track, thanks for debugging it so far. I'm actually using a third-party open-source uploader - http://valums.com/ajax-upload/ - to implement the upload, and only made slight changes to it, so I don't know too much about how it works. I'll try to have a look if I can.

Any way you'll be able to split the uploads into two pages? You do need them on one page, is that right?

[bobartlett]

I was having the same issue so I modified the edit function in View/Helper/UploadHelper.php. I submitted a pull request with a quick and dirty fix.

[deewilcox]

@bobartlett Awesome -- I'd love to see what you came up with!

@srs81 -- Unfortunately, yes -- need to have them on the same page per spec for the UIX on this project. I'll be working on this one again soon, so I'll let you know if I come up with anything that works.

[bobartlett]

It is basically adding subdirs echo $this->Upload->edit('Requirement', $this->request->data['Requirement']['id'] . '/subdir1'); echo $this->Upload->edit('Requirement', $this->request->data['Requirement']['id'] . '/subdir2');

and modifying the edit function of View/Helper/UploadHelper.php

https://github.com/bobartlett/CakePHP-AjaxMultiUpload/commit/599ea74beb07a7e77cf66ec7a68073b322ec34f5

[srs81]

Just wanted to confirm that Bob's changes worked perfectly! Thanks a ton, Bob! Just merged your pull request, and will update the docs.