File input JS onchange, onclick not firing - javascript

I am trying to populate an input, of type text, with the the file name that has been selected. From what I have read sometimes you have to set the value to "" or null onClick then onchange set the place holder.
I have tried many different variations, but it just doesn't seem to fire. What am I overlooking?
My very basic example....
<script type="text/javascript">
getElementById("upFile").onClick = function(){
this.value = "";
}
getElementById("upFile").onchange = function(){
getElementById("uploadName").value = this.value;
}
</script>
<input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
<input type="file" id="upFile" name="upFile" enctype="multipart/form-data"><br>
What I have read
Changing the placeholder text based on the users choice
Change placeholder text
Upload files using input type="file" field with .change() event not always firing in IE and Chrome
HTML input file selection event not firing upon selecting the same file
None of which seem to be my issue...

Here you go. You can get rid of the onclick event listener, and watch for changes instead. The file upload element creates an array of files and you can access it like so:
<input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
<input type="file" id="upFile" name="upFile" enctype="multipart/form-data">
<script>
document.getElementById("upFile").onchange = function(){
// single file selection, get the first file in the array
document.getElementById("uploadName").value = this.files[0].name;
}
</script>
FYI:
This is what happens if the script tag is before the element. It runs the script once read and says it can't find the element referenced with document.getElementById("upFile")
Uncaught TypeError: Cannot set property 'onchange' of null
at :2:48

You are missing document.getElementById and onClick should be onclick

Related

Set value attribute in HTML

I am trying to set value attribute in HTML when it gets changed.
I need this because I export HTML code for importing it later.
I tried the following code:
<input onchange="this.value = value" />
And would like to have the following code so value gets auto-filled after import:
<input onchange="this.value = value" value="some-value" />
There is lots of lines like above but whatever I tried value just doesn't get set.
If you want the attribute to update, you got to set the attribute.
<input onchange="this.setAttribute('value', value)" />
Alternatively, you can add this JavaScript code and omit the onchange HTML attribute:
document.addEventListener("input", e => e.target.setAttribute('value', e.target.value));
<input>
Notes:
the input event triggers with every change, not just when the value is "entered".
this works for all input elements on the page, including textarea and select elements.

Displaying images from file inputs in Javascript

I need to run a function when someone has finished selecting a file using the file input service. By "file input service", I mean:
<input type="file" name = "foo" id="foo">
I have tried to do this in various ways, first by creating a form to do so and using other techniques, but nothing seems to work. There are several ways to detect if the thing has something, like by using:
document.getElementById("foo").files[0]
This only returns a value if you run it, but I cannot constantly compile a while statement to do this.
Pure Javascript
You can use pure javascript like below. This code basically uses document.getElementById() to get the input element, and .addEventListener() and change to do something when the input field is changed.
document.getElementById("foo").addEventListener("change", function() {
console.log("Changed");
});
<input type="file" name="foo" id="foo">
jQuery
Use jQuery .change(). Basically, this code will console.log "Changed" when the input changes (you add a file).
$("#foo").change(function() {
console.log("Changed");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="foo" id="foo">

Error when using v-model on file input

I have a file input and I need to clear it after file is uploaded. I tried setting null value to v-model, but it generated the following error
File inputs are read only. Use a v-on:change listener instead.
My code is
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
How can I clear the file input in vue.js after upload so that I can upload the same file multiple times continuously
Solved it using the ref attribute,
this.$refs.fileInput.value = null;
You are using v-on:change="uploadFile" and guessing that your uploadFile has a success callback.
You can do the following:
Wrap your input in a form and add a ref attribute to your form:
<form ref="myFileInputForm">
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
</form>
In your successful callback uploadFile do this:
this.$refs.myFileInputForm.reset();
File inputs are read only.
don't bind on element, remove v-model="file"

How to copy a value from one form's file upload field to another form's text field?

I have one page with two different forms on it. The first form allows a user to upload and email an image file, the second form generates a URL based on the user input.
In order to add the image name to the URL, I need to have a field in the second form that copies the image name from the field in the first form (I'd rather not have to make the user browse for and select the image twice on one page). The best way I've found to copy data from one field to another across forms is this jQuery code: http://jsfiddle.net/nA37d/, but it doesn't work for my purposes. For example it works from text field to text field beautifully, but it doesn't work from file field to text field, or file field to file field.
Is there a way to grab the value of the file field in form 1 and copy it to any kind of field in form 2? Here is my basic code:
<script type="text/javascript">
$(function(){
bindGroups();
});
var bindGroups = function() {
// First copy values
$("input[name='logotoo']").val($("input[name='logoname']").val());
// Then bind fields
$("input[name='logoname']").keyup(function() {
$("input[name='logotoo']").val($(this).val());
});
};
</script>
<form action="#..." method="post" enctype="multipart/form-data">
<input type="file" name="logoname" value="1" />
<input type="submit" value="Upload" /></form>
<form name="form2" action="/url/" method="get">
<label>Logo Name</label> <input type="text" name="logotoo" />
<input type="submit" value="Generate URL" /></form>
Thanks for any help you can give!
Just use change() handler for input type file, not keyup:
http://jsfiddle.net/nA37d/169/
$("input[name='a1']").change(function() {
$("input[name='b1']").val($(this).val());
});
For input file to input file, i dont think its possible for security reason.
BTW, this code should be refactorized.

How to select the content inside a textbox when loading the page?

I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!
3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.
You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.
you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.

Categories