j-Preview

This component resizes the picture automatically according to the settings and uploads it to the server in base64 format.

• response from server needs to contain URL address to the picture
• works with Bootstrap Grid System
• drag and drop support
• supports EXIF orientation

Path:

The value/response (from the upload) will be used as a URL address for preview.

Configuration:

• url {String} (IMPORTANT) upload URL, can contain a method too (required)
• width {Number} a picture width (required)
• height {Number} a picture height (required)
• percentage {Number} resizes a picture according to the percentage (then width and height aren't required)
• icon {String} (optional) the label icon without ti, (default: null)
• background {String} (optional) a background color, it can be transparent (default: white)
• schema {String} prepared object for sending (default: {file:base64,filename:filename}, base64 + filename is a value from preview)
• quality {Number} JPEG quality (default: 90)
• customize {Boolean} resizes picture to the defined size (default: true)
• preview {String} prepares a value preview URL address (default: null)
  • example: value => '/download/' + value + '.jpg'
• map {String} prepares response value to a value (default: null)
  • example: value => value.id
• empty {String} a link to the empty image
• keeporiginal {Boolean} keeps the original image if the dimension is the same as the width/height defined in the configuration (default: false)
• NEW output {String} output type base64 (default) or file
• NEW convert {String} an image type jpg (default) or png
• NEW exec {String} a path to the method function(next(url)) (it prevents file upload dialog)
• NEW center {Boolean} aligns the image and label to the center

Methods:

• component.reupload() it reuploads a current image value as a base64.

Use it with <ui-component name="preview">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

<div style="padding:50px;max-width:300px">
	<ui-component name="preview" path="picture" config="width:300;height:200;url:POST /upload/;icon:folder">Preview</ui-component>
</div>

<script>
	var picture = '';
</script>