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)

Landscape	L-1	L-2	L-3	L-4	L-5	L-6	L-7	L-8
Portrait	P-1	P-2	P-3	P-4	P-5	P-6	P-7	P-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>