Bootstrap multiple file selection - show only first file - javascript

I use bootstrap custom file input - and this is very good thing, but i dont know how show all my uploaded files. Every time when i try select multiple files and upload them - all passed correctly, except this - in input form shows only first file.
Code
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
I can add multiple = "" to form code - but what should I add to make all files for upload appear in the input line?

Is this what you want to see? I am not sure how the value attribute behaves on file-input but you can definitely see every file in the files property of the input so I just created a string out of it.
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var files = Array.from(this.files)
var fileName = files.map(f =>{return f.name}).join(", ")
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" multiple>
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>

In jQuery you can access FileObject via .prop('files') of input element, see this test below
$("input").on("input", function() {
var names = $(this).prop('files');
for( var i = 0; i < names.length ; i++){
console.log( names[ i ].name )
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" multiple="multiple">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>

Related

Adding elements one after another using JQuery

I am trying to add multiple div tags within a form using JQuery:
Below is my initial HTML form:
<form action="" method="post">
<div id="div_file0">
<input type="file" name="files0[]" id="files0" multiple><br/>
</div>
<a href="#" id='more_files'>Click to add more files</a>
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
Upon clicking on Click to add more files, I want more div tags to be created as below:
<form action="http://localhost:5000/api/upload_file" method="post">
<div id="div_file0">
<input type="file" name="files0[]" id="files0" multiple=""><br>
</div>
<div id="div_file1">
<input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
</div>
Click to add more files
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
However, the new div tag replaces the existing content, and adds the new and old input tags within newly created div element.
<form action="http://localhost:5000/api/upload_file" method="post">
<div id="div_file1">
<input type="file" name="files0[]" id="files0" multiple=""><br>
<input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
</div>
Click to add more files
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
Javascript used is as below:
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','#more_files', function() {
var numOfInputs = 1;
while($('#files'+numOfInputs).length) { numOfInputs++; }//once this loop breaks, numOfInputs is greater than the # of browse buttons
console.log("numOfInputs:"+numOfInputs)
$("<br/>").insertAfter("#div_file"+(numOfInputs-1));
$("div")
.attr("id","div_file"+numOfInputs)
.insertAfter("#div_file"+(numOfInputs-1));
var input = $("<input type='file' multiple/>")
.attr("id", "files"+numOfInputs)
.attr("name", "files"+numOfInputs+"[]");
var remove = $("<a class='remove' href='#'>Remove file</a>")
.attr("id","remove_file")
.attr("name","remove_file"+numOfInputs)
.attr("value",numOfInputs);
$("#div_file"+numOfInputs).append(input,remove);
});
});
</script>
This rather redundant as you're using a multiple file input already.
If you really want to do it in this manner, then remove all id attributes from the HTML content you're going to repeat in the DOM. They aren't necessary and just create more needless complication. Then you can grab the first .div_file element, clone it, and insert it before the a in the form, like this:
$(document).ready(function() {
$(document).on('click', '#more_files', function() {
var $clone = $('.div_file:first').clone();
$clone.insertBefore('form a');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<div class="div_file">
<input type="file" name="files[]" multiple><br/>
</div>
<a href="#" id='more_files'>Click to add more files</a> After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>

How to select two single files from one function?

Here's my HTML in which there are 2 input fields, I want to grab both the files from these input tags and do the further operations.
<label for="idProof" class="uploadArea">
<input
ref="idProof"
type="file"
id="idProof"
accept="image/*"
#change="selectFile"
hidden
/>
</label>
<label for="addressProof" class="uploadArea">
<input
ref="addressProof"
type="file"
id="addressProof"
accept="image/*"
#change="selectFile"
hidden
/>
</label>
I want to select files from both of these input tags in a selectFiles() function. So how should I write selectFiles() function.
I guess, you want something like the below,
<body>
<input type="file" onchange="selectFiles(this)"><br/>
<input type="file" onchange="selectFiles(this)">
<script>
let files=[];
function selectFiles(t){
files.push(t.value);
if(files.length===2){
alert(files); //or do some operation
}
}
</script>
</body>

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">

Get file name of image before upload - JQuery

I have a form to upload image with:
<div class="col-sm-4">
<input id="file_input" type="file" style="visibility: hidden; width: 0; height: 0" name="image[photo_new]" accept="image/*">
</div>
<div class="col-lg-8">
<div class="form-group row">
<label class="col-sm-3 control-label" for="title">
<label for="image_title">Title</label>
</label>
<div class="col-sm-9">
<input id="title" class="form-control" type="text" placeholder="Title" name="image[title]" maxlength="200">
</div>
</div>
</div>
I want when users click to #input_file area to choose image, then the after choosing file, the file name will display immediately in #title field. For example name.png should be name. I want to use JQuery to do this function but don't know how, any advises? Thank in advance.
You can use this.value to get the file value in a change event handler and then extract the name like
$('#file_input').change(function() {
//$('#title').val(this.value ? this.value.match(/([\w-_]+)(?=\.)/)[0] : '');
$('#title').val(this.files && this.files.length ? this.files[0].name.split('.')[0] : '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file_input" type="file" />
<input id="title" />
You can attach an event after the user chooses an image like this:
$(document).ready(function() {
$('#image').on('change', function(event) {
// and you can get the name of the image like this:
console.log(event.target.files[0].name);
});
});
If the html is like this:
<input type="file" id="image">
Use this sample code to show file name :
<input type="file" name="file" id="file" />
<button id="btn">Submit</button>
<div id="fname"></div>
$(function(){
$('#btn').on('click',function(){
var name = $('#file').val().split('\\').pop();
name=name.split('.')[0];
$('#fname').html(name);
});
})();
Here is Demo on jsfiddle
You can have name, size and type details of selected file using below code. have a look.
<form enctype="multipart/form-data">
<input id="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#file').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
</script>

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)

Categories