I'm using jQuery MultiFile plugin, this is a ordinary view of that plugin
this is the HTML syntax for this
<input type="file" id="someName" name="file" class="multi" onchange="return Plugins.handleFileSelect(this);"/>
I'm trying to generate this file input dynamically
So I tried to append this once "click here" button click happens
<button type="button" id="ifile">click here</button>
<div id="target_div"></div>
<script type="text/javascript">
$('#ifile').click(function () {
// when the add file button is clicked append
// a new <input type="file" name="someName" />
// to a target_div div
$('#target_div').append(
$('<input/>').attr('type', "file").attr('name', "file").attr('id', "someName").attr('class', "multi").attr('onchange', "return Plugins.handleFileSelect(this);")
);
});
</script>
but once I do this its generating ordinary file input but its not listing files properly
once I open inspect elements I can see a view like following
how can I generate this properly
You should use MultiFile plugin instead
$('#ifile').click(function () {
// when the add file button is clicked append
// a new <input type="file" name="someName" />
// to a target_div div
var input = $('<input/>')
.attr('type', "file")
.attr('name', "file")
.attr('id', "someName");
//append the created file input
$('#target_div').append(input);
//initializing Multifile on the input element
input.MultiFile();
});
you can use append like this
$('#target_div').append('<input type="file" id="someName" name="file" class="multi" onchange="return Plugins.handleFileSelect(this);"/>')
btw you can check the jquery documentation for append
http://api.jquery.com/append/
Related
<html>
<head>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
<input type="file" name="pic" accept="image/*" id="insert-file" class="ins=file">
<input type="submit" id="submit-btn" class="submit-btn">
<button id="add-img" type="button">ADD ANOTHER IMAGE</button>
<div id="new-field"></div>
<script src="{{ url_for('static', filename='upload.js') }}"></script>
</form>
</body>
</html>
This is my template and the following is upload.js
const addImg = document.getElementById('add-img')
const newField = document.getElementById('new-field')
addImg.addEventListener('click', function() {
newField.innerHTML += `
<input type="file" name="pic" accept="image/*" class="ins=file">
<input type="submit" class="submit-btn">
`
})
As you can see, a new input field will be created when a user clicks on the ADD ANOTHER IMAGE button but the image selected in that input field will disappear when the button is clicked and it will show, "No file chosen" despite the user selecting a file before clicking on the ADD ANOTHER IMAGE. I suspect that it is because I am getting rid of the value of the input field when creating a new with the ADD ANOTHER IMAGE button. (it is there in the JS code)
Anyway, how can I fix this? I want the user to be able to click on the ADD ANOTHER IMAGE button and the input field to still contain the file that they selected previously.
using .innerHTML += is converting what is currently on the dom in to a string, then putting it back in to the dom which causes it to become a new element.
use insertAdjacentHTML to insert a string of html in to the dom to keep the existing elements mdn docs
addImg.addEventListener('click', function() {
newField.insertAdjacentHTML('beforeend',`
<input type="file" name="pic" accept="image/*" class="ins=file">
<input type="submit" class="submit-btn">
`)
})
Hi I am using Jquery plug in jquery.MultiFile.pack.js . usage of this plug in requires input form element to be of class "multi"
<input id="preview" class="multi" name="preview[]" type="file" />
I am adding form elements dynamically from a PHP script. Multi file upload is not working when the elements are added dynamically, but works when element is allready present directly in the .
My question is how do I make this multi file upload to work. I tried to add class "multi" to the elements usng "on" as below, but it is not working.
$('input:file').on('click',function(){
$('#preview').addClass("multi");
});
For an HTML file input to accept a multiple file selection, you have to add it the multiple property :
<input id="preview" class="multi" name="preview[]" type="file" multiple/>
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>
When on a phone I'm unable to view these two buttons as they are too far apart. I want to make it so after you choose the file, the 'choose file' button would be replaced by the upload button. Is this possible. What would i have to do?
http://goawaymom.com/buttons.png
my html -
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file"class="box"/>
<input type="submit" id="mybut" value="Upload" name="Submit"/>
</form>
-Note I don't care to put them on separate lines or make font smaller- etc
Simplest Way:
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
Without Jquery, Only JavaScript
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
<script type="text/javascript">
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
if(fileName){
remove chose file button and show upload button(visible property)
}
});
});
check jQuery - Detecting if a file has been selected in the file input
Yep, it's very easy indeed. You can listen for onchange event of the file input and hide it.
HTML:
<input name="inpt" type="file"/>
<input type="button" value="Upload"/>
Javascript:
//this event is fired when the file is chosen (not when user presses the cancel button)
inpt.onchange = function(e) {
//setting display to "none" hides an element
inpt.style.display="none";
};
JSfiddle
PS. if you want you can use the same trick to show the "Upload" button only when a file is chosen. In that case the button code will be <input id="btn" type="button" value="Upload" style="display:none"/> and in the Javascript code you write btn.style.display="" to show the button.
I can say that there are multiple ways to do it. But in core java script the below is the approach
(1) Initially set the display style of upload button to none in order to hide that
(2) Write Onchange event handler for input file type
(3) In that handler function if the value is not null then hide the input file by applying display style none and then change the style of upload button to empty('').
Hope this approach works
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 = ''
}