Is it possible to create a button that triggers file upload functionality? I couldn't find any solutions on Google.
I've heard it can be done with labels, but I specifically need to use a button for better UX/UI.
<button style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default">
<input type="file" id="files" visbility="hidden" />
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</button>
Currently my button looks like this: to this:
One technique is to use the label element and hide the corresponding input field.
<!-- Add Bootstrap CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Hidden input using label -->
<label for="upload">
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
<input type="file" id="upload" style="display:none">
</label>use an opacity value of 0
opacity:0;
https://jsfiddle.net/m4e0y2o3/12/
add fallbacks if you need to support older browsers
.hiddenFileInput > input{
height: 100%;
width: 100;
opacity: 0;
cursor: pointer;
}
.hiddenFileInput{
border: 1px solid #ccc;
width: 100px;
height: 100px;
display: inline-block;
overflow: hidden;
cursor: pointer;
/*for the background, optional*/
background: center center no-repeat;
background-size: 75% 75%;
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxM...
}<span class="hiddenFileInput">
<input type="file" name="theFile"/>
</span>If you happen to be using Angular, this elegant solution may come in handy:
<button class="" (click)="uploader.click()">
<input hidden type="file" #uploader />
</button>
You can easily draw comparisons with other technologies as well.
Instead of just hiding the <input> element in various ways as mentioned by other answers, it is also worth considering using opacity: 0. According to the MDN docs:
Note: opacity is used to conceal the file input instead of visibility: hidden or display: none, as assistive technology may interpret the latter two styles as meaning the file input is not interactive.
You can trigger the file input by any means like a button click or hover, and you can utilize click() on the input element (retrieved with methods like getElementById(), querySelector(), etc.)
const inputElement = document.getElementById('file-input-element')
// triggered by some other event
inputElement.click() // allows user to select files
Here is an example of how you can achieve this:
<div id="file-upload">
<label for="file-input"><i class="fas fa-file-upload"></i></label>
<input type="file" id="file-input"/>
</div>
<script>
document.getElementById("file-upload").addEventListener('click', function() {
document.getElementById("file-input").click();
});
</script>
An elegant solution is to place the input field:
In this scenario, the parent element is a button.
<button
style="padding: 0.625rem; border-radius: 9999px; background-color: #1F87CC; position: relative;"
>
<input
type="file"
style="position: absolute; bottom: 0px; top: -1px; left: 0px; right: 0px; opacity: 0;"
>
<svg viewBox="0 0 20 20" fill="#FFFFFF" aria-hidden="true" style="width: 1rem; height: 1rem;"><path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd"></path></svg>
</button>
This approach creates a seamless appearance where the circular button functions as a file input field.
This solution has been successful for me:
<label htmlFor="inputGroupFile01">
<span className="fa fa-file-image fa-lg"/>
</label>
To make the file input hidden, we can utilize style="opacity: 0":
<input type="file" id="files" style="opacity: 0"/>
Opacity versus Visibility:
opacity is preferred over visibility: hidden or display: none, as screen readers may not recognize these styles and consider the file input uninteractive.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
Your Button (featuring a folder icon only):
<button style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default">
<input type="file" id="files" style="opacity: 0"/>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
button
</button>Good luck!
A straightforward approach using a stylish input file [type="file"].
Check out the output Image URL - https://i.sstatic.net/4Jl0H.jpg
input[type="file"] {
display: inline-block;
opacity: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
padding-top: 30px;
padding-bottom: 67px;
width: 85%;
z-index: 99;
margin-top: 10px;
cursor:pointer;
}
.custom-file-upload {
position:relative;
display: inline-block;
cursor: pointer;
padding-top:40px;
padding-bottom:40px;
background:url(http://www.a-yachtcharter.com/search-fleet/webaccess/assets/img/uploadIcon.png) #fff center center no-repeat;
width:91%;
border:1px dashed #ff5b57 !important;
margin-left:20px;
margin-right:20px;
margin-top:10px;
text-align:center;
}<input type="file" multiple class="form-control">
<label for="file-upload" class="custom-file-upload"></label>Hide an input type "file" using a button with the following code snippet:
<div>
<input type="file" id="files" style="display:none"/>
<button onclick="triggerFileInput(files);">Click me</button>
</div>
<script>
function triggerFileInput(btn){
btn.click();
}
</script>
I've been trying to get my Electron app to function with the latest versions of jQuery, Popper, and Bootstrap. Unfortunately, simply referencing or "requiring" them in the <head> section of index.html (renderer process) hasn't been successf ...
Currently, I am utilizing a filter function alongside replace() and split(). Here is the code snippet: jQuery('table .abc').filter((i, el) => jQuery(el).text(jQuery(el).text().replace('a', 'b').split(' ')[0] + &ap ...
Currently, I am attempting to execute a JavaScript code that will convert all <a></a> elements found within another element <b></b> (the specific name in the HTML) into links that trigger an HTTP get request. However, the code I hav ...
For my WordPress project, I am looking to submit a form using AJAX with the GET method. I have tried two methods but they are not working for me. There seems to be an issue in my code. Method-1 Using $.get $.get( "http://**.70.120.**/web/sms.aspx", { fu ...
Currently, I am utilizing telerik radwindow to showcase a PDF document. The window seems to be functioning correctly, but there is an issue with the alignment of the maximize and close icons. Ideally, they should appear in the same row, however, they are b ...
Looking to highlight specific letters within a string variable. I have the string stored as an AngularJS variable in a table like this: <td>{{variable}}<td> In my JavaScript file, I am passing a variable for Angular that contains the string & ...
I'm struggling to populate the href section of my dropdown menu with my files. I'm attempting to dynamically load the files in the .where-you-tune class. Something must be off because I keep encountering (index):81 Uncaught TypeError: $(...). ...
I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...
I'm currently working on integrating a Bootstrap Carousel into my website, but I've encountered an issue where it moves only once and then becomes unresponsive. After checking the file order, I couldn't find any issues there. So, I'm qu ...
I would like to show text and image on the same line, with the image slightly above the text. View Demo html img.del { display: inline-block; float: right; cursor: pointer; margin-right: 74% } .astext { text-align: left; margin-le ...
Is there a way to create a new class in CSS that ignores all inherited styles without needing to use !important for each one individually? This is my HTML code: <div class="text"> <h2>Title</h2> <span>Date</span> &l ...
My challenge is aligning the elements in the middle of my page. I aim to have 3 elements per row, with n rows depending on the number of "VideoBox" components. It's crucial that these elements fit within the lettering of the P R O F E S S I O N A L ...
I have a scenario where I am layering a black div on top of a red div using absolute positioning. Subsequently, additional content is displayed. p { position: relative; z-index; 10 } .wrapper { position: relative; } #red { height: 300px; w ...
A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...
Currently, I am attempting to extract a specific string from a tag in javascript using the following code: document.querySelector('.title h2').textContent However, when I execute this code, I am getting a result that includes unnecessary double ...
@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...
Struggling with my first website creation, I encountered a challenge in centering three inline-block images using CSS. Despite successfully using the figure tag to title and display the images, I couldn't get them to align horizontally from the cente ...
<div class="yyy"></div> <p>...</p> <pre><code>let content = $(".xxx").text(); $(".yyy").html(content); http://jsfiddle.net/tQeCv/ I just require this specific input : Number is {1|2|3|4}, and {one|two|three|four} ...
I'm encountering a particular challenge with an input text that includes radio template. The issue lies in extracting the value of the radio when checked, and then storing it in a specific field within the database. My initial thought was to create a ...
I am attempting to customize Material UI's default styles in order to create a margin between each TableRow. Despite my efforts, it appears that the override is not being reflected in the user interface. ...