Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Demonstration for managing and manipulating images before upload. Currently resizing of images (width or height) is supported as part of image manipulation before upload. The following are the pre-requisites for resizing to work:

  • This is applicable only for image files being uploaded and if showPreview is true.

  • This feature is only supported for ajax based file uploads.

  • The browser must support HTML 5 canvas features and methods.

  • You must load the Piexifjs plugin by hMatoba before the fileinput.js script. This plugin is provided in the js/plugins folder of the repo for easy access.

  • You must set the resizeImage property along with either of maxImageWidth or maxImageHeight.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

A single image upload scenario demonstrating a resize width limit of 200 px. The maxImageWidth setting controls the maximum width allowed. Remember to load the piexif.js before the fileinput.js for restoring exif data in jpeg images after resize.
<script src="/js/plugins/piexif.js"></script>
<script src="/js/fileinput.js"></script>
<div class="file-loading">
    <input id="input-image-1" name="input-image" type="file" accept="image/*">
</div>
<!-- an example modal dialog to display confirmation of the resized image -->
<div id="kv-success-modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Yippee!</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div id="kv-success-box" class="modal-body">
      </div>
    </div>
  </div>
</div>

<script>
$("#input-image-1").fileinput({
    uploadUrl: "/site/image-upload",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxImageWidth: 200,
    maxFileCount: 1,
    resizeImage: true
}).on('filepreupload', function() {
    $('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
    $('#kv-success-box').append(data.response.link);
    $('#kv-success-modal').modal('show');
});
</script>
A single image upload scenario demonstrating a resize height limit of 200 px. The maxImageHeight setting controls the maximum height allowed. You can see that even though resizePreference is set to width, if you do not provide the maxImageWidth then the maxImageHeight setting will be used. Remember to load the piexif.js before the fileinput.js for restoring exif data in jpeg images after resize.
<script src="/js/plugins/piexif.js"></script>
<script src="/js/fileinput.js"></script>
<div class="file-loading">
    <input id="input-image-2" name="input-image" type="file" accept="image/*">
</div>
<script>
$("#input-image-2").fileinput({
    uploadUrl: "/site/image-upload",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxImageHeight: 150,
    maxFileCount: 1,
    resizeImage: true
}).on('filepreupload', function() {
    $('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
    $('#kv-success-box').append(data.response.link);
    $('#kv-success-modal').modal('show');
});
</script>
An automatic image resize scenario, where you have set both the maxImageWidth and maxImageHeight. The resizePreference is set to height for this example. Note that by default maxImageHeight will be parsed, unless you have an image height less than maxImageHeight. In that case maxImageWidth will be automatically used. Remember to load the piexif.js before the fileinput.js for restoring exif data in jpeg images after resize.
<script src="/js/plugins/piexif.js"></script>
<script src="/js/fileinput.js"></script>
<div class="file-loading">
    <input id="input-image-3" name="input-image" type="file" accept="image/*">
</div>
<script>
$("#input-image-3").fileinput({
    uploadUrl: "/site/image-upload",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxImageWidth: 200,
    maxImageHeight: 150,
    resizePreference: 'height',
    maxFileCount: 1,
    resizeImage: true
}).on('filepreupload', function() {
    $('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
    $('#kv-success-box').append(data.response.link);
    $('#kv-success-modal').modal('show');
});
</script>
Conditional resize based on resizeIfSizeMoreThan setting in KB. Only the files greater than resizeIfSizeMoreThan setting (which is 1000KB in this example) will be resized.
<script src="/js/plugins/piexif.js"></script>
<script src="/js/fileinput.js"></script>
<div class="file-loading">
    <input id="input-image-4" name="input-image" type="file" accept="image/*">
</div>
<script>
$("#input-image-4").fileinput({
    uploadUrl: "/site/image-upload",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxImageWidth: 200,
    maxImageHeight: 150,
    resizePreference: 'height',
    maxFileCount: 1,
    resizeImage: true,
    resizeIfSizeMoreThan: 1000
}).on('filepreupload', function() {
    $('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
    $('#kv-success-box').append(data.response.link);
    $('#kv-success-modal').modal('show');
});
</script>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.