JSFiddle - React, Tailwind, and code Playground

HTML

<header class="ui">
    [place holder for an orbital sign page heading]
</header>
<form id="processingform">
<section class="ui" id="sctn_upload">
    <div class="form-item">
        <table>
            <tr>
                <td id="td_initialselectionmsg">
                    Select an image to upload:
                </td>
                <td id="td_selectedimagemsg" class="hidden">
                    Current file:
                </td>
                <td id="td_imageupload">
                    <input id="imageupload" type="file" size="60"/>
                </td>
                <td id="td_filename" class="hidden">
                </td>
                <td id="td_changeimage" class="hidden"><button id="btn_changeimage" name="changeimage">Change file</button></td>
            </tr>
        </table>
        
    </div>
    <br/><br/>
    
</section>

<section class="ui" id="sctn_controls">
    controls div
</section>

<section class="ui" id="sctn_dimensions">
    dimensions-div
</section>
</form>

<section class="ui" id="sctn_preview">
    preview-div
</section>

CSS

.hidden { display:none; }
header.ui, section.ui { 
    background:#BBB; 
    margin:1px; 
    border-radius:3px;
    padding:4px;
}
header.ui {   
    text-align: "centre";
}
div.form-item { float:left; }

JavaScript

function hideNode( id ) {
    if ( ! $('#'+id).hasClass('hidden') )
        $('#'+id).addClass('hidden');
}
function showNode( id ) {
    if ( $('#'+id).hasClass('hidden') )
        $('#'+id).removeClass('hidden');
}

var filename = null;
$('#imageupload').on( 'change', displayFilename );
function displayFilename() {
    
    // get and assign filename 
	filename = $('#imageupload')[0].files[0].name.substring(
  			$('#imageupload')[0].files[0].name.indexOf(' ') 
	);
    $('#td_filename').html(filename);
    
    // update node visibility
    hideNode('td_initialselectionmsg');
    hideNode('td_imageupload');
    showNode('td_selectedimagemsg');
    showNode('td_filename');
    showNode('td_changeimage');
}
$('#btn_changeimage').on( 'click', displayFileSelector );
function displayFileSelector() {
    
    // reset filename
    filename = null;
    $('#td_filename').html('');
    
    // update node visibility
    hideNode('td_selectedimagemsg');
    hideNode('td_filename');
    hideNode('td_changeimage');
    showNode('td_initialselectionmsg');
    showNode('td_imageupload');
}