Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
85
rated 0 times [  88] [ 3]  / answers: 1 / hits: 5382  / 4 Years ago, sun, july 26, 2020, 12:00:00

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?


More From » html

 Answers
3

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>




[#3068] Friday, July 24, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
rocioblancac

Total Points: 699
Total Questions: 96
Total Answers: 108

Location: Libya
Member since Mon, Dec 7, 2020
4 Years ago
;