0

Dealing with Fine Uploader for the past 2 weeks, I see from the documentation that there is a "validation" option for the "extraButtons" option for Fine Uploader. This is great, as I can limit certain buttons to allow only certain extensions.

However, I was wondering if there is validation implemented for the "dragAndDrop.extraDropzones" option.

I don't see it in the documentation, and I tried to do a few things that I thought might work by accident, but no luck at last.

Your help is greatly appreciated.

Thanks!

Cheers, Thomas

Update

Just to let you see what I've been up to so far, here's the code I have so far: http://jsfiddle.net/beamstyle_thomas/fyp5dqwt/5/

I'm only allowing JPG files to go through for button clicks:

extraButtons: [
{
    element: $('.file-trigger')[0],
    validation: {
        allowedExtensions: ["jpg"]
    }
},

But I don't know how to limit drag and drops... this is what I have:

dragAndDrop: {
    extraDropzones: [ $('.file-trigger') ]
},

A few notes here for you to test: - Try to click on "Test 1", select a non-jpg file. It will cause a validation error because I'm only allowing "jpg" files. - Then, try to drag a non-jpg file (assume you're using Chrome) into "Test 1". It will actually go through because there is no validation currently.

Thanks!

2
  • Do you mind putting up a copy of your code? I would like to see what you're actually attempting so far... Mar 1, 2015 at 17:38
  • Hi Dylan, updated. Please kindly see. Thanks! Mar 1, 2015 at 18:21

2 Answers 2

0

After taking a quick look, the problem is from where you declare your validation.

For example:

extraButtons: [
{
    element: $('.file-trigger')[0],
    validation: {
        allowedExtensions: ["jpg"]
    }
},

says "whenever the extra button is clicked and only when the extra button is clicked, validate that the extension is ok."

Instead of defining validation for each button, define it at the base level:

$(document).ready(function () {        
        $("#fine-uploader").fineUploaderS3({   
            validation: {
                allowedExtensions: ["jpg"]
            },
            ...
        });
    });

Here is the your fiddle with it included

9
  • Hi Dylan, thanks for your message. Perhaps my message was not too clear. I was actually looking for specific validation for the drop elements. So I want to allow an extension for one drop element, and a different extension for another drop element. Would you have any ideas on how to do that? (Let me change the topic to state this more clearly) Mar 2, 2015 at 2:01
  • 2
    You can examine the qqDropTarget on the File object in your onSubmit handler and reject (return false) if the file is not valid for that particular drop zone. Mar 2, 2015 at 2:17
  • @ThomasCheng If i'm understanding it correctly, the allowedExtensions option is just an array, so you could change the array for each. For example, if you wanted one to have jpg and png, have ["jpg","png"], then the next could have just ["jpg"]. Is that what you were looking for? Mar 2, 2015 at 2:49
  • @DylanCorriveau The options are immutable, so this will not work. You'll need to use the suggestion offered in my previous comment. Mar 2, 2015 at 3:33
  • 2
    Yes, that is why I suggested using an onSubmit handler above. Mar 2, 2015 at 6:20
0

Though other suggestions were valuable, this answer from RayNicholus was the correct one. It was under a comment, so I'm posting this answer here.

You can examine the qqDropTarget on the File object in your onSubmit handler and reject (return false) if the file is not valid for that particular drop zone.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.