CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapdropzone.js
jeszy
jeszy

Reputation: 55

Getting attribute of jQuery Dropzone DIV

I have dropzone (v3.7.1) divs in each of my bootstrap tabs.

  1. How can I upload all files in all dropzones only after clicking on submit button (not using form for each dropzone)? When I set autoProcessQueue to false and try to attach listener, an error saying unable to attach an event to undefined shows up...
  2. How do I get attributes of a dropzone object e.g. rel="6" of the first dropzone? Attempts to use this.attr('rel') / $(this).attr('rel') results in 'undefined'...

HTML

<form class="my-form" method="post">
    <input type="text" name="form-input-1" id="form-input-1" />
    <input type="text" name="form-input-2" id="form-input-2" />

    <div class="tab-content">
        <div class="tab-pane active" id="ic_6">
            <h3>Overview</h3>
            <div rel="6" class="dropzone" id="my-dropzone"></div>
        </div>
        <div class="tab-pane" id="ic_1">
            <h3>Living Room</h3>
            <div rel="1" class="dropzone" id="my-dropzone"></div>
        </div>
        <div class="tab-pane" id="ic_2">
            <h3>Kitchen</h3>
            <div rel="2" class="dropzone" id="my-dropzone"></div>
        </div>
        <div class="tab-pane" id="ic_3">
            <h3>Bathroom</h3>
            <div rel="3" class="dropzone" id="my-dropzone"></div>
        </div>
        <div class="tab-pane" id="ic_4">
            <h3>Bedroom</h3>
            <div rel="4" class="dropzone" id="my-dropzone"></div>
        </div>
        <div class="tab-pane" id="ic_5">
            <h3>Outdoors</h3>
            <div rel="5" class="dropzone" id="my-dropzone"></div>
        </div>
    </div>

    <button type="submit">Submit</button>
</form>

JS

Dropzone.options.myDropzone = {
    url: "upload.php", 
    maxFilesize: 2, // MB
    addRemoveLinks: true, 
    acceptedFiles: "image/*", 
    accept: function(file, done) {
        console.log("uploaded");
        done();
    },
    init: function() {
        this.on("addedfile", function(file) {
            //== divider ==//
            var dividerElement = Dropzone.createElement("<div>&nbsp;</div>");
            file.previewElement.appendChild(dividerElement);

            //== caption input : still trying to figure capturing this ==//
            var captionInput = Dropzone.createElement("<input type='text' name='caption' maxlength='50' placeholder='Enter a caption' />");
            file.previewElement.appendChild(captionInput);
        });

        this.on("removedfile", function(file) {
            $.ajax({
                url: "delete_temp_files.php",
                type: "POST",
                data: { filename: file.name }
            });
        });
    }
}

Upvotes: 2

Views: 1731

Answers (2)

Galley
Galley

Reputation: 633

If your html code is:

<div class="dropzone" data-name="mypics"></div>

pure javascript:


new Dropzone("div.dropzone", {
            url: "<backend-url>",

            success: function (file, response) {
                // Get "data-name" attribute here
                var name = this.element.getAttribute("data-name");
            }

});

Upvotes: 0

David Andrews
David Andrews

Reputation: 11

I know this is an old post, but the solution to accessing attributes on the original element is console.log($($(this)[0].element).attr("rel"));

Upvotes: 1

Related Questions