CODEWITHSUNDEEP
javascripthtmldropzone.jsdynamically-generateddropzone
Abdurrehman
Abdurrehman

Reputation: 79

Initialize Dropzone dynamically (at Run time) in Javascript

So I'm trying to make a new Dropzone on a button click, hence we can create multiple dropzones on each button click, but I'm unable to initialize the dropzone at run time. I have also followed a post here on stackoverflow but just couldn't get things right.

<script>
    $("#addGroup").on("click", function() {
        var HtmlCodeOfSection =  '<form action="static/phpFiles/test.php" class="dropzone mx-3" 
        id="my-awesome-dropzone-1"></form>';
        $(".groups-section").append(HtmlCodeOfSection);
        Dropzone.options.myAwesomeDropzone = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 5, // MB
            accept: function(file, done) {
                done();
            }
        };
    }
</script>

Any help would be highly appreciated

Upvotes: 0

Views: 797

Answers (1)

Abdurrehman
Abdurrehman

Reputation: 79

I did this programmaticaly, and things are working good now:

<script>
    $("#addGroup").on("click", function() {
        var HtmlCodeOfSection =  ' <div class="dropzone" id="myId"></div>';
        $(".groups-section").append(HtmlCodeOfSection);
        Dropzone.autoDiscover = false;
            var myDropzone = new Dropzone("div#myId", {
                url: "static/phpFiles/test.php"
        });
    }
</script>

Upvotes: 2

Related Questions