Uploadify and ajax

DarrenSmith

I am creating a directory browsing application with the ability for uploading of files to different directories. The application uses ajax and uploadify which is causing me a problem - every time the directory is changed I need to re-call uploadify and change its folder unfortunately I'm getting a new 'browse' for every ajax call. I need a way to 'delete' the uploadify code every time I do a new ajax call - is this possible? Atm I can't even see the html appended by uploadify to get rid of it (assuming thats how it works).

daveznspace

Use firebug and you can see it clearly.

Also you really shouldn't use ajax with it.. yeah yeah i know most people on here wouldn't agree but if you are doing this as a professional site then don't do it. For 1 you should NEVER EVER use a client supplied image or file name, at minimum clean the name to remove and unsafe chars, spaces etc and return that to the page in a hidden form field and then submit the form.

Why do you need to call uploadify when you change folders? i would assume to move the file but I would just send the from folder & the 2 folder in an ajax call to a script that moves it.

DarrenSmith

Hi Dave thanks for your response using firebug was what I needed! I discovered that Uploadify appends an object called #XUploader where X is the name of the input element you called Uploadify on. I just did $('#XUploader').remove() to remove all existing instances before adding a new one and that fixed the problem.

With regards to ajax use with uploadify could you explain your rational a bit more? If its just a sanitzation issue couldn't that be done in server-side in uploadify.php before the file is even uploaded (and shouldn't you always validate/sanitze on the server-side anyway)?

TravisN.

When your user selects the directory that you want to save the file into, you can update the folder option by using

$('#XUploader').uploadifySettings('folder', $('#your_select_ID').val());

That way you don't need to create a new uploadify with each selection.

DarrenSmith

Ah ok that looks more efficient - I've tried that with this code:


if('#fileInputUploader').length == 0)
{
       //// create uploaders
}
else
{
         //// otherwise just change the folder property

	var newfolder = \"/learnerzone/files/home/\"+ dir;

	alert(\"before\");  /// executes correctly

	$('#fileInput').uploadifySettings('folder', newfolder);
	
        alert(\"done\");   /// never happens and script execution halts

	$('#fileInput2').uploadifySettings('folder', newfolder);
}

As commented the before alert is shown but running the uploadifySettings command causes the execution to halt.

TravisN.

what does your debugger say? safari or firebug are the easier ones to use.

daveznspace

I don't use php I use coldfusion but logic is the same.
You would select the file like travis showed and then just send an ajax request to a processing page and use your language move function from where it is to where you want it to go which should take 3 variables.. The file, the current folder & destination folder.

DarrenSmith

Ok this is what Firebug throws as an error


document.getElementById(a(this).attr(\"id\") + \"Uploader\").updateSettings is not a function

[Break on this error] if(jQuery){(function(a){a.extend(a.fn,{u...rFileUploadQueue(false)})}})})(jQuery)};

http://www.ldr2.co.uk/learnerzone/Modules/uploadify/jquery.uploadify.v2.0.3.min.js
Line 26

TravisN.

that error means you have some incorrect js code on your webpage that is stopping uploadify from completely loading. The coding error isn't enough to trip the debugger, which is why it looks like uploadify is the problem.

DarrenSmith

Yes I figure it isn't a problem with Uploadify - the problem is in this line of code since the error doesn't occur when I comment them out:

$('#fileInput').uploadifySettings('folder', /learnerzone/files/home/\"+ dir);

I don't know if I'm getting the syntax wrong or what is going on. Or are you saying there is another error further back in the code which is preventing the necessary code for the uploadifySettings function being loaded?

DarrenSmith

Thanks for the help and the great plugin but I've decided to remove Uploadify from my project for the time being. I'm having difficulty integrating it with both ajax and jqueryui. With enough effort I think I could fix it - the multiple files in one browse dialog would be worth it I think but unfortunately I don't have that luxury right now.

Darren

Jon.Armstrong

Darren,
I think the problem your experience is the exact same that I was. From what you've said it sounds like your using your uploadified elements in a modal that is being created by the JQueryUI dialog functionality. If you are you need to uploadify your elements AFTER you create the dialog, but before you display it. I use this function to accomplish this task.
modal is a reference to the object that I want to make a modal, width is the display width of the modal and fn is a function I call before I show the modal.


    showDialog: function(modal, width, fn) {
        _modal = modal;
        modal.dialog({
            closeOnEscape: true,
            bgiframe: true,
            autoOpen: false,
            width: width,
            modal: true
        });
        if (fn &amp;&amp; typeof (fn) == \"function\") {
            fn();
        }
        modal.dialog(\"open\");

I use that function, like this so it uploadifies my elements at the proper point.


showDialog($modal, 480, function() {
                $(\"#mdlUploadFileInput\").uploadify({
                    'uploader': '../js/uploadify/uploadify.swf',
                    'script': '/post/submits.aspx',
                    'folder': '/post',
                    'cancelImg': '/js/uploadify/cancel.png',
                    'multi': true,
                    'auto': true,
                    'queueSizeLimit': 3,
                    'scriptData': { 'action': 'fileUpload', 'prnID': s.getFolder(true), 'prjID': s.getProject() },
                    'onComplete': function() { return false; }
                });

The other half of this that I haven't elaborated on is that you SHOULDN'T bother with calling uploadify in a $(document).ready() event because its really wasted effort since you need to do that before the form displays anyways to make sure the JQueryUI dialog doesn't break it. In addition, if the modal that you use is reused constantly and just reset between showing, make sure you reset the modal to its pre-uploadify state before calling your dialog function.

Hope that helps.

daveznspace



$('#fileInput').uploadifySettings('folder', /learnerzone/files/home/\"+ dir);

wrong syntax, missing a "



$('#fileInput').uploadifySettings('folder', '/learnerzone/files/home/'+ dir);

Howdy, Stranger!

Categories