Bind file input to a button using Vue.js - javascript

I'm trying to bind a input file to a button using Vue.js
Having the following:
<input type="file hidden>
<button>Choose</button>
In JQuery would be somthing like:
$('button').click(function() {
$('input[type=file]').click();
});
So, what this is doing is binding the click event on the button to the input file, this way I have complete control on the look of the button, it can even be a anchor or a image or any element to trigger the event to the input.
My question is: How can I accomplish this using Vue.js?
Thank you!

You can do this:
HTML:
<input id="fileUpload" type="file" hidden>
<button #click="chooseFiles()">Choose</button>
Vue.js:
methods: {
chooseFiles: function() {
document.getElementById("fileUpload").click()
},
...
EDIT - Update syntax:
methods: {
chooseFiles() {
document.getElementById("fileUpload").click()
},
...

Add a ref="file" to your <input> element and later use $refs.file to access it.
<input ref="file" type="file">
<div #click="selectFile()">click to select a file</div>
methods:{
selectFile(){
let fileInputElement = this.$refs.file;
fileInputElement.click();
// Do something with chosen file
}
}
👌 Demo: https://codepen.io/Jossef/pen/QWEbNGv

Simplest way to do this is to stylize a label element like a button, HTML only.

you can use the label html tag for doing this like below
<label for="upload-file" class="css-class">
<input type="file" id="upload-file" hidden #change="choosFile"/>
</label>
in this way you didn't need the button any more and you can customize the label with css as the way you like it

In Vue:
How code below works:
Open file explorer on button (label) click;
Select a file, continue;
#onChange will detect new file:
<label>
<button/> //this can be an icon, link,...
<input #change="doSomething" type="file" ref="file" accept="image/gif,
image/jpeg, image/png" hidden/>
</label>
Handle the file
doSomething(e: any) {
const file = e.target.files[0]
}

There is a much simpler way of way doing this using Vue 3
<input type="file" id="upload-file" name="upload-file" hidden>
<label for="upload-file" refs="upload-file" class="file-btn">Choose a file</label>
Using this you can add classes and styling to the label field.

This might help someone who is using coreui <CInputFile> tag.
for <CInputFile>, this.$refs.file.click() and this.$refs.file.$el.click() both doesn't work.
Because <CInputFile> wraps <div> around <input type="file">. so $el is actually a div element here, you need to go find the <input type="file"> tag and trigger the click() event on the <input type="file"> tag like this
this.$refs.file.$el.getElementsByTagName('input')[0].click().

<input ref="refName" type="file">
<div #click="selectFile()">Select file</div>
export default: {
methods:{
selectFile(){
// refs return list of objects with name 'refName' or if only one object
const r = this.$refs.refName[0] || this.$refs.refName;
r.click();
}
}
}

Related

How to link input button display:none behavior with the label

I want to link an input display: none button to a label so that when I click on the label, it has the same behavior of my hidden input button. How can I do this?
Below is my HTML5 code:
<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" th:required="true" />
If you want the label to trigger a click event on the input type=file, then use:
$('.uploadFile').click(function() {
$("#model1").unbind('click').bind('click');
})
I've also added how to add the file name to the label:
$('#model1').change(function() {
var filename = $(this).val().split('\\').pop();
$('.uploadFile').text(filename)
})
$('.uploadFile').click(function() {
$("#model1").unbind('click').bind('click');
})
$('#model1').change(function() {
var filename = $(this).val().split('\\').pop();
$('.uploadFile').text(filename)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1"
style="display:none;" th:required="true" />
You could use javascript, and have something like:
<label for="model1" class="uploadFile" onclick="handleClick()">File...</label>
and then define a handleclick() function which will process what you need to do with the button press.
The handleclick() could be as simple as:
$('#element').click();
or
$('#element').trigger('click');

save to localStorage

i'm curious if its possible to save the text input a user types in the field to localStorage , so in this html example , i'd want to save the innner html from the div#match_player_id , that is created when you click the button
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<input value="Submit" onclick="document.querySelector('#match_player_id').innerHTML = document.querySelector('#contract_year').value" type="button">
<div id="match_player_id"></div>
I recommend you to use a javascript function instead:
<script type="text/javascript">
function updateMatchPlayerId() {
var matchPlayerId = document.querySelector('#contract_year').value;
document.querySelector('#match_player_id').innerHTML = matchPlayerId;
if (typeof Storage !== "undefined") {
localStorage.setItem("matchPlayerId", matchPlayerId);
}
}
</script>
HTML:
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<input value="Submit" onclick="updateMatchPlayerId()" type="button">
<div id="match_player_id"></div>
Firstly, you should really be using unobtrusive event handlers to hook to events instead of the outdated on* event attributes. As you've tagged jQuery in the question this can be done incredibly simply.
From there you can just use localStorage.setItem() to save the value you require, like this:
$('button').click(function(e) {
e.preventDefault();
var contractYear = $('#contract_year').val();
$('#match_player_id').html(contractYear);
localStorage.setItem(contractYear);
});
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<button type="button">Submit</button>
<div id="match_player_id"></div>
Working example

javascript add button with two input

I'm trying to write this in javascript without using jquery. It basically has two input field: author and quote, and on click should be added to the page.
I'm also trying to save it on the page in case I leave the page. The added quote disappears when i execute the method:
function radd() {
if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
$("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
document.getElementById("q").value="";
document.getElementById("a").value="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
<label for="q">Add ur Quote!</label><input id="q" name="q" />
<label for="a">The author name</label><input id="a" name="a" />
Try this
function radd()
{
if((document.getElementById("q").value!="")&& (document.getElementById("a").value!=""))
document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
document.getElementById("q").value="";
document.getElementById("a").value="";
}
function add(){
//create a new elem
var el=document.createElement("p");
//you can assign id, class , etc
el.id="yourcustomid";
el.textContent="yourcontent";
//then add to the wrapper
var wrapper=document.getElementById("mid-wrapper");
wrapper.appendChild(el);
}
This code shows you how to create a new paragraph and add it to your wrapper js...
You could also do something like this; far more easier in my opinion. Simply create both inputs, but set their attributes to hidden. And using javascript, delete the "hidden" attribute.
<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>
The JS part:
function radd(){
document.getElementById("q").removeAttribute("hidden");
document.getElementById("a").removeAttribute("hidden");
}

HTML and Javascript detect if input contains a file?

Hello I have the following code that allows the user to select a file and upload it to the server:
<form action="postphp.php" method="post" enctype="multipart/form-data">
<input id="videoage" type="file" name="video" style="margin-left:-242px;margin-top:10px;opacity:0;">
<label for="videoage" id="labelvideo">Choose Video...</label>
</form>
It works great but when the user selects a file I want the 'choose video...' text on the input to change to 'example.mp4'. Is this possible using javascript if so how can I do that? Thanks.
You can write in your script:
jQuery(function($) {
$('input[type="file"]').change(function() {
if ($(this).val()) {
var filename = $(this).val().split('\\').pop();
$(this).closest('.file-choose').find('.file-name').html(filename);
}
});
});
where file-choose and file_name are the classes added in your <form> and <label> respectively.
Please check the snippet here.

how to hide a button when there is only one input

i have created a input type file for uploading site. also i created two button , one of them is for appending the input type file and another is for removing them, but i wanna to hide the delete button when i have only one input type file, these are my codes :
JavaScript:
$(document).ready(function (e) {
$('.add').click(function (e) {
$('.addon').append('<div class="choose"><input type="file" name="userFile" /></div>');
});
$('.delete').click(function (e) {
$('.addon > .choose').last().remove();
if ($('<div class="choose"><input type="file" name="userFile" /></div>').length == 1) {
$('.delete').css('display', 'none');
} else {
$('.delete').css('display', 'block');
}
});
});
and the html
<div class="addon">
<div class="choose">
<input type="file" name="userFile" />
</div>
</div>
but it doesn't work, can you please help me?
You should give the input a class
<input type="file" name="userFile" class="file" />
and then change your if statement to
if($('.file').length == 1){....
It's hard to tell exactly what you are asking, but it seems to me like you want the check for length to be triggered by the onChange event for your input element.
Have your if condition as
$('.delete').length > 1
Thats what you seem to be asking. And the HTML seems incomplete for this question

Categories

Resources