input file "No File Choosen" text hide using button in jquery MultiFile - javascript

I have following input file
<input type="file" id="sampleInput" name="files" onchange="return Plugins.sampleAction(this);"/>
In this file input I'm trying to remove "No File Choosen" text, for that I did following modification
<input type="file" id="sampleInput" name="files" onchange="return Plugins.sampleAction(this);" style='display:none'/>
<button id="image_alt" type="button">Select image</button>
<script type="text/javascript">
$('#image_alt').addEventListener('click', function () {
$('#sampleInput').click();
});
</script>
but when I click button this one not opening the file up-loader window


You can try this
$('#image_alt').on('click', function () {
$('#sampleInput').click();
});
addEventListener is the javascript way to listen for events, but you call it on a JQuery object. Give a look at JQuery.on() to manage events using JQuery.


try this
<button id="image_alt" type="button">Select image</button>
<p class="file_selected">File name</p>
<script type="text/javascript">
$('#image_alt').on('click', function () {
$('#sampleInput').click();
});
function changeVal(obj,cnt){
$(cnt).text($(obj).val());
}
</script>

Related

How to remove a file without affecting other file upload in HTML

I'm trying to upload a file in the header and after clicking submit, the uploaded file will be assigned to other file uploads but when I click the (X) button, all of the file upload associated will be removed as well. The sample image is uploaded here.
As much as possible, please limit the solution to JavaScript/jQuery only. Thanks.
Sample code below:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<p>Click on the "Choose File" button to upload a file:</p>
<input type="file" id="myFile" name="filename">
<br />
<br />
<input type="submit" onclick="test(event)">
<br />
<br />
<input type="button" value="X" onclick="removeFile('#myFile1')"><input type="file" id="myFile1" name="filename">
<input type="button" value="X" onclick="removeFile('#myFile2')"><input type="file" id="myFile2" name="filename">
<input type="button" value="X" onclick="removeFile('#myFile3')"><input type="file" id="myFile3" name="filename">
<script>
function test(e)
{
e.preventDefault();
$("#myFile1")[0].files = $("#myFile")[0].files;
$("#myFile2")[0].files = $("#myFile")[0].files;
$("#myFile3")[0].files = $("#myFile")[0].files;
}
function removeFile(value)
{
$(value).val('');
}
</script>
</body>
</html>
Do not be confused that when after removing a file, there is still file uploaded which is actually isn't.

your code correctly running! see this fiddle:
with no change:
function test(e)
{
e.preventDefault();
$("#myFile1")[0].files = $("#myFile")[0].files;
$("#myFile2")[0].files = $("#myFile")[0].files;
$("#myFile3")[0].files = $("#myFile")[0].files;
}
function removeFile(value)
{
$(value).val('');
}
https://jsfiddle.net/4mks8r59/

How to append input type file and pass a file to it with jquery

i have an input type file it's id is "icon" and it can be repeated many times.
So i have a button when i click on it
it will append a new input type file and i need to send the uploaded file from "icon" input to this new input with Jquery
here is my code
<input type="file" class="chooseFile" accept="image/*" id="icon">
<button type="button" id="add_item">add item</button>
<div id="appended_inputs"></div>
and here is jquery code
$('#add_item').click(function(){
$('#appended_inputs').append(
`<input type="file" id="new_icon"`>
);
$('#new_icon').val($('#icon').val());
});
Can anyone help me!

The problem with your solution is that you will have multiple elements with the same ID.
Try use this code, it might be what you want:
$('#add_item').click(function() {
$('#appended_inputs').append('<input type="file" class="new_icon" >');
$('.new_icon:last').get(0).files= $('#icon').get(0).files;
});
Demo
$('#add_item').click(function() {
$('#appended_inputs').append('<input type="file" class="new_icon" >');
$('.new_icon:last').get(0).files= $('#icon').get(0).files;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" class="chooseFile" accept="image/*" id="icon">
<button type="button" id="add_item">add item</button>
<div id="appended_inputs"></div>

Change handler not working

I am completely new to JQuery and am having trouble getting a simple HTML page containing JQuery (that I gleaned from another Stack Overflow thread, which unfortunately wasn't complete enough for a JQuery newbie like me, apparently!) to work properly.
When I choose a filename, I expect the "mytext" text input field to contain the name of the file I uploaded, but this does not happen.
$(document).ready(function() {
$('#myfile').bind('change', function() {
var fileName = '';
fileName = $(this).val();
$('#mytext').html(fileName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<input type="text" id="mytext" name="mytext">
<input type="file" id="myfile" name="myfile">
</form>

you were missing a /script on the jQuery tag
You were using .html() instead of .val() for the field
You should use .on instead of .bind
$('#myfile').on('change', function() {
fileName = $(this).val().split('\\').pop();
$('#mytext').val(fileName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mytext" name="mytext">
<input type="file" id="myfile" name="myfile">

How do I auto-submit an upload form when a file is selected?

I have a simple file upload form. How do I make it submit automatically when a file has been selected? I don't want the user to have to click the Submit button.

You can simply call your form's submit method in the onchange event of your file input.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
http://jsfiddle.net/cwvc4/73/

Just tell the file-input to automatically submit the form on any change:
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>
This solution works like this:
onchange makes the input element execute the following script, whenever the value is modified
form references the form, that this input element is part of
submit() causes the form to send all data to the URL, as specified in action
Advantages of this solution:
Works without ids. It makes life easier, if you have several forms in one html page.
Native javascript, no jQuery or similar required.
The code is inside the html-tags. If you inspect the html, you will see it's behavior right away.

Using jQuery:
$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>

JavaScript with onchange event:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
jQuery
.change() and .submit():
$('#fileInput').change(function() {
$('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
<input type="file" id="fileInput">
</form>

The shortest solution is
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

<form id="thisForm" enctype='multipart/form-data'>
<input type="file" name="file" id="file">
</form>
<script>
$(document).on('ready', function(){
$('#file').on('change', function(){
$('#thisForm').submit();
});
});
</script>

This is my image upload solution, when user selected the file.
HTML part:
<form enctype="multipart/form-data" id="img_form" method="post">
<input id="img_input" type="file" name="image" accept="image/*">
</form>
JavaScript:
document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
var upload = document.getElementById('img_input');
var image = upload.files[0];
$.ajax({
url:"/foo/bar/uploadPic",
type: "POST",
data: new FormData($('#img_form')[0]),
contentType:false,
cache: false,
processData:false,
success:function (msg) {}
});
};

If you already using jQuery simple:
<input type="file" onChange="$(this).closest('form').submit()"/>

Try bellow code with jquery :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#myForm').on('change', "input#MyFile", function (e) {
e.preventDefault();
$("#myForm").submit();
});
});
</script>
<body>
<div id="content">
<form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
<input type="file" id="MyFile" value="Upload" />
</form>
</div>
</body>
</html>

For those who are using .NET WebForms a full page submit may not be desired. Instead, use the same onchange idea to have javascript click a hidden button (e.g. <asp:Button...) and the hidden button can take of the rest. Make sure you are doing a display: none; on the button and not Visible="false".

HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
JAVASCRIPT PURE
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").submit();
}
};
</script>

You can put this code to make your code work with just single line of code
<input type="file" onchange="javascript:this.form.submit()">
This will upload the file on server without clicking on submit button

<form action="http://example.com">
<input type="file" onchange="Submit()" />
</form>
<script>
// it will submit form 0 or you have to select particular form
document.getElementsByTagName("form")[0].submit();
</script>

$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>

Problem with file submiting

<form method="POST" enctype="multipart/form-data" action="http://site.com/img">
File: <input type="file" name="file" id="abc" /><br/>
ID: <input type="text" name="someId" value="123"/>
<input id="submitFormButton" type="submit" value="Upload" name="Upload">
</form>
<input type="button" id="btnEditAvatar" value="fakeButton"/>
$("#btnEditAvatar").bind("click", function () { $("#abc").trigger("click"); });
$("#abc").change(function() { $("#submitFormButton").trigger("click"); });
Problem occurs in IE only.
When choose file by pressing on "abc" button it works(after closing file dialog, file is uploaded), but when I press on "btnEditAvatar" button, nothing is happened after closing file diaog.
I've tried to use "click" function instead of "change". I've tried to call it with "setTimeout" function and I also tried to use "onpropertychange" event handler.
http://jsfiddle.net/streamcode9/hAnbQ/

Instead if trying to click the submit button, why not just submit the form?
$("#abc").change(function() { $(this).closest('form').submit() });

try either of these:
$("#btnEditAvatar").bind("click", function () { $("#submitFormButton").trigger("click"); });
$("#abc").change(function() { $("#submitFormButton").trigger("click"); });
This binds it to submit.
$("#btnEditAvatar").bind("click", function () { $("#abc").trigger("change"); });
$("#abc").change(function() { $("#submitFormButton").trigger("click"); });
this binds it to change which triggers the submit click

Categories