Dropzone JS не будет вызывать AJAX-вызов

Привет, я сейчас работаю в Dropzone с моим API Dropbox. Мне было интересно, почему моя Dropzone не может вызвать мой запрос ajax? Я положил свой запрос AJAX внутри моего init:function и думал, что это будет работать, потому что функция моей кнопки работает. Мне было интересно, есть ли логическая ошибка, или я просто потерял свой запрос ajax..

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

это мой 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);


    }
}

Я пытался поместить свой Ajax внутрь, если моя обработка, но я думаю, что это не так, прочитайте мой запрос AJAX

Источник

2 ответа

Решение

Пу твой this.on("drop", function(event) функция внутри Init функция и вызовите ваш метод AJAX для загрузки изображения в этом drop функция, пожалуйста, найдите ниже фрагмент

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>

Источник

Я не знаю, как работает Dropbox API, но вот что вы можете сделать с Dropzone. Но вы должны обрабатывать файл на стороне сервера. Если у вас есть сервер (XAMPP), вы можете попробовать загрузить файл туда, а затем сделать запрос к вашему API Dropbox.

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){
        
    });
}

Источник
Другие вопросы по тегам