fileUploadSettings is not a function

krisleech

I have had uploadify working perfectly earlier in the week but after upgrading to 2.1.0 I am getting an error when trying to set scriptData from an event.

I changed uploadifySettings to fileUploadSettings but it appears not to be working.

Here is my code, can any spot why it no longer works. The stuff between <%= %> is dynamic data.



    $(\"#entry_remix\").uploadify({
      'uploader'       : '/javascripts/jquery-uploadify/uploadify.swf',
      'script'         : '<%= remix_upload_path(@entry) %>',
      'cancelImg'      : '/javascripts/jquery-uploadify/cancel.png',
      'fileDataName'   : 'entry[remix]',
      'folder'         : 'uploads',
      'auto'           : true,
      'multi'          : false,
      'method'         : 'GET',
      'scriptData'     : { 'user_id':'<%= @encrypted_user_id %>' },      
      'scriptAccess'   : 'always',
      'onSelect'       : function(){},
      'onError'        : function(event, qid, file, error) { alert('There has been an error uploading, please try again later! CODE: ' + error.info); },
      'onComplete'     : function(event, qID, file){ $('#completed_message').show(); }      
    });

    // Additional data to send
    $('#entry_title').change(function(){
      $(\"#entry_remix\").fileUploadSettings('scriptData',{'title': $('#entry_title').val()});
    });

The Error:

Error: $("#entry_remix").fileUploadSettings is not a function
Source File: http://localhost:3000/my/entries/31175855/edit
Line: 145

Many thanks for a great plugin! Will be used on Back2You remix site!

iStan

jup, change fileUploadSettings to uploadifySettings

For more information, check the manual 'Uploadify v2.1.0 Manual.pdf' page 7

krisleech

Hi iStan - thanks for the replay. The thing is I was using "uploadifySettings" and it was working. I changed it, after reading the PDF doc, because I was getting an error. I have just changed it back to confirm and I get the following error:

Error: document.getElementById(a(this).attr("id") + "Uploader").updateSettings is not a function
Source File: http://localhost:3000/javascripts/jquer ... 1.0.min.js
Line: 26

The actual uploader works so I would have thought that the "#entry_remix" DIV would have been assigned the uploadify functionality and it should accept the "updateSettings" call...

There is an object tag being generated which has the ID "entry_remixUploader". This is I am guessing the element the error relates to.

Grrrr!

iStan

If you see the function that you are calling:

.updateSettings

and what the manual is stating:

.uploadifySettings

krisleech

I'm not calling "updateSettings" that must be called internally and is ending up in the error.

The two variations I have tried are as followings:


 // Additional data to send
    $('#entry_title').change(function(){
      $(\"#entry_remix\").uploadifySettings('scriptData',{'title': $('#entry_title').val()});
    });


 // Additional data to send
    $('#entry_title').change(function(){
      $(\"#entry_remix\").fileUploadSettings('scriptData',{'title': $('#entry_title').val()});
    });

krisleech

After starting from scratch and adding everything but by bit it seems that the problem is caused by having the browse button inside a hidden DIV ("style='display:none;'). I display the containing DIV after the user fills out a form.

So I now have a functioning uploadify again (as I did before!) but I need to work out how I can ensure fields are filled before the user clicks the browse button. I am auto uploading so this needs to the last action the user takes.

It is a shame there is not a 'before_upload' hook which would allow us to return false to prevent the upload.

I think I'll start a new thread asking about this problem...

iStan

You could disable auto upload and bind a javascript function on the form submit button. In the javascript function you will perform the validation (use jquery validate plugin for example) and when everything is fine perform the upload and submit the form by simulating a click on a hidden button. The event handler of that hidden button will than do the back end form processing.

romkey

I had a similar problem. It turned out to be a race condition between my Javascript calling uploadifySettings() and the Flash handler actually being loaded - you can't successfully call uploadifySettings() before Flash is ready, and unfortunately there's no callback to let you know that Flash is good to go (or that the load failed).

In my case I've inserted a delay before calling uploadifySettings() but that's a very bad way to handle the problem.

zyON

I also had a similar problem, but I found an easy solution for my case:

I've created a variable that holds the JSON object to configure uploadify:


var uploadifyConfig = {
			'uploader'       : '/js/uploadify.swf',
			'script'         : '/upload/do_upload',
			'cancelImg'      : '/assets/images/cancel.png',
			'scriptAccess'   : 'always',
			'folder'         : '/uploads',
			'multi'          : true,
                        ...
}

And use this to initialize the several uploadify objects like this:


$(\"#fileInput_1\").uploadify(uploadifyConfig);

for another uploadify object I change, for example, the folder element writing directly in the configuration JSON object:


uploadifyConfig.folder = '/uploads2';

and apply it to another uploadify object:


$(\"#fileInput_2\").uploadify(uploadifyConfig);

Paradox

I must admit that it is really annoying that this hasn't been resolved up until this day since it was reported just over a year ago. I have tried all of the points raised and several attempts at resolving the issue myself, but to no avail.

I have ended up writing a function to replace the param tag's value attr, but again, this works in all browsers, except for IE.


function SetProperty( strProperty, strValue )
{
	var strVars = $('#fileuploadUploader param[name="flashvars"]').val();
	var arrVars = $.urlToArray(strVars); arrVars[ strProperty ] = strValue;
	$('#fileuploadUploader param[name="flashvars"]').val(decodeURIComponent($.param(arrVars).replace(/\+/g, '%20')));
}

Will there ever be a fix for this problem? I've developed a custom ajax file browser, and wish to update the 'folder' param by function, which I assumed could have used 'uploadifySettings()', but apparently not.

Is any one ever going to resolve this issue?!

RonnieSan

What is the exact issue you're having, Paradox? There is an onSWFReady event that is called when the flash is loaded. Also, using uploadifySettings('name',value) works and has been tested. If you're trying to update it before an auto load, do it during the onSelectOnce event. Please update to the latest, v2.1.4 if you haven't yet.

Paradox

I have developed a file browser, using ajax to retrieve and display directories. Each time a directory is changed, I wish to update the folder value in the param... essentially updating the upload path when directories are changed.

I have updated to v2.1.4, however am still receiving the error in all browsers when using the uploadifySettings method. This is the first time I'm using uploadify so am uncertain of whether or not I am going about this correctly or not.

Here's a very short break down of my code...

The $.uploadify() method is called within a $(document).ready() method when the page loads
I have a set of links, which I've set a $.click() method on. When I click on these links I want to update the folder parameter and in this function I've tried the following (example: SetProperty('folder', '/documents/foo/bar/'))


function SetProperty( strProperty, strValue, strAnchor )
{
	$('#fileupload').uploadifySettings(strProperty, strValue);
}

The SetProperty() function is being called after the document ready/load. For example, when the link is clicked, the example is called (SetProperty('folder', '/documents/foo/bar/')). As I explained in my initial post, I worked around this by attempting to directly modify the param tag's value, which works perfectly fine in all browsers. However, when it comes to IE, the value does seem to be changed, but when the actual uploading is performed, it seems to use the original folder value.

The 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,...ileUploadQueue(false)})}})})(jQuery)};

I've been at this for the past couple of days and I don't know how else to resolve the problem. Please, if theres anything I'm doing wrong, could you shed some light...

Thanks!

RonnieSan

I think there might be an issue if you use a trailing slash in your folder param. Try removing it and clearing your cache, then trying again.

Paradox

Heya,

I don't believe there are any trailing slashes in my code, only which was used in my example in the previous post. Any way, I have updated the function to remove any trailing slashes, but still seem to be receiving the error...


function SetProperty( strProperty, strValue )
{
	if ( strProperty == 'folder' && strValue.substr(strValue.length - 1, 1) == '/' ) strValue = strValue.substr(0, strValue.length - 1);
	$('#fileupload').uploadifySettings(strProperty, strValue);
}

Paradox

I have discovered the problem, but unfortunately have been met with another one. It seems that the uploadifySettings() method was being called before the flash had initialized - I took a closer look, and called the function within the onSWFReady event and it works.

However, this also seems to be another common problem from previous googling. The flash file is within an hidden parent and this seems to break it in the same manner. I'm not entirely sure whether or not this is an actual bug and whether or not it should be reported as one.

My resolution to this problem was to hide the parent from within the onSWFReady event. Essentially only hiding the parent once the flash has initialized and successfully loaded. Hope this helps for any others which may be having this issue.

Thanks for all the help, it turned out I was looking past RonnieSan's initial reply to my first post.

Example of updated code:


onSWFReady: function() {
	$('#view-upload').hide(); // Parent container (#fileupload is within the child nodes)
	SetProperty('folder', 'foo');
}

TravisN.

When you get an error like

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

On the surface it appears there is something wrong with uploadify, however the problem actually lies within your code. There is something in the javascript that is causing the js libraries to stop loading correctly. The error also does not necessarily lie within the uploadify code you have added, but it can lie anywhere in your code and it can be a simple grammatical error.

As you are using dynamic code you need to look over the "compiled/generated" code, as well as the source.

It's a frustrating and common error, which always looks like we as the development team fob it off to you the web site developer. Unfortunately the simple fact is over the past year every site I have looked over, where people like yourself are encountering this problem, it has always turned out to be a something incorrectly spelt, not loading the js libraries in the correct order (or at all), or even a simple comma placed incorrectly. I have never found it to be an actual uploadify bug/issue/problem.

TravisN.

Regarding the issue of setting a div that contains uploadify to display:none and as a result loosing all the info that uploadify previously had. The issue is flash re-initialises any of its plugins each time it is displayed. Sure we can write code to store and re-establish the settings, but it will not re-establish any queue items. The queue items contain a fileRef within flash which can not be stored and re-established.

The best way is not hide the div but set the height to 0. This will bypass the re-initialising that flash does and still give the appearance of the div being hidden.

shigella

I think 100% it is a bug too..display:none story mentioned above

Howdy, Stranger!

Categories