Ajax Image Upload To Database

I'm unable to upload the image by ajax,it always redirect to the page whenever I click submit button and the data is not added to the database as well. form

).on('submit', function(ev){ ev.preventDefault(); var forms = document.querySelector('form#imageUploadForm'); var request = new XMLHttpRequest(); var formDatas = new FormData(forms); request.open('post','yourControllerFunction'); request.send(formDatas); request.onreadystatechange = function() { if (request.readyState === 4) { if (request.status === 200) { //Request was OK show success message } else { // Request not OK, show error message } } });

In your controller's action (its a cakephp code)

if($this->request->is('post')){
   $data = $this->request->data;
   echo "<pre>",print_r($data),"</pre>";
   //You should be able to see file data in this array
}

You can handle it just like a direct form submission on your controller

Solution 2:

ImageUploadForm != imageUploadForm

Fix that typo causing the dead code (the form tag) to run and things should work as you expect. Your browser, development tools, network tab should have shown a POST instead of a XHR because of that issue.