JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="agGear-importer-panel" data-panel="3" style="display: block;">
						<div class="importer-col-left">
							<h4>Ready to import your CSV?</h4>
							<p>The importer will validate your file before importing rows and will not process any part of the file unless it is 100% valid. You will receive a single error if the file schema does not validate. Any mis-matched column values that do not match a name in the system will throw an error for each instance with an explaination of how to fix the issue.</p>
						</div>
						<form action="https://agrisphere-training.com/clientPortal/ajax/compliance-management/import.csv.documents.php" enctype="multipart/form-data" method="post" target="outputWindow" onsubmit="$('#outputWindow').addClass('show');" class="file-upload-holder">
							<input type="file" name="file" id="equipment-importer-file" accept=".csv">
							<button>Upload .csv</button>
						</form>
						<iframe name="outputWindow" id="outputWindow" width="600" height="400" onload="$('#equipment-importer-file').val('');"></iframe>
						<div style="clear:both;"></div>
					</div>