JSFiddle - React, Tailwind, and code Playground

by mavdhana

HTML

<form id="testId">
    <input type="hidden" value="/test/test1.png" name="Image1">
    <input type="hidden" value="/test/test2.png"  name="Image2" >
           
   <input type="file" name="imageurl" value="imagefile"></input>
   <input type="hidden" value="imagefile"  name="imageurl"></input>   
    <input type="button" id="submitButton" value="Save">
</form>

JavaScript

$("#submitButton").on('click', function(e) {
  var path1 =$('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
	var path2 = '/images/'+path1;//uploaded images name(like: '/test/test3.png')
     
	e.preventDefault();
    var $form = $("#testId");
    var jsonToSave = $form.serializeArray();
    var jsonData = JSON.stringify(jsonToSave);
    var $downloadLink = $("#download");

    if ( $downloadLink.length ) {
        $downloadLink.attr({
        	'href': 'data:text/json;charset=UTF-8,' + jsonData
        });
    } else {
        $form.append(
            $("<a/>", {
                'href': 'data:text/json;charset=UTF-8,' + jsonData,
                'download': "Image.json",
                'id': 'download',
                'text': "Click here to download JSON"
            })
        );
    }
});

//current json is giving like:[{"name":"Image1","value":"/test/test1.png"},{"name":"Image2","value":"/test/test2.png"}] 

//but Required json is like: [{"name":"Image1","value":"/test/test1.png"},{"name":"Image2","value":"/test/test2.png"},{"name":"imageurl","value":"/test/test3.png"}]