We Keep Coding

File input JS onchange, onclick not firing

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

With NG-File-Upload what is a angular way of clearning the input type="file" after a successful upload

Using the library here https://github.com/danialfarid/ng-file-upload. What is a angular way or clearing the input file from the element after a successful upload? (so it goes back to saying "No file selected")
<input ng-file-select ng-model="vm.files" name="filename" accept="*" type="file" ng-file-change="vm.checkFileSize($files)" />

If you reset the model vm.files to the initial value - the empty array, the view will also reset to it's initial state.

How to automatically start upload after browse?

is there a way to automatically call a function using an event after the user has browsed a file using a
<input type="file">
I've been trying to find something for the past hour but failed horribly, I saw that I should try onchange but that also failed..

There is a way:
<input type="file" onchange="myFunction()">
The onchange is simple. So, I'm guessing that the code that is getting triggered is failing. You need to be able to retrieve the file from the INPUT object. To pass the file as an argument on the function call, you can use something like this:
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.parentNode)" >
</form>
If you do it that way, the arg passed with be an object from the FORM, then you need to get the object of the INPUT that is inside of the FORM object.
If you want to avoid that, you can use something like this:
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
That passes the first file from the INPUT object to the picUpload function.

Upload files from multi input fields

I used to use this method to upload a file without refresh the page:
AJAX file upload tutorial
and it works fine, but now I need to upload multi files through multi input fields, something like that:
Personal Photo: <input name="myfile1" type="file" />
Certificate1 Image: <input name="myfile2" type="file" />
Certificate2 Image: <input name="myfile3" type="file" />
so how can I do that without re-write startUpload, and stopUpload function with a new title "like startUpload2, and stopUpload2 for 'myfile2' input, and another for myfile3... etc"?

The enctype="multipart/form-data" on your form will allow for multiple file uploads. For those functions you refer to, you will either have to loop through the inputs and apply the functions to each input or apply a slightly different function to the form itself.

how to fire event on file select

I've a form as
<form onSubmit="return disableForm(this);" action="upload.php" method="post" name="f" id="wizecho" enctype="multipart/form-data">
<input type="file" name="file" />
<button onClick="return disableForm(this),ajaxUpload(this.form,'wizecho_upload.php', '<br>Uploading image please wait.....<br>'); return false;">
Upload Image
</button>
</form>
It is to upload an image.
Here I need to click on the button to upload the image and I've to use onClick event. I want to remove the upload button and as soon as the file is selected at the input, I want to fire the event. How do I do that??

Use the change event on the file input.
$("#file").change(function(){
//submit the form here
});

You could subscribe for the onchange event on the input field:
<input type="file" id="file" name="file" />
and then:
document.getElementById('file').onchange = function() {
// fire the upload here
};

This is an older question that needs a newer answer that will address #Christopher Thomas's concern above in the accept answer's comments. If you don't navigate away from the page and then select the file a second time, you need to clear the value when you click or do a touchstart(for mobile). The below will work even when you navigate away from the page and uses jquery:
//the HTML
<input type="file" id="file" name="file" />
//the JavaScript
/*resets the value to address navigating away from the page
and choosing to upload the same file */
$('#file').on('click touchstart' , function(){
$(this).val('');
});
//Trigger now when you have selected any file
$("#file").change(function(e) {
//do whatever you want here
});

vanilla js using es6
document.querySelector('input[name="file"]').addEventListener('change', (e) => {
const file = e.target.files[0];
// todo: use file pointer
});

Solution for vue users, solving problem when you upload same file multiple times and #change event is not triggering:
<input
ref="fileInput"
type="file"
#click="onClick"
/>
methods: {
onClick() {
this.$refs.fileInput.value = ''
// further logic for file...
}
}

Do whatever you want to do after the file loads successfully.just after the completion of your file processing set the value of file control to blank string.so the .change() will always be called even the file name changes or not. like for example you can do this thing and worked for me like charm
$('#myFile').change(function () {
LoadFile("myFile");//function to do processing of file.
$('#myFile').val('');// set the value to empty of myfile control.
});

<input id="fusk" type="file" name="upload" style="display: none;"
onChange=" document.getElementById('myForm').submit();"
>

<input type="file" #change="onFileChange" class="input upload-input" ref="inputFile"/>
onFileChange(e) {
//upload file and then delete it from input
self.$refs.inputFile.value = ''
}