Even if it sounds like a very simple task sometimes can take you a lot of times if you don't know the right way to get files from input type file using jquery. In this short tutorial I will show you the right way to get files from an input and store them in order to send them to the server. In the next tutorial I will show you how to send them though ajax in Prestashop. But this method works the same on all frameworks or CMS.

So, let's assume we have the following form in html:

<form>
     <input type="file" id="my_input">
</form>

As you can see in the above code I have no submit button because I don't need it. We will check the input for change, if a change occur we will check its value and store it in a variable using the following code:

jQuery('body').on('change', '#my_input', function(){
  var file = this.files[0],
    formData = new FormData(),
    formData.append('file', file);
});

Now, when a new file is added to my input we will know in javascript and we will store it in a variable and then we will send it to a controller in backend, and from there we will know what to do with it. This is the easies way through which you get files from input type file. Let me know if it work for you in the comments section. Check the following tutorial to see how to upload image through ajax in prestashop.