JSFiddle - React, Tailwind, and code Playground

by mavdhana

HTML

<table border="1" style="position: absolute; top: -358px; left: 350px; width: 100px;">  <!-- three images -->
								<tr>
									<td>
										<input type="button" id="submitButton" title="Click to Save button to store data in json" value="Save State">
									</td>
									<td>
										<label>Select JSON File:</label><input type='file' id='fileinput' accept=".json" name="fileinput" value=""> 
				 <input type='button' id='btnLoad' value='Load State' ng-click="loadFile()"  title="Load JSON to display Images"> 
										<!-- <input type='button' id='btnLoad' value='Load State' title="Load JSON to display Images" ng-click="loadFile()"> -->
									</td>
								</tr>
							</table>

JavaScript

$("#submitButton").on('click', function(e) {
                 var fileDataToSave = $("#controlid").serializeArray();
                 var jsoncontent = JSON.stringify( fileDataToSave );
                 var $downloadAnchor = $("<a/>", {
                	 href: 'data:text/json;charset=UTF-8,' + jsoncontent,
                	 download: "imagesinfo.json"
                 });
                 $downloadAnchor.css({"position": "absolute", "left": "970px", "top":"258px"});
                 $downloadAnchor.text("Click here to download JSON");
                
                 $("form").append($downloadAnchor);//Use Case 6.2
                  e.preventDefault();
                  return false;
               });