I am working on a project where I need to create a link that acts as a file input when clicked.
Here is the code for the link:
<a id="upload-file">Upload your photo</a>
Is there a way to make this link function as a browse file input? Any suggestions or solutions would be appreciated.
Web Development
<input id="photo-upload" type="file"/>
<a href="" id="upload-photo-link">Click here to upload a photo</a>
CSS Styling
#photo-upload{
display:none
}
JavaScript Functionality
$(function(){
$("#upload-photo-link").on('click', function(e){
e.preventDefault();
$("#photo-upload:hidden").trigger('click');
});
});
Pure HTML Approach
Below is a straightforward solution that requires no CSS, JavaScript/jQuery, or any framework.
<label>
<input type="file" style="display: none;">
<a>Upload Photo link</a>
</label>
Alternatively, you can use an even simpler version:
<label>
<input type="file" style="display: none;">
Upload Photo link
</label>
the following steps will help resolve the issue
example in HTML:
<input id="upload-file" type="file"/>
<a id="fileupload">Click to upload your image</a>
CSS code snippet:
#upload-file{
display: none;
}
JavaScript solution:
$("#fileupload").click(function(){
$("#upload-file").click();
});
Here is a link to view the demo: http://jsfiddle.net/WXBKj/
If you want to achieve this without using Javascript, you can use a cross-browser solution utilizing the for attribute:
HTML Code:
<label for="inputUpload" class="custom-file-upload">Click here to upload your file</label>
<input id="inputUpload" type="file" />
CSS Styling:
#inputUpload {
display: none;
}
.custom-file-upload {
cursor: pointer;
font-size: inherit;
color: #0c090d;
}
.custom-file-upload:hover {
text-decoration: underline;
}
One method is to create a concealed <input> element which can be triggered using $('#upload').click() to mimic a click.
Another option is to have a hidden <input> element with an assigned id, then simply add a label attribute to your link.
To achieve this functionality in Angular 6, you can use the following code:
<li class="list-group-item active cursor-pointer" (click)="file.click()">
<i class="fas fa-cloud-upload-alt"></i> Upload <input type="file" #file hidden />
</li>
By clicking on the li HTML tag, the click event of the input button is triggered. The "hidden" attribute hides the element.
UPDATED:
Check out this Demo: http://jsfiddle.net/rathoreahsan/s6Mjt/
JQUERY CODE:
$("#upload").click(function(){
$("#upload-file").trigger('click');
});
HTML MARKUP
<a href="javascript:void(0)" id="upload">Click here to upload a photo</a>
<input id="upload-file" type="file"/>
CSS STYLING
#upload-file {
display:none;
}
ALTERNATIVELY
You can also use useful plugins like this:
<tr style="height:5px" id="TRRSHeaderTrialBar" name="TRRSHeaderTrialBar" style='display:none'> <tr id="TREmail" name="TREmail" style="height:1px;" nowrap style='display:none'> Using the code snippet above to hide the bar w ...
I've got an array of JSON data structured like this: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Eve' } ] My goal is to locate an object by its id and append a ...
My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...
In this scenario, I have a stream of numbers being emitted every second. My goal is to group these numbers into arrays for a duration of 4 seconds, except when the number emitted is divisible by 5, in which case I want it to be emitted immediately without ...
I am currently utilizing node, express, mongoose for the backend and angular js for the front-end. I have a form through which I am sending a post request. <div class="alert alert-success" ng-show="success"> {{success}} </div> <div class ...
Here is the code from my popup.htlm file: HTML <body> <select style="width: 100%;" multiple id="HLSlist"> </select> <span style="display:inline"> <button type="button" id="Deletebut">Delete</button> ...
Seeking a Nicer alternative. I am exploring if there is a way to format code like this without moving the first attribute to a new line: <div class="test-class" [test-binding]="true" (test-binging)="test()" ...
I am currently working on creating an action floating button using the Ionic framework. While I have successfully created a basic button, I am now looking to add some stylish effects and make additional buttons appear upon interaction. I understand that th ...
I am working on a client-side form where I use XMLHTTPResponse to save response data as a file. In order to achieve this, the response type is set to arraybuffer using the following code: xhr.responseType = "arraybuffer"; While researching various method ...
When fetching data from a database using Sequelize ORM, I need to set a default value. Here is an example of the SQL query: SELECT a.affiliate_id, a.active AS current_state, IF(MAX(cn.contract_id) IS NULL ,0, IF(DATEDIFF(NOW(),MAX(cn.contract_date) ...
I am currently working on my first project using Less and have been following a tutorial closely. However, when I try to compile with lessc, I encounter the following error: ParseError: Unrecognised input. Possibly missing something in C:\Path\t ...
Hi there, I'm facing an issue that should be easy for you guys to help me with. I recently discovered a security flaw while using the maxlength function in HTML. Users can easily modify the maxlength attribute by inspecting elements on the website, wh ...
This is the complete code for my chatbot application const express = require('express'); const app = express(); const MongoClient = require('mongodb').MongoClient; const assert = require('assert'); const bodyParser = require(& ...
Currently, I am developing Selenium tests for a dynamic web page. Within this section of code, I am extracting data from an Excel sheet and verifying if a specific element exists on the webpage. I have annotated the critical part of the code with comments ...
Implementing the water.css on my website, I have this JavaScript code: function setTheme(themeName) { localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } // function to toggle between light and dark ...
Hey there, I'm currently facing a challenge with centering an image within my dropdown bar. My goal is to have it float to the right and be centered, but it's not cooperating. Here's the code snippet I'm working with: <!DOCTYPE htm ...
I'm not very familiar with Bootstrap and I came across this code online that involves javascript in html, which I don't fully understand. I want to make the hamburger menu close automatically after selecting an item in the navigation bar, especia ...
For anyone familiar with utilizing jQuery in .NET web applications, encountering challenges where changes made on the client side do not persist to the web server during a postback is a common issue due to factors such as viewstate and security. The situa ...
I am struggling to understand why my HTML5 website appears differently in each browser. It seems like a CSS issue, but I can't pinpoint the exact problem. Here are screenshots of how the site looks on different browsers: Chrome: Safari: Internet E ...
After the form is rendered, I need to identify which fields are not valid after 5 seconds. Currently, I have a button that is set as ng-disabled="!step1Form.$valid". However, I would like to add a CSS class, possibly in red, to highlight the invalid fields ...