I need a file upload input similar to the one showcased in this example
<input type="file" id="dp_file_input" name="demo" />
The current file input design is not visually appealing, so I am looking for a solution like the one demonstrated in the provided link.
Even after directly copying the code, the file input element does not display anything. The issue seems to be related to the proper rendering of the file input field.
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
/*when a value is selected, this class removes the content */
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
.custom-file {
overflow: hidden;
}
.custom-file-control {
white-space: nowrap;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<br>
<div class="container">
Unfortunately, this code snippet is not functioning as expected.
<label class="custom-file" id="customFile">
<input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
<span class="custom-file-control form-control-file"></span>
</label>
<input type="file" id="dp_file_input" name="demo" />
</div>