Dropzone js wont trigger ajax call

Question

Привет, я сейчас работаю в Dropzone для моего API Dropbox. Мне было интересно, почему мой callzone не может вызвать мой запрос 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); 


    } 
} 

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

Answer 1

Pu ваш this.on("drop", function(event) функция внутри Init функции и вызове метода АЯКС, чтобы загрузить изображение внутри этой 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>

Answer 2

Я не знаю, как работает apache dropbox, но вот что вы можете сделать с Dropzone. Но вы должны обрабатывать файл на стороне сервера. Если у вас есть сервер (XAMPP), вы можете попробовать загрузить файл там, а затем сделать запрос к вашему 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){ 
 
     
 
    }); 
 
}