Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Location
    London
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't configure a dropzone with dropzone.js

    Hi, this is my first post and I'm hoping this forum can help me with a problem I have with Dropzone.js:

    I have this HTML:

    Code:
    <div id='drop_zone'>
    <DIV class="close_button" id="removeAllImages">Remove All</DIV>
    <form action="PHP/uploads.php" class="dropzone" id='fbDropZone'></form>
    </div>
    and this Javascript in the $(document).ready(function() {}

    Code:
    window.Dropzone;
    Dropzone.autoDiscover = false;
    $('#fbDropZone').dropzone = {
        init: function() {
         fbDropZone = this;
         $("#removeAllImages").click(function(){fbDropZone.removeAllFiles();})
        },
        paramName: "file",
        maxFilesize: 5,
        maxFiles : 1,
        autoProcessQueue : false,
    };
    But the init:function() isn't being executed. The other params are also ignored as well. Have I done a daft syntax error somewhere..? I'm running Safari and Firefox.

    Thanks in advance!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,910
    Thanks
    56
    Thanked 544 Times in 541 Posts
    you almost certainly don't want the trailing comma here:
    Code:
    autoProcessQueue : false,
    but that's unlikely to be the cause. What does the error console say?

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Location
    London
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    you almost certainly don't want the trailing comma here:
    Code:
    autoProcessQueue : false,
    but that's unlikely to be the cause. What does the error console say?
    Hi, thanks for replying.

    I thought the trailing comma was advised as it enabled you to quickly add a final object, but I can't remember where I read that now...

    There's nothing in the error console. The upload works absolutely fine and the css looks good that I've downloaded from a tutorial so it just seems to be that my code is stepped over...

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,910
    Thanks
    56
    Thanked 544 Times in 541 Posts
    is there any reason why you have autodiscover set to false? It seems to work as expected without it...

    on the trailing comma issue, I think you have it backwards - smarter browsers will ignore that comma, but dumber ones will think that it means that something comes next, and then look for that thing, and not find it and then throw an error. I think IE8 was the last of the browsers to think that a trailing comma meant something (and the new specs allow it, in case that specs mean anything to you) but I think it's still good practice to avoid it, as it serves no real purpose anyway.
    Last edited by xelawho; 03-04-2014 at 06:49 PM.

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Location
    London
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    is there any reason why you have autodiscover set to false? It seems to work as expected without it...

    on the trailing comma issue, I think you have it backwards - smarter browsers will ignore that comma, but dumber ones will think that it means that something comes next, and then look for that thing, and not find it and then throw an error. I think IE8 was the last of the browsers to think that a trailing comma meant something (and the new specs allow it, in case that specs mean anything to you) but I think it's still good practice to avoid it, as it serves no real purpose anyway.
    Hi,

    Thanks for the info on trailing comma's.

    I read on Stackoverflow that someone recommended setting it to false when configuring a dropzone. Setting it to true or omitting it doesn't make any difference for me. If it's working for you then maybe it's a server issue for me...?

    I thought Dropzone was pretty lightweight so I'd be surprised if this was the case...

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    I haven't used Dropzone but isn't this how you initialize it?

    Code:
    $('#fbDropZone').dropzone({
        init: function() {
         fbDropZone = this;
         $("#removeAllImages").click(function(){fbDropZone.removeAllFiles();})
        },
        paramName: "file",
        maxFilesize: 5,
        maxFiles : 1,
        autoProcessQueue : false
    });
    You were doing it as $('#fbDropZone').dropzone = { .... }

  • #7
    New to the CF scene
    Join Date
    Mar 2014
    Location
    London
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    I haven't used Dropzone but isn't this how you initialize it?

    Code:
    $('#fbDropZone').dropzone({
        init: function() {
         fbDropZone = this;
         $("#removeAllImages").click(function(){fbDropZone.removeAllFiles();})
        },
        paramName: "file",
        maxFilesize: 5,
        maxFiles : 1,
        autoProcessQueue : false
    });
    You were doing it as $('#fbDropZone').dropzone = { .... }
    Hi,

    Thanks for the suggestion, unfortunately it doesn't work either. I tried your code but it throws up the error "Dropzone already attached".

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Then based on the error message, you already initialized dropzone somewhere else.

    Why not post here or in jsfiddle.net a simple page that demonstrate the error?

  • #9
    New to the CF scene
    Join Date
    Mar 2014
    Location
    London
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Then based on the error message, you already initialized dropzone somewhere else.

    Why not post here or in jsfiddle.net a simple page that demonstrate the error?
    Good idea: jsFiddle.

    Although autoProcessQueue is set to false and the 'X' in the <div> should remove all files it doesn't.

  • #10
    New to the CF scene
    Join Date
    Mar 2014
    Location
    London
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Apologies! Wrong link to jsFiddle. This should be correct.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    I have updated your jsfiddle. It seems to work now.

    Edit fiddle - JSFiddle

    Take note of the Frameworks & Extensions settings I added in jsfiddle.

  • Users who have thanked glenngv for this post:

    Souze (03-07-2014)

  • #12
    New to the CF scene
    Join Date
    Mar 2014
    Location
    London
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    I have updated your jsfiddle. It seems to work now.

    Edit fiddle - JSFiddle

    Take note of the Frameworks & Extensions settings I added in jsfiddle.
    Thanks for that! I've moved the script for initialising dropzone into an 'inline' position (if that's the proper nomenclature), i.e. it's run in the script but outside of any .ready or .load functions.

    Really appreciate your help.


  •  

    LinkBacks (?)

    1. 03-05-2014, 10:31 AM

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •