Select and upload multiple files to the server in ColdFusion using jQuery without refreshing the page.

In web application, we frequently need to attach/upload files or photos to the server as per the requirement. It's a common thing now to send or receive pictures or files from different users. There are different ways to do this in different languages  but it's a bit easy task if we consider to do it with ColdFusion.

We have some predefined tags to do it. If we want to upload some file to the server, The code snippet is like:

'<cffile action="upload" path="D:\upload\#getToUserID.peopleID#" filefield="#key#">'


We just need to put the code in a <form></form> tag. The data will be uploaded to the server once we submit the form.


Now if we want to upload a file/pic in ColdFusion, but we don't want to submit the page, because the page will be refreshed and load again if the form is submitted.

So we can upload a file to the server with out refreshing or submitting a page with the help of jQuery.

for that we need two jQuery frame works. We also need to include the parent jQuery frame over here.
a) jquery-ui.js
b) jquery.MultiFile.js
c) malsup.github.com/jquery.form.js.


The jQuery multiple file selection plugin helps users to select multiple files easily for upload. It has some basic restrictions and validation so that easily we can check whether two same files are selected or not.

Below is the HTML code:

<form action="abc.cfc?method=attahFile method="post" id=myForm>
<input id="Avatar" type="file" name="Avatar"/>         
<input type="submit" value="Send Message" class="btn btn-primary btn-sm" id="replyMessage">   
</form>

So above is the HTML code to select the file we want to upload. First we need to include the multiple file upload framework to the template so that it will allow to select multiple files to select one by one.

Below is the snippet to include the multiple file select frame work.

<script src="js/jquery.MultiFile.js"></script>

<script>
$('#avatar').MultiFile({
         STRING: { remove:'Remove',
         selected:'Selected: $file',
         denied:'Invalid file $ext!',       
         }
    });
</scrpit>
So this code will help to add multiple files to upload into the server.

Now we need to add the code to submit the form using jQuery so that the form will be submitted , but it will not get refreshed and not get loaded again.

For that we need to add another jQuery framework called jquery.form.js.
the source code is:

<script src="http://malsup.github.com/jquery.form.js"></script>

Above Plugin allow us to easily update HTML forms to use AJAX. The two methods, ajaxForm and ajaxSubmit, gather required information from the form field to determine how to manage the submit process. The two methods support all of the options which allows the control over the data is being submitted.

The JS code will be:

$('#myForm').ajaxForm({
        beforeSubmit: function() {
                            },
        success: function(data){
            alert("Thank you");
        }
    });

 Note: One thing we need to do along with this,we need to differentiate the multifiles by their id(s) so that while uploading the different files, we can easily handle them.

 Below code will work as per our requirement:

 $('body').on('change','input.MultiFile-applied',
      function(e){console.log(this);
          $(this).attr('name',$(this).attr('id'));
      }
    )