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>

philipp · Answer 1 · 2018-03-06T19:42:31.197

0

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.

edited Mar 06 '18 at 19:42

answered Mar 06 '18 at 19:00

philipp

15,947
15
61
106

Thanks. Instead of image, my files are going to be word documents, PDF documents etc. Is there a possibility of data loss after converting the files to base 64 encoded strings? – Dan Mar 06 '18 at 19:08
That doesn't matter. Give it a shot ;) – philipp Mar 06 '18 at 19:09
Base64 conversion wont lead to data loss, but the size while the transmit will grow by up to 20% (afik or remember)… – philipp Mar 07 '18 at 06:48
I see. Could that be a problem considering I have three sections to upload the documents and I am not sure what size of document is going to get uploaded? – Dan Mar 07 '18 at 14:36
All different file types will be handled with FormData. On Submit all given values are transferred to the server. You can limit the filesize on the client but your server should finally validate all upload since one must not use the form to send a post request to the server. – philipp Mar 07 '18 at 15:16

converting files to JSON object in addition to other fields

1 Answers1