1

I have a file upload control as shown below,

enter image description here

Code:

<div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
                        <div class="col-md-1">
                            <a href="#" class="btn btn-danger btn-xs download-template" title="Get Template"><span class="glyphicon glyphicon-download-alt"></span>&nbspGet Template</a>
                        </div>
                        <div class="col-md-3">
                            <select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
                        </div>
                        <div class="col-md-3">
                            <input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>

Expectation:

I want to show the 'No file chosen' message in the center as shown in the image. The reason is, to reduce the empty space between the 'Validate' button and the 'Choose file' button.

Options Tried:

I tried to modify this via css property and jquery but could not locate the text in UI.

Any help is appreciated.

JGV
  • 5,037
  • 9
  • 50
  • 94

1 Answers1

1

Sorry, there is no simple way to do it. The only way to do it is to hide that input, put an image where that input is and some text with margin-left. With javascript you can easily position it and make sure that the click works cross-browser.

Claudiu Creanga
  • 8,031
  • 10
  • 71
  • 110