After image uploaded through dropzone, access parent div

Question

I am confuse i dont know how to access parent div. Let me summarize it!

Actually i have multiple dropzone which i initialize using class '.abc' above each dropzone there is input where i put image name for uploading. here is my code

  $('.kt_dropzone_1').dropzone({
           url: base_url + 'product/uploadPic', // Set the url for your upload script location
        paramName: "file", // The name that will be used to transfer the 

        maxFiles: 1,
        maxFilesize: 5, // MB
        addRemoveLinks: true,
        accept: function (file, done) {

            done();


        },
        success: function (file, response) {


            alert($(this).attr('data-abc')); // undefined
            alert($(this).parent().parent.html()); // undefined                

        },

    });

here is html this is in looop so consider it multiple

<input type="hidden" class="img-upload" name="old" value=""/>                       
<div class="col-md-12 pull-left">
    <div class="dropzone dropzone-default kt_dropzone_1">
        <div class="dropzone-msg dz-message needsclick">

        <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>

        <span class="dropzone-msg-desc">This is just a demo 
            dropzone. Selected files are <strong>not</strong> 
            actually uploaded.</span>
        </div>
    </div>
</div>

i try use custom attribute to pass input id dynamic still not work i dont know how to get current div object to access parent html or input or div

within the scope of the anonymous callback function `this` no longer refers to the parent - you could try binding the function to the parent in order to access `this` — Professor Abronsius, Sep 28 '19 at 06:49
not sure if this would work as I don't know what `this` refers to within the `dropzone` function call but you could try `success: function (file, response) { /* do stuff */ }.bind( this ),` — Professor Abronsius, Sep 28 '19 at 06:58

score 0 · Answer 1 · answered Sep 28 '19 at 09:57

I could suggest you small changes for this. Move input type hidden inside of

and just above the dropzone div.

Now to refer the correct dropzone please give a try to following updated code.

$('.kt_dropzone_1').dropzone({
    var this_dropzone = $(this);
    url: base_url + 'product/uploadPic', // Set the url for your upload script location
    paramName: "file", // The name that will be used to transfer the 

    maxFiles: 1,
    maxFilesize: 5, // MB
    addRemoveLinks: true,
    accept: function (file, done) {
        done();
    },
    success: function (file, response) {
        this_dropzone.closest("div").find(".img-upload").attr('data-abe', 'value to be set');
        this_dropzone.closest("div").find(".img-upload").val('you can set anyvalue here');
    },
});

This should work as you want!

No this doesnt work it show error ! { var this_dropzone = $(this); } — Arsalan Afridi, Sep 28 '19 at 10:47

After image uploaded through dropzone, access parent div

1 Answers1