Dropzone js wont trigger an ajax call

Question

Hi I'm currently working in a Dropzone to my Dropbox API I was wondering why is my dropzone cant call my ajax request? I put my ajax request inside of my init:function and thought it will work because the function of my button work. I was wondering if there's a logical error or I just misplaced my ajax request..

 <form id="files" action="/" class="dropzone" name="files[]" ></form>
<input type = "button" id = "btnsubmit" value = "Submit"></input>

this is my js

Dropzone.options.files = {

    autoProcessQueue : false,
    dictDefaultMessage: "Drop files or click here to upload  file(s) ...",

    init : function() {


        function uploadfiles(upl) {

            var files = upl.target.files;
            var url = "https://content.dropboxapi.com/2/files/upload";

            for (var i = 0, file_name; file_name = files[i]; i++) {

                $.ajax({
                    url: url,
                    type: 'post',
                    data: file_name,
                    processData: false,
                    contentType: 'application/octet-stream',
                    headers: {
                        "Authorization": "ACCESTOKEN",
                        "Dropbox-API-Arg": '{"path": "/' + file_name.name + '","mode": "add"}'
                    },


                    success: function (data) {
                        this.on("processing", function(file) {
                            this.options.url = url;
                            alert('Success Upload');
                        });

                        console.log(data);

                    },
                    error: function (data) {
                        console.log(data);
                    }

                })

            }



            files = this;


            this.on("drop", function(event) {
                console.log(files.files);
            });
            Dropzone.autoDiscover = false;

            $('#btnsubmit').click(function(){
                files.processQueue();

            });

        }
        document.getElementById('files').addEventListener('change', uploadfiles, false);


    }
}

I Tried to put my ajax inside if my processing but I think it doesent read my ajax request

Answer 1

Pu your this.on("drop", function(event) function inside Init function and call your ajax method to upload image inside this drop function please find below snippet

Dropzone.options.MyDropzone = {
  var FormActionURL;
    init : function() {
      myDropzone = this;
        this.on("drop", function(event) {
           alert("Form Action URL:- "FormActionURL);
           //Put your ajax call here for upload image 
           console.log(myDropzone.files);
        });
    }
};

#drop_zone {
    width: 50%;
    border: 2px dashed #BBB;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    color: #BBB;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brightscreentv.net/WAYW/js/dropzone.js"></script>
<div id='drop_zone'>
    <form action="https://content.dropboxapi.com/2/files/upload" class='dropzone' id='MyDropzone'></form>
</div>

Answer 2

I don't know how the dropbox api works but here it is what you can do with Dropzone. But you have to handle the file on the server side. If you have a server (XAMPP) you could try uploading the file there and then make a request to your dropbox api.

init: function(){
    /* Called once the file has been processed. It could have failed or succeded */
    this.on("complete", function(file){
        
    });
    /* Called after the file is uploaded and sucessful */
    this.on("sucess", function(file){
        
    });
    /* Called before the file is being sent */
    this.on("sending", function(file){
        
    });
}