Upload file in folder using ajax

Step1 :

<div>Choose Serial Number File</div>

<aui:input type="file" label="" name="serialNumbers[]" id="serialNumbers" cssClass="serialNumbers" multiple="true" accept=".csv"/>

Step 2 :

        var serialNumberfilenames='';

        var serialNumberAttachmentArray = [];

        var serialNumberCounter = 0 ;

    $("#<portlet:namespace/>serialNumbers").change(function (e) {

    serialNumberfilenames='';

    serialNumberAttachmentArray = [];

    serialNumberCounter = 0 ;

    //console.log(this.files.length);

    for (var i = 0; i < this.files.length; i++) {

    serialNumberfilenames +=   this.files[i].name + ',';

            }

    serialNumberfilenames = serialNumberfilenames.substr(0 , serialNumberfilenames.length-1);

    document.getElementById("serialNumberFilesNames").innerHTML = serialNumberfilenames;

        var files = e.target.files;

      for (var i = 0, f; f = files[i]; i++) {

        var fileReader = new FileReader();

                // Closure to capture the file information and apply validation.

                    fileReader.onload = (function (readerEvt) {

                        return function (e) {

                            //Fill the array of attachment

                            serialNumberAttachmentArray[serialNumberCounter] =

                              {

                                  FileName: readerEvt.name,

                                  MimeType: readerEvt.type,

                                  Content: e.target.result.split("base64,")[1],

                                  FileSizeInBytes: readerEvt.size,

                              };

                          serialNumberCounter = serialNumberCounter + 1;

                        };

                    })(f);

                    // Read in the image file as a data URL.

                    fileReader.readAsDataURL(f);

   

Step 3 :

<aui:button type="button" name="btnSubmitGip" id="btnSubmitGip" value="Submit" onClick="javascript:createNewGipCase()" ></aui:button>

Step 4 : 

function createNewGipCase(){

  

var productTableJsonString = JSON.stringify(serialNumberAttachmentArray);

AUI().use('aui-io-request', function(A){

            A.io.request('<%=saveRecord.toString()%>', {

                method: 'POST',

                dataType : "json",

                data: {

<portlet:namespace />productTableJsonString: productTableJsonString

}

})

})

}

STEP 5:

<portlet:resourceURL id="SAVE_RECORD" var="saveRecord"/>

var saveRecord = '<%=HtmlUtil.escapeJS(saveRecord.toString()) %>';

Step 6 :
In Serve resource get productTableJsonString 

JSONArray productTableJsonArray = JSONFactoryUtil.createJSONArray(productTableJsonString);

        for (int index = 0; index < productTableJsonArray.length(); index++) {

JSONObject editArrayObject = productTableJsonArray.getJSONObject(index);

byte[] data = Base64.decode(editArrayObject.getString("Content"));

if (data != null) {

try (OutputStream stream = new FileOutputStream(

"Pass folder Name here" + File.separator + editArrayObject.getString("FileName"))) {

stream.write(data);}else {

_log.info("Something went Wrong");

}

}