Hide the upload submit button if field "file" is empty - javascript

With this simple example
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
</form>
How can I hide the submit button until somthing's in the file field, I've tried to make a php script that look if the $_FILES['error'] == 4 or is_file_uploaded, etc and that don't work. So I want to simply hide the button until something is selected in the file field.
The answer could be in javascript, jQuery... I don't care :D
Thanks

The <input type="file"> element has a files property.
Simply check files.length.
jQuery example, which modifies the submit button on the fly:
// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
var hasNoFiles = this.files.length == 0;
$(this).closest('form') /* Select the form element */
.find('input[type=submit]') /* Get the submit button */
.prop('disabled', hasNoFiles); /* Disable the button. */
});

Use this. Attach the code on the change event of the file field.
$(function() {
$("input:file").change(function() {
var fileName = $(this).val();
if(filename != "") { $("#submitButtonId").show(); } //show the button
});
});

The default state of the submit should be hidden (CSS display: none)
And on change event of the file field, you show that submit button
Her's the code
<script>
$(function() {
$("#myfileinput").change(function() {
if($(this)).val() != "") $("submit").show();
});
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>

<script>
function checkFile() {
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
if(size > 0) {
document.getElementById('submit').style.display='block';
}
}
</script>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>

Related

jQuery - Auto submit form

I want to auto submit form which flow is like below.
input type = 'file' should not display.
if click on submit button choose file pop up should open.
after selecting a file form should auto submit with validation.
I complete most of this but facing problem while submitting form.
NOTE -> i hide input type = 'file' using css style.
Here is my HTMLfrom
<form method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
<br/>
<input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>
This is my javaScript
<script>
$(document).ready(function(){
function validation() {
//validation here
}
$('.submit').click(function(event) {
event.preventDefault();
$('#myfile').click();
});
});
</script>
Is this what you want?
$(document).ready(function(){
function validation() {
//validation here
alert('in function validation')
$('#myForm').submit();
}
$('.submit').click(function(event) {
event.preventDefault();
$('#myfile').click();
});
$('#myfile').on('change',function(){
validation();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="form" id="myForm" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
<br/>
<input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>
Instead of using the submit button, give the hidden input type="file" a <label> element and style that as a button. This will make it look like a submit button, but will instead prompt the file upload.
Then listen for the change event on the hidden file input. This event will be fired every time you upload a file. There you'll want to do validation. If the validation succeeds, manually submit the form with the jQuery .submit() method.
$(document).ready(function() {
function validation(files) {
//validation here, now returns true for demonstration.
return true;
}
$('#myfile').change(function(event) {
// Check if files are valid.
const isValid = validation(event.target.files);
// If the are..
if (isValid) {
// ..submit the form.
$('#myform').submit();
}
});
});
.btn {
display: inline-block;
padding: 0.5rem;
border: 1px solid #d0d0d0;
border-radius: 3px;
background-color: #f0f0f0;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform" method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<label for="myfile" class="submit btn btn-primary">Import CSV</label>
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
</form>

Button enabling for multiple file uploads - HTML

I have this code in my html where I'm to upload three files. The submit button for all the corresponding file uploads is disabled unless a file is selected.
$(document).ready(
function() {
$('input:file').change(
function() {
if ($(this).val()) {
$('input:submit').attr('disabled', false);
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<input type="file" name="fileInput1" id="fileInput1" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput2" id="fileInput2" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput3" id="fileInput3" />
<input type="submit" value="submit" disabled />
</form>
My concern is that, if I select a file for the first form, the submit button in the other forms too get enabled.
Option 1:
Regardless of the order of the elements, this will enable the wanted button:
$(document).ready(
function(){
$('form input:file').change(
function(){
if ($(this).val()) {
// Select button of this form
$(this).parent('form')
.children('input:submit')
.attr('disabled',false);
}
}
);
});
see this jsFiddle
Option 2: This will enable it in case Input-submit is always next to Input-File:
$(this).next().attr('disabled',false);
instead of this:
$('input:submit').attr('disabled',false);
see this jsFiddle
You need to use traversing, to find the right button within the right form.
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$(this).siblings('input[type=submit]').attr('disabled',false);
}
}
);
});
This will look only for inputs that are siblings of the file input, which means that they are within the same parent element (in your case, the same form).

PHP Stop Form Reload Show Error Js

I want to show my error if 'fileToUpload' is empty (show error with js) and stop reloading page if 'fileToUpload' is empty
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>
$('.new_post').click(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false;
}
});
Add an id to your form like this <form method="post" enctype="multipart/form-data" id="myform"> and in your javascript attach the checking function as callback to the form submit event rather than button click event like $('#myform').submit().
$('#myform').submit(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
/*
openandclose('.error_box', 'emptyyyy.', 1700);
$('.error_box').focus();
*/
alert("EMPTY!!");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" id="myform">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>
This code might help you out.Upon clicking the button it checks for whether file is selected or not , and return True/False Accordingly.
<form method="post" enctype="multipart/form-data" onsubmit="return funccheck();">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit"> </form>
<script>
function funccheck() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false; //stops page loading
}
return true; // initiates page loading
});
</script>
Try this:
$('.new_post').click(function(e) { var get_photo = $('#fileToUpload').get(0).files.length; // If 0 file show error if (get_photo == 0) { openandclose('.error_box' , 'emptyyyy.', 1700); $('.error_box').focus();
e.preventDefault();
return false; } });
The variable e is the event, the function preventDefault will stop the form from submitting if there is no file.

Determine when an input of file contains a value

I have this application with a file input and a submit input. I want the submit input to be disabled until the file input has a value. How do I check this kind of information with JS? I tried adding a "required" to the file input, but it still doesn't work...
Should I just use PHP and check if $_FILE isset()?
Should I just use PHP and check if $_FILE isset()?
It is good practice to ensure that the server gets what is expected. So yes, additional checks for a file and eventual mischiefs should also be done on the server.
Here is an example of what you want on the client-side.
JSFiddle
HTML
<form name="fileForm" onchange="changed()">
<input type="file" name="image">
<input type="submit" name="submit" disabled>
</form>
JavaScript
function changed() {
var form = document.forms.fileForm;
if(form.image.value.length > 0) {
form.submit.removeAttribute("disabled");
} else {
form.submit.setAttribute("disabled", "");
}
}
Try this
<form name="form1">
<input type="file" name="image" id="file_upload">
<input type="submit" name="submit" id="btn_submit" >
</form>
jQuery(document).ready(function()
{
/*To disable the button on load*/
jQuery("#btn_submit").attr('disabled','disabled');
jQuery("#file_upload").change(function()
{
var file_value= jQuery(this).val();
if(jQuery(this).val() === '')
{
jQuery("#btn_submit").attr('disabled','disabled');
}
else
{
jQuery("#btn_submit").removeAttr('disabled');
}
});
});

form "submit" event disabled on IE

I encounter a problem with a file upload form when I use Internet Explorer (9).
My form is a little special because I simulate a secondary behavior on my both inputs :
For the input[type=file], after the user selects a file, I submit the form.
For the input[type=submit], before he submits the form, I open the file browser and once he selects a file, I submit it.
The my script works with Chrome and FF but not IE. Indeed when I test the submit button the form is not sent whereas when I use the input[type=file], I don't have any problems.
Here is the HTML:
<form name="up" action="/" method="post" enctype="multipart/form-data">
<div class="fileinputs">
<input type="file" name="FILE" size="38" class="file" id="upload" onchange="submitForm()" />
<input type="submit" value="BROWSE" name="ok" class="submit" id="submit_button_id" onclick="return check();" />
</div>
</form>
JS :
function submitForm() {
document.getElementById("submit_button_id").click();
}
function check()
{
var path = false;
document.getElementById('upload').click();
var filesent = document.getElementById("upload");
filesent.value === "" ? path = false : path = true;
if(!path){
return false;
}
return true;
}

Categories