<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
title
>Custom Input File</
title
>
<
link
href
=
rel
=
"stylesheet"
>
<
link
href
=
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
div
class
=
"container mt-5"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
h3
class
=
"mb-4"
>
Approach 2: Using Bootstrap Input Group with Icon
</
h3
>
<
div
class
=
"input-group mb-3"
>
<
label
class
=
"input-group-text"
for
=
"customFile"
>
<
i
class
=
"bi bi-file-earmark-image"
></
i
>
</
label
>
<
input
type
=
"file"
class
=
"form-control visually-hidden"
id
=
"customFile"
accept
=
"image/*"
multiple
onchange
=
"showFiles(this)"
>
<
button
class
=
"btn btn-success"
type
=
"button"
onclick
=
"document.getElementById('customFile').click()"
>
Choose Files
</
button
>
</
div
>
<
div
class
=
"mt-3"
>
<
div
class
=
"row"
id
=
"imagePreviews"
></
div
>
</
div
>
</
div
>
<
script
src
=
</
script
>
<
script
>
function showFiles(input) {
const previewsContainer =
document.getElementById('imagePreviews');
previewsContainer.innerHTML = '';
const files = input.files;
for (let i = 0; i <
files.length
; i++) {
const
file
=
files
[i];
const
reader
=
new
FileReader();
reader.onload
=
function
(e) {
const
preview
=
document
.createElement('div');
preview.classList.add('col-md-4', 'mb-3');
preview.innerHTML = `
<img
src
=
"${e.target.result}"
alt
=
"Preview"
class
=
"img-fluid rounded"
>
<
div
class
=
"text-center mt-2"
>
<
span
class
=
"badge bg-secondary"
>${file.name}</
span
>
</
div
>
`;
previewsContainer.appendChild(preview);
};
reader.readAsDataURL(file);
}
}
</
script
>
</
body
>
</
html
>