Develop Reference

(Javascript and Html) function doing another function which its not told to do

was building a form and had 2 file inputs which I intended to (once a file was uploaded) set the background of the input container to the image that was uploaded,
i used labels to hide the default button and change it to my own
this was one of the inputs and its container
<div class="input_container" id="img_A">
<input onchange="changeA(event)" class="file_input" name="fileA" type="file">
<label for="file_input">
<img src="../images/add_icon.png" id="img_add">
</label>
</div>
and the second one
<div class="input_container" id="img_B">
<input onchange="changeB(event)" class="file_input" name="fileB" type="file">
<label for="file_input">
<img src="../images/add_icon.png" id="img_add">
</label>
</div>
and the js functions
function changeA(event){
var getImagePathA = URL.createObjectURL(event.target.files[0]);
$('#img_A').css('background-image', 'url(' + getImagePathA + ')');
}
function changeB(event){
var getImagePathB = URL.createObjectURL(event.target.files[0]);
$('#img_B').css('background-image', 'url(' + getImagePathB + ')');
}
but the result is that when I use the second input it sets the background to the image uploaded but of the first box and not the one I click
when i tested this with alerts the second input seems to be running the changeA(event) and not changeB(event)
thank you in advance for any help at all!

It looks like you are using the same ../images/add_icon.png image file. So when you click the second input, it's still pointing towards ../images/add_icon.png.
you should try:
<div class="input_container" id="img_A">
<input onchange="changeA(event)" class="file_input" name="fileA" type="file">
<label for="file_input">
<img src="../images/image_file_A.png" id="img_add">
</label>
</div>
<div class="input_container" id="img_B">
<input onchange="changeB(event)" class="file_input" name="fileB" type="file">
<label for="file_input">
<img src="../images/image_file_B.png" id="img_add">
</label>
</div>

file upload drag and drop issue

I've following HTML
<div class="upload_file" id="dropArea">
<form class="box row center" method="post" action="" enctype="multipart/form-data">
<div class="box_input column center">
<p class="title">BROWSE DATA FILE</p>
<span class="icon-upload_file"></span>
<input class="box_file" type="file" name="data" id="data" />
<label for="data" class="column center">
<p class="title">CHOOSE A FILE</p>
<p class="subtitle">or drag and drop it</p>
</label>
</div>
</form>
</div>
and associated javascript
let dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', function(event){
console.log(event.type); // works
}, false)
dropArea.addEventListener('drop', function(event){
event.preventDefault(); // opens the file in the browser
event.stopPropagation();
}, true);
I'm receiving drag 'over' event for sure, but the problem is with preventDefault, if i drag and drop an image or file, it opens up in the browser. not sure what am I missing in here.
Thanks,

You just need event.preventDefault(); also in dragover function

Bind file input to a button using Vue.js

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();
}
}
}

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

How can I use the same jQuery function for multiple divs without repeating the code

I have a add/remove textfield feature wherein I want to implement a jQuery function to all the textfields in a div.
Can I use the same jQuery function for all the fields in the div or should I write different for each.
DEMO can be got here. In the demo I have made it work for one input field, how can I make it work for the rest.
HTML
<div id="single">
<div id="Ivrgroupzbase_grpzWelcomeNotes" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
<div id="p_scents" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
</div>

fiddle http://jsfiddle.net/Drea/28h0L6eb/
html
changed id "addScnt" to class - you should avoid using same id multiple times
js
$('.addScnt').on('click', function (event) {
event.preventDefault();
$(this).closest('.row').append(createInput($('#Ivrgroupzbase_grpzWelcomeNotes p').length + 1), '');
});