How to put custom words inside input file element using html

Question

I got an upload file that looks something like this :

https://i.sstatic.net/ZIrC9.png

Here's the code for it :

<div class="row">                           
    <div class="col-lg-12">
        <label class="fieldlabels">Documentation:</label> 
        <input type="file" class="form-control" id="file_name"  onchange="return fileValidation()" name="file_name" value="" title="Documentation" accept="application/msword, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document" multiple="multiple" style="padding-left:40%"/>
        <table class="table table-striped table-bordered" style="width:100%;" id="add_files">
            <thead>
                <tr>
                    <th style="color:blue; text-align:center;">File Name</th>
                    <th style="color:blue; text-align:center;">Status</th>
                    <th style="color:blue; text-align:center;">File Size</th>
                    <th style="color:blue; text-align:center;">Type</th>
                    <th style="color:blue; text-align:center;">Action</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

The problem I'm facing right now is I did like to put a custom words in the file input(inside the upload box) where user get to choose either by clicking the choose files or user can choose to drag it here.How am I going to put the drag it here word in the file upload box?I've tried using placeholder and label for="" but still it's not working for me.

Answer 1

You could add a <span> tag to display the "Drag it here" text and then style it accordingly if you'd like for the drag and drop functionality.

.input-box {
  background: lightblue;
  padding: .1rem;
}

.inner {
   border: 1px dashed blue;
   width: auto;
   margin: .5rem;
}

.file-options {
  padding: 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 7rem;
}

.file-options input {
  padding-left: 4rem;
}

.file-options span {
  padding: .5rem;
}

table {
  margin: 1rem auto;
}

<div class="row">                           
    <div class="col-lg-12">
        <label class="fieldlabels">Documentation:</label> 
        <div class="input-box">
          <div class="inner">
            <div class="file-options">
            <input type="file" class="form-control" id="file_name"  onchange="return fileValidation()" name="file_name" value="" title="Documentation" accept="application/msword, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document" multiple="multiple"/>
              <span>or</span>
              <span class="drag">Drag files here</span>
            </div>
          </div>
        </div>
        <table class="table table-striped table-bordered" style="width:100%;" id="add_files">
            <thead>
                <tr>
                    <th style="color:blue; text-align:center;">File Name</th>
                    <th style="color:blue; text-align:center;">Status</th>
                    <th style="color:blue; text-align:center;">File Size</th>
                    <th style="color:blue; text-align:center;">Type</th>
                    <th style="color:blue; text-align:center;">Action</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>