Image Dimensions Demo   Tips

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).
Demonstration for validating image dimensions when you are uploading image files. This is applicable only for image files and if showPreview is true.

Set minImageWidth and minImageHeight.

<!-- MINIMUM IMAGE DIMENSIONS -->
<input id="input-dim-1" name="inputdim1[]" type="file" multiple class="file-loading" accept="image/*">
<script>
$("#input-dim-1").fileinput({
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ["jpg", "png", "gif"],
    minImageWidth: 50,
    minImageHeight: 50
});
</script>

Set maxImageWidth and maxImageHeight.

<!-- MAXIMUM IMAGE DIMENSIONS -->
<input id="input-dim-2" name="inputdim2[]" type="file" multiple class="file-loading" accept="image/*">
<script>
$("#input-dim-2").fileinput({
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxImageWidth: 250,
    maxImageHeight: 250
});
</script>

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

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 -->
<input id="input-file-1" name="inputfile1[]" type="file" multiple class="file-loading" accept="image/*">
<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>