FineUploader is not added to DOM

[borut-t]

Hello Ray!

I've just upgraded uploader to 3.0 version with some issue. After plugin init no input element gets attached to DOM. Is this because of jQuery wrapper ?

Anyway, upload doesn't work. Here is the code:

Upload container with button:

<div id='docUploadContainer'>
    <div id='docUploadButton'>+</div>
</div>

FineUploader initializer code:

$('#docUploadContainter').fineUploader({
    button: $('#docUploadButton'),
    request: {
        endpoint: 'FileUpload.php'
    },
    text: {
        uploadButton: ''
    },
    debug: false,
    uploaderType: 'basic',
    multiple: false,
    maxConnections: 1,
    validation: {
        allowedExtensions: validExt,
        sizeLimit: 10485760
    }
}).on('error', function(event, id, filename, reason) {
    console.log("error: "+reason);
}).on('validate', function(event, fileData, isBatch) {
    console.log("validate: "+fileData+", batch: "+isBatch);
}).on('upload', function(event, id, fileName) {
    console.log("upload: "+fileName);
});

I get no error and nothing happens on docUploadButton click. Am I doing smth. wrong ?

[abennouna]

Have you tried to actually put some text in you dom élément (div)? See the
demo webpage for FUB. It doesn't use the jQuery wrapper but you get what I
mean I guess.

[rnicholus]

You need to specify a button element (via the button option) when using
fub. This requirement doesn't change when you use the jquery plugin
wrapper. Also, your params option is not valid.
On Nov 18, 2012 1:38 PM, "tellibus" notifications@github.com wrote:

Have you tried to actually put some text in you dom élément (div)? See the
demo webpage for FUB. It doesn't use the jQuery wrapper but you get what I
mean I guess.

—
Reply to this email directly or view it on GitHubhttps://github.com/valums/file-uploader/issues/472#issuecomment-10490301.

[borut-t]

Docs says different:

There is no need to specify the element option. It will be ignored if you pass it in. The plug-in will pass the element option for you, using the element you associated with the plug-in (the element with an id of fineUploaderElementId in the above example).

[rnicholus]

...and you are not using the callbacks properly. If you are going to use
the jquery plugin, you should use it as you would any other jquery plugin.
Think of the callbacks as events. Have a thorough read of the jquery
plugin section of the readme.
On Nov 18, 2012 1:45 PM, "Ray Nicholus" raygarstasio@gmail.com wrote:

You need to specify a button element (via the button option) when using
fub. This requirement doesn't change when you use the jquery plugin
wrapper. Also, your params option is not valid.
On Nov 18, 2012 1:38 PM, "tellibus" notifications@github.com wrote:

Have you tried to actually put some text in you dom élément (div)? See
the
demo webpage for FUB. It doesn't use the jQuery wrapper but you get what
I
mean I guess.

—
Reply to this email directly or view it on GitHubhttps://github.com/valums/file-uploader/issues/472#issuecomment-10490301.

[rnicholus]

I said the button option, not the element option. You must specify a
button element if you use fub.
On Nov 18, 2012 1:50 PM, "Borut Tomažin" notifications@github.com wrote:

Docs says different:

There is no need to specify the element option. It will be ignored if you
pass it in. The plug-in will pass the element option for you, using the
element you associated with the plug-in (the element with an id of
fineUploaderElementId in the above example).

—
Reply to this email directly or view it on GitHubhttps://github.com/valums/file-uploader/issues/472#issuecomment-10490464.

[borut-t]

I've updated example but still doesn't work. How can I specify button property properly?

[borut-t]

It works now. But why do I have to specify button?
button: $('#docUploadButton'),

[borut-t]

One more question. Why do I get the following error onValidate event when file extension is not on upload list?

[FineUploader] Caught exception in 'onValidate' callback - ReferenceError: errorReason is not defined

[rnicholus]

Regarding your error message, this is actually referring to your "error" event handler. You are referencing an errorReason variable that has not been defined anywhere. The error message itself is misleading. It should reference the 'onError' callback in the message. It's a benign issue, so I'll list this as a known issue and fix it in 3.1.

You have to specify a button so Fine Uploader knows where to hide the input element. FU adds a "hidden" input as the sole child of your button element. If you are using FU (as opposed to FUB), a button is created for you, but you can override this. FUB users must define a button element. The element associated with the plug-in instance should be a container element for all HTML associated with that plug-in. This is a common and accepted meaning for jQuery plug-in instance elements. So, you should change the element associated with your plug-in instance to a proper container element.

I am an avid jQuery user, and have developed the plug-in/wrapper such that it embraces all standards and conventions that jQuery users have come to appreciate. I'm not sure what your experience level is with jQuery and jQuery plug-ins. If you are not particularly experienced in this area, you probably won't benefit much from using the plug-in. Instead, working directly with the "naked" Fine Uploader library may make most sense. The jQuery plug-in intentionally does not offer any features above and beyond those offered by the "naked" library. It simply provides a way of using Fine Uploader that is likely very familiar and comfortable for those who are accustomed to using jQuery plug-ins in their apps.

Also, you should remove the trailing comma after your endpoint value. IE7 has big problems with trailing commas. If any of your users utilize IE7, the app will fail in mysterious ways due to IE7s inability to parse javascript with trailing commas.

[borut-t]

If I understand you right that I need to wrap uploadButton inside parent container? Please take a look a the updated example above if I've done it right?

[rnicholus]

You just need an element specifically to function as the select files
button. it really doesn't make sense for it to be the same element as the one
that you have tied your plugin instance to.
On Nov 19, 2012 1:07 AM, "Borut Tomažin" notifications@github.com wrote:

If I understand you right that I need to wrap uploadButton inside parent
container? Please take a look a the updated example above if I've done it
right?

—
Reply to this email directly or view it on GitHubhttps://github.com/valums/file-uploader/issues/472#issuecomment-10503022.

[borut-t]

So different element for plugin instance and for button. Ok, I understand but don't see the need for this...

[rnicholus]

Also, you can remove theisBatch parameter from your validate callback. I forgot to remove that param from the readme after i simplified the validation contribution code.

[rnicholus]

Did you read my explanation on why this is needed? Again, the element tied
to a plugin instance is a container element for the entire plugin. A
button doesn't fit this description. Assuming the element tied to the
plugin instance is also the select files button adds more confusion than
anything else. What if the plugin user doesn't want this? How would we
handle the button option if the plugin is not in basic mode? Now element tied to the plugin instance
has a different meaning depending on how the plugin is used.

I would expect those familiar with jquery plugin conventions to not be
confused by the current setup.
On Nov 19, 2012 2:55 AM, "Borut Tomažin" notifications@github.com wrote:

So different element for plugin instance and for button. Ok, I understand
but don't see the need for this...

—
Reply to this email directly or view it on GitHubhttps://github.com/valums/file-uploader/issues/472#issuecomment-10505453.

[borut-t]

I am aware of the confusion. But the button could be the same as instance by default. If you need to specify different element for button is up to you. It's just my thought.
Anyway I respect the rules and have already implemented like you said.

Thanks!

[rnicholus]

Borut, if you build a real application, your advice regarding inference of the button element when in FUB mode starts to break down. As it stands, the code you have presented above is not usable. It provides no feedback to users at all.

Let's say we continue to build upon your example above, and provide some very rudimentary feedback for users after they select a file. Let's also go with your suggestion that the plug-in instance is also the button element.

...
.on('submit', function(event, if, filename) {
   var $selectedFile = $('<div></div>');
   $selectedFile.text(filename);
   $(this).append($selectedFile);
}

Any jQuery plug-in user would want to simply append the div element containing the file info to the plug-in container. The convention is to append it to "this". In your case, "this" is, by default, a button. We certainly don't want to append this element to the button. So, now instead of using the accepted convention of appending content to "this", we have to append it to some other element not at all associated with the plug-in instance.

What I'm saying is, it is generally not a good idea to invent your own convention when one already exists.

[borut-t]

I absolutely agree with you and that's why I will use this preferred solution. Thanks for explanation and understanding...