How do I make a file field required using javascript? - javascript

I'm trying to make a form with an attachment field(file). I want to validate this field. I know how to do this with PHP, but i'd much rather use javascript to do it. Does anyone know a way to do this? I searched around the internet but couldn't find a solution..
This is my file field:
<input type="file" name="image" id="image" accept="image/*" />

You can try with:
<input type="file" name="image" id="image" accept="image/*" required />
And also check with JS:
if ( $('#image').is(':empty') ) {
// empty
}

<input type="file" name="image" id="image" accept="image/*" />
you can check if is valid, like this:
var file = $('#image').val();
if (file === '') {
// not valid
alert('File is not valid');
}

Related

How could I show the file name instead of directory?

The code below displays the path of the uploaded images. I am using a multi-step form with four image-uploading fields. The images upload, and it shows the full path in the preview page, but I want to display just the names with extensions of the images—not the full path. Please help me achieve that.
*Html form fields*
<p><input type="file" name="image" accept="image/*" id="id_post_image">
<input type="file" name="image2" accept="image/*" id="id_post_image2"></p>
<p>
<input type="file" name="image3" accept="image/*" id="id_post_image3">
<input type="file" name="image4" accept="image/*" id="id_post_image4"></p>
*preview form fields*
<div class="preview_img" id="review_Condition" name="review_Condition"></div>
<div class="preview_img" id="review_Condition2" name="review_Condition"></div>
<div class="preview_img" id="review_Condition3" name="review_Condition"></div>
<div class="preview_img" id="review_Condition4" name="review_Condition"></div>
*javascript image path display*
document.getElementById("review_Condition").innerHTML = document.getElementById("id_post_image").value;
document.getElementById("review_Condition2").innerHTML = document.getElementById("id_post_image2").value;
document.getElementById("review_Condition3").innerHTML = document.getElementById("id_post_image3").value;
document.getElementById("review_Condition4").innerHTML = document.getElementById("id_post_image4").value;
This pattern will do:
var filename = fullPath.replace(/^.*[\\\/]/, '')
Question duplicate and answer from :
How to get the file name from a full path using JavaScript?

Checking excel specific format from input type file HTML/JS

Get the file uploaded specifically for excel only.
<label for="files" > </label>
<input type="file" id="files" name="files" />
<input type="submit" onClick={(e)=>Upload(e) } />
Full control in Checking file type for specific format
Get the file uploaded specifically for excel only.
<label for="files" > </label>
<input type="file" id="files" name="files" />
<input type="submit" onClick={(e)=>Upload(e) } />
Full control in Checking file type for specific format
function Upload(e){
let file = document.getElementById("files").files[0];
if( file.type === "application/vnd.ms-excel"){
alert("excel file");
}
else{
alert("Not Excel");
}
}

input file: write the name of the file in a text input with Javascript

I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.
<html>
<head>
<script type="text/javascript">
(function alertFilename()
{
var thefile = document.getElementById('thefile');
//here some action to write the filename in the input text
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
</body>
</html>
Here is a fully working example
JavaScript:
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("some_text").value = filename[filename.length-1];
};
HTML:
<form>
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
jsFiddle live example
Hope you find it helpful, Asaf
For the newcomers:
document.getElementById("thefile").onchange = function() {
document.getElementById("some_text").value = this.files[0].name;
};
/* BELOW FULLPATH VERSION (depending on browser)
document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br>
<br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
Just take the file input' value, split it and take the last index:
Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name
(Sorry that cant format my answer. I answered by a smartphone)

Add file input to form using jQuery

I'm pretty new to jQuery and I'm trying to make simple HTML upload page and I want to add new file input to form after selecting some file. I've tried this code
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form></body>
<script>
$('#upload').delegate('input[type=file]', 'change', function(){
alert('Alert');
addField();
});
</script>
and this addField() function
function addField(){
$('<input type="file" name="files[]" id="file" /><br />').insertAfter('#file');
};
But if I run this code, the 3rd input field is inserted after the 1st one instead of after the last field. Is it possible to add input fields after the last file input without using unique ids for these inputs? http://jsfiddle.net/aHrTd/
Thanks for any help.
How about this - (find last input:file in form and insert new input after it)
function addField(){
$('form input:file').last().after($('<input type="file" name="files[]" class="file" /><br />'));
}
Here is a solution: http://jsfiddle.net/aHrTd/4/
Adds a unique name and id to the new file inputs and inserts after last file input as pXL has suggested.
Note that I have used one of the most under-utilized jQuery abilities, though it easy to find (http://api.jquery.com/jQuery/) can build a new element for you in a nice clean way.
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>
<script>
function addField(){
var lastfile = $('form input:file').last();
var countfile = ($('form input:file').length)+1;
$( "<input/>", {
"type": "file",
"name": "file_"+countfile,
"id": "file_"+countfile
}).insertAfter(lastfile);
fileinputmonitor();
}
function fileinputmonitor(){
$('input[type="file"]').change(function(){
alert('Alert');
addField();
});
}
fileinputmonitor();
</script>
Your inputs have to have unique ids. Give them a unique id and it should work fine.
You can use .last()
HTML
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" class='dynamic-file' /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
JS
function addField(){
$('<input type="file" name="files[]" class="dynamic-file" /><br />').insertAfter($('.dynamic-file').last());
};

Checking for attachments in JavaScript

Prior to submitting a form, I would like to check if a file has been attached and pop up a warning message saying that a file needs to be attached if it hasn't been. I was wondering how to accomplish this using JavaScript or Prototype or JQuery etc?
Assuming you are using an <input type="file"> field, you can simply check if the element's value is a non-empty string:
<form method="POST">
<input type="file" id="attachment" />
<input type="button" onClick="checkAttachment();" value="Send" />
</form>
<script type="text/javascript">
function checkAttachment() {
if (document.getElementById('attachment').value !== '') {
alert('File Attached');
}
else {
alert('No File Attached');
}
}
</script>

Categories