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 = ''
}
Related
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"
I have upload file example like this :
<form id="form" action="http://example.com">
<input type="file" id="file">
</form>
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
}
Now, I do not want to select file,I want it auto, I have the file location like this.
D:\test\test.doc
Can jquery auto select file in a path before submit ?
If this could be done, than anyone could steal your files using simple script.
I want to upload files using javascript/jquery/ajax and in my case, I have to prevent the reload on form submitting on upload.
Also, I want to add a delete button, such that, when file is uploaded, the delete button can delete this and same is the scenario, that to prevent the page refresh/reload on form submitting.
Hence, I've three buttons in a single form, UPLOAD, DELETE, NEXT and in my case, only next allows to submit the form by refreshing/action of form. And obviously, when file is just selected and the user directly hits the next button, it first uploads and then take his action.
HTML:
<form name="myform" method="post" id="FORM2" enctype="multipart/form-data">
// OTHER VALUES OF FORM
<input type="file" name="FileUpload-1" id="FileUpload-1" class="file_upload" />
<input type="submit" value="Upload" id="upload" class="submitUpload" />
<input type="submit" value="Delete" id="delete" class="submitDelete" />
<input type="submit" name="" id="FORMSUBMIT">
</form>
JS:
$(".submitUpload").click(function(){ console.log('UPLOAD');
action = "upload.php";
$("#FORM").on('submit',function(){
var options={
url : action,
success : onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
}
return false;
});
$(".submitDelete").click(function(){ console.log('DELETE');
return false;
});
$('.FORMSUBMIT').click(function () {
//CUSTOM HANDLING
});
To Directly answer your question:
$("#FORM").on('submit',function(evt){
evt.preventDefault();
});
This piece of code will prevent the normal form submitting.
My advice is to transform the Update and Delete buttons from type=submit to type=button. Like this:
<input type="button" value="Delete" id="Delete" class="submitDelete" />
This will prevent the form to be submitted when delete or update are pressed...
I wrote a jsfiddle for you:
https://jsfiddle.net/yL35bh10/
I recently prototyped a page needing image file upload. I found a package on GitHub that was easy to use and should provide the majority of the functionality you're needing.
https://github.com/blueimp/jQuery-File-Upload
My only question to you: Once a file is uploaded to the server, how are you going to know what to delete?
I already know how to create buttons using dat.GUI (passing in functions as described in this question: Is it possible to create a button using dat.gui). I want to make a button that triggers a load file event like you would do with <input type="file" id="file" name="file" enctype="multipart/form-data" />
Is this possible?
(Based on Programmatically trigger "select file" dialog box)
You call the hidden input button from the dat.GUI button's function.
<input id="myInput" type="file" style="visibility:hidden" />
<script>
var params = {
loadFile : function() {
document.getElementById('myInput').click();
}
};
var gui = new dat.GUI();
gui.add(params, 'loadFile').name('Load CSV file');
</script>
There is a way to automatically submit a form without clicking to a "submit" button?
I have a form with one "file" input. I would submit the form after the user have selected one file.
yes, you can use the form.submit() function. Add an onchange listener on the file input and link it to the form.submit() function, like so:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" onchange="this.form.submit()" name="myFile"/>
</form>
Yes, you can add the following to the onchange event of the file input:
<input type='file' .... onchange='this.form.submit();'>
this submits the form right after the user has picked a file.
However, the user can't correct a mistaken selection before submitting - be sure to check whether this is really wise.
This solution works for me.
<form enctype="multipart/form-data" method="POST" action="/upload">
<input id="myfilefield" type="file" name="file">
<input type="submit">
</form>
document.getElementById('myfilefield').onchange = function() {
this.form.submit();
};
By the way, you don't need to use flash. Gmail do it by XHR Level 2.
I don't believe you can do this. Browsers are very, very strict about what you can do to file upload fields, because of the potential for abuse. If the user accidentally selects a private file, they wouldn't want it to immediately start uploading that file to a random server.
I'm not sure what the restrictions are with doing this in an HTML form.
You can, however, do it with Flash. Gmail does it - when I click "Attach a file", I get prompted with a file browse dialog, and when I OK that dialog the upload begins immediately, and also gives me a progress bar.
Googling for "Flash uploader" will give you many options, but I don't have experience with any of them.
The solutions that were here to add an event listener in the input didn't work for me, so I found another solution, and I wanted to share it.
HTML:
<form id="attachUpload" method="POST" action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
<input id="uploadAttachment" type="file" name="files[]" placeholder="Computer" multiple />
</form>
The code to submit the form:
$(document).on('change', '#uploadAttachment', function() {
$('#attachUpload').trigger('submit');
});
And than if you want to post that data after the form is submitted:
$(document).on('submit', '#attachUpload', function(e) {
// code here
})