converting files to JSON object in addition to other fields

Question

I have the following form in my PHP file defined. I am planning to convert the form fields to JSON object so that I could pass it along to a java webservice using Ajax maybe.

Here's how I was planning to serialize it :

function submitUsingjQuery(){  
  var formdata = $('#myForm').serializeArray()
}

Since I have three files upload options, is it possible to convert uploaded files to a JSON object as well along with other form fields? If not, is there any other alternative to achieve this ?

<!-- Start of HTML Form -->
   <form id = "myForm">
   <div class="row" style="margin-bottom: 15px" name="infoRegAttachedDocuments" >
        <div class="col-md-4">
            <label for="docSubmission">First Document</label>
            <input type="file" id="firstdoc">

        </div>
        <div class="col-md-4">
            <label for="docApproval">Second Document</label>
            <input type="file" id="seconddoc">
        </div>
        <div class="col-md-4">
            <label for="additionalDocs">Third Document (if any)?</label>
            <input type="file" id="thirdocs">
        </div>
    </div>

    <div class="row" style="margin-bottom: 15px" name="infoDiv" >
        <div class="col-md-6">
            <label for="projectTitle">Title </label>
            <input type="text" class="form-control" id="projectTitle" value="<?php echo $previousProjTitle;?>" >
        </div>
        <div class="col-md-6">
            <label for="projectDesc">Description </label>
            <input type="text" class="form-control" id="projectDesc" value="<?php echo $previousProjDesc;?>">
        </div>
    </div>
    </form>
    <!-- END of HTML Form -->


    <div class="row"style="margin-top: 15px;" >
    <button  class="btn btn-primary" onclick="submitUsingjQuery()">Submit</button>
    </div>

Answer 1

It is possible to convert those files to base64 encoded strings which can be sent to the server via ajax. Than you can end up with a JSON object like so:

{
  "firstdoc": {
    "name": "<some file name>",
    "type": "image/jpg",
    "data": "base62 encoded string"
  }
}

But from the JS client and server side point of view it is much easier to use the new Form Data object and the fetch api, because it will take care of all the mime types an stuff. It can be used like so:

//create the data object directly from the form
var fd = new FormData(document.getElementById(''myform));

//send to the server without any conversion,
//everything is happening automatically
fetch('<url>', { body: fd, /*…some more options…*/ });

This way you don't have to bother yourself in finding a proper way to transmit files, since that way uses the »standard POST way« and if your server follows those standards, everything should work. Especially for files that is really helpful since this way the appropriate Content-Type header is set for each of the files to transmit.

It might be noteworthy here that this approach will create a request that is similar to the one which the browser would create if the would be submitted, the »plain html way«, without ajax. So in case JS is disabled or the browser too old, the form can still be processed on the serverside without any change on the code.