Image Dimensions Demo

Thankful to Krajee!
to get more out of us.

Demonstration for validating image dimensions when you are uploading image files. This is applicable only for image files and if showPreview is true.

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)

Set minImageWidth and minImageHeight.
<!-- MINIMUM IMAGE DIMENSIONS -->
<div class="file-loading">
    <input id="input-dim-1" name="input-dim-1[]" multiple type="file" accept="image/*">
</div>
<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 -->
<div class="file-loading">
    <input id="input-dim-2" name="input-dim-2[]" multiple type="file" accept="image/*">
</div>
<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 -->
<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>

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.