Getting uploadify to work

[eluser]Bramme[/eluser]
Hi guys

I'm working on a little project and I need to upload several files for an image gallery. Instead of uploading all files seperately, I've decided to use some sort of multi-uploader.

I've found this great jQuery plugin: Uploadify

Here's the code I use:

The form

Code:

<?php echo form_open_multipart($this->uri->uri_string); ?>
<p><label for="title">Title: <br />
&lt;input type="text" name="title" id="title" /&gt;
</label></p>
<p>Select the photos you would like to add to the gallery<br />
&lt;input type="file" name="file_input" id="file_input" /&gt;
</p>

&lt;/form&gt;

The JS that loads Uploadify:

Code:

$(document).ready(function() {
    $('#file_input').fileUpload({
        'uploader': '/svn/handinhand/assets/js/uploadify/uploader.swf',
        'script': '/svn/handinhand/admin/gallery/upload',
        'folder': '/svn/handinhand/assets/images/galleries',
        'multi': true,
        'auto': true,
        'fileExt': '*.jpg;*.jpeg;*.png;*.gif',
        'buttonText': 'Browse...',
        'cancelImg': '/svn/handinhand/assets/js/uploadify/cancel.png'
    });
});

My upload function:

Code:

function upload() {
    if ( ! empty($_FILES)) {
        $tempFile = $_FILES['file_input']['tmp_name'];
        $targetPath = $_SERVER['DOCUMENT_ROOT'] . '/SVN/handinhand/assets/images/galleries';
        $targetFile =  str_replace('//','/',$targetPath) . $_FILES['file_input']['name'];
        
        move_uploaded_file($tempFile,$targetFile);
    
    }
    
    echo '1';
}

As far as I can tell Uploadify is loading, I can click on the button, I can select multiple files and when I select them, they are loaded in my uploading queu. However, they immediately return "IO Error - picturename - 100%" and the files aren't uploaded.

Have any of you worked with this plugin before or have any clue as to how to get it working?

[eluser]M_K[/eluser]
Hi mate,

I had the same problem as well, I don't know if the changes I made were the right way but I got single upload working, haven't tested the others.

You need to make changes to the js and fla file to get it working.

Open up uploader.fla and go to line 345 - change to:

Code:

var scriptURL:URLRequest = new URLRequest('upload.php' + '?folder=' + unescape(getFolderPath()) + unescape(param.scriptData));

You'll need to compile this version of the fla file over the existing swf and make sure the upload.php file lives in the same directory as the swf file.

Open up uploadify.js (un-compressed version), I made a few changes between lines 60 and 85:

Code:

if (flashVer >= 9) {
                    $(this).each(function(){
                        settings = $.extend({
                        uploader:      'uploader.swf',
                        script:        'upload.php',
                        folder:        '',
                        height:        30,
                        width:         110,
                        cancelImg:     'cancel.png',
                        wmode:         'opaque',
                        scriptAccess:  'sameDomain',
                        fileDataName:  'Filedata',
                        displayData:   'percentage',
                        onInit:        function() {},
                        onSelect:      function() {},
                        onCheck:       function() {},
                        onCancel:      function() {},
                        onError:       function() {},
                        onProgress:    function() {},
                        onComplete:    function() {}
                    }, options);
                    var pagePath = location.pathname;
                    pagePath = pagePath.split('/');
                    pagePath.pop();
                    pagePath = pagePath.join('/') + '/';
                    var data = '&pagepath;=' + '';

The code in my view looks like this:

Code:

$(document).ready(function() {
                                                                                                      
        $('#fileInput').fileUpload({            
            'uploader': '<?=base_url();?>uploadify/uploader.swf',
            'folder': '/nd/uploadify/uploads',
            'auto': true,
            'cancelImg': '<?=base_url();?>uploadify/cancel.png',
            'fileExt': '*.jpg;*.jpeg;*.png;*.gif',
      'buttonText': 'Browse...',
            
            onError: function (a, b, c, d) {
                 if (d.status == 404)
                        alert('Could not find upload script. Use a path relative to: '+'<?= getcwd() ?>');
                 else if (d.type === "HTTP")
                        alert('error '+d.type+": "+d.status);
                 else if (d.type ==="File Size")
                        alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
                 else
                        alert('error '+d.type+": "+d.text);
            }
        });
    });

I didn't use the script parameter in the view.

There's probably a better way to do this, i.e. a more CI based approach, but this is what I had to do. Hope it helps

[eluser]The Wizard[/eluser]
Hello
i personally use aurigma, its really good i would recommend you take a look

[eluser]Bramme[/eluser]
thanks for the tip, but that's way more advanced than i need.

[eluser]Johan André[/eluser]
I got uploadify working without changing the orginal files.
I placed the two php-files in the {root}/uploadify and set the paths.
It works just fine with single and multiple uploads if you grant permissions to the uploadify-directory in your .htaccess-file.

I wanted to use a controller instead of the distributed php-file but that failed.
I have not checked why, but I think it has something to do with CI blocking GET-data...

[eluser]Bramme[/eluser]
Could you specify how you "grant permissions to the uploadify-directory in your .htaccess-file." And show me your javascript file?

[eluser]Bramme[/eluser]
[quote author="Johan André" date="1238878882"]grant permissions to the uploadify-directory in your .htaccess-file. [/quote]

Bumping this thread. Could anyone specify how to do the quoted part?

[eluser]Bramme[/eluser]
Also (sorry for the triple post, but I really need this to work), I found a little script on the Uploadify forums to enable some kind of debugging. When using .htaccess clean url's, I get an error saying it can't find the upload script, when I use the proper index.php?/ url, it gives me a 403 error.

Am I wrong to assume this has smth to do with what Johan said?

[eluser]Johan André[/eluser]
Hey!

Sorry for not getting back to you...

I got this in my .htaccess:

Code:

RewriteEngine on
RewriteCond $1 !^(index\.php|(.*)\.swf|uploadify|application|system|assets|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

It "grants" access to the directories specified in the RewriteCond.

I got a folder called "uploadify" in the root (next to index.php) which contains the php-files from the original uploadify-package.

I generally use this kind of structure for my projects:

Code:

.htaccess (see example above)
application (moved out of system-directory)
assets
    cache
    css
    flash
    icons
    images
    javascript
    uploads (this one is the user-uploads-folder)
index.php (configured to use application-folder "../application".
system
uploadify (contains: check.php and upload.php)

Hope this helps you a little bit...

Happy easter!

[eluser]Bramme[/eluser]
That one line in the .htaccess file did it for me. Thank you VERY much!