Get started with bootstrap-fileinput CDN

BSD-3-Clause licensed

Bootstrap-Fileinput is a plugin that enables file uploading with the Bootstrap framework.

Tags:
  • bootstrap
  • file
  • input
  • preview
  • image
  • upload
  • ajax
  • multiple
  • delete
  • progress
  • gallery

Stable version

Copied!

How to start using bootstrap-fileinput CDN


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <script src="https://cdn.cdnhub.io/bootstrap-fileinput/5.5.3/js/fileinput.min.js"></script>
    <script src="https://cdn.cdnhub.io/bootstrap-fileinput/5.5.3/themes/fas/theme.min.js"></script>
    <title>Get started with bootstrap-fileinput CDN - cdnhub.io</title>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">File Input Example</h1>
        <form action="/upload" method="post" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="file-input" class="form-label">Choose file</label>
                <input class="form-control" type="file" id="file-input" name="file" accept="image/*" data-bs-theme="fas" data-bs-style="warning" data-bs-show-upload="false">
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('#file-input').fileinput({
                language: 'en',
                showUpload: false,
                showPreview: false,
                showCaption: false,
                browseClass: 'btn btn-warning',
                dropZoneEnabled: false,
                previewFileIcon: '<i class="bi bi-file-earmark-text"></i>',
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions