Krajee

Image Management Demo

Thankful to Krajee! BUY A COFFEEor to get more out of us.

Demonstration for managing and manipulating images before upload. Currently auto-orientation of JPEG images (CSS styles) and resizing of images (width or height) is supported as part of image management before upload. The following are the pre-requisites for image management:

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

  • The resize will only be possible if the image is displayed in the preview window. Note that based on maxFilePreviewSize setting, the plugin will not display the file in preview, if the file size exceeds maxFilePreviewSize.

  • 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)

With release v4.4.0, images can be auto-oriented for display before upload, based on EXIF orientation tag. This is achieved through the property autoOrientImage, which will automatically rotate or flip the images for preview (note that this does not alter the source image file sent to server, but only alters the style for right display).

Note that for auto image orientation, browsers which support the image-orientation CSS will be auto detected by the plugin and this browser capability will be turned on or off. For browsers which do not support the image-orientation CSS property, you must load the Piexifjs plugin by hMatoba before the fileinput.js script.

For the demo example below, you can test the auto EXIF rotation by using one of the Exif sample image files from bootstrap-fileinput-samples. Also you can test this demo by changing autoOrientImage on the fly by toggling the Toggle Auto Orientation checkbox. Note that only jpeg files will be detected for auto orientation.

Example Test Images | (download on your client and select for upload)

LandscapeL-1L-2L-3L-4L-5L-6L-7L-8
PortraitP-1P-2P-3P-4P-5P-6P-7P-8
<!-- AUTO IMAGE ORIENTATION -->
<div class="file-loading">
    <input id="input-file-1" name="input-file-1[]" multiple type="file" accept="image/*">
</div>
<div class="checkbox">
    <label>
    <input id="toggleOrient" name="tog" type="checkbox" checked>
    Toggle Auto Orientation
    </label>
</div>
<div id="togStatus" class="hint-block">
</div>
<script>
$("#input-file-1").fileinput({
    uploadUrl: "/file-upload-batch/2",
    autoOrientImage: true
});
$("#toggleOrient").on('change', function() {
    var val = $(this).prop('checked');
    $("#input-file-1").fileinput('refresh', {
        uploadUrl: "/file-upload-batch/2",
        autoOrientImage: val
    });
    $('#togStatus').html('Fileinput is reset and <samp>autoOrientImage</samp> is set to <em>' + (val ? 'true' : 'false') + '</em>. Retry by selecting images again.');
});
</script>
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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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.

 
visitors to Krajee Jquery Plugins since 22-May-2017