Web Component: j-Preview
j-Preview
This component resizes the picture automatically according to the settings and uploads it to the server in base64
format.
- jComponent
v19|v20
- response from server needs to contain URL address to the picture
- easy usage
- 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 (thenwidth
andheight
aren't required)icon
{String}
(optional) the label icon withoutti
, (default:null
)background
{String}
(optional) a background color, it can betransparent
(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'
- example:
map
{String}
prepares response value to a value (default:null
)- example:
value => value.id
- example:
empty
{String}
a link to the empty imagekeeporiginal
{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 typebase64
(default) orfile
- NEW
convert
{String}
an image typejpg
(default) orpng
- NEW
exec
{String}
a path to the methodfunction(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.
Author
- Peter Širka petersirka@gmail.com
- License
Created
23. november 2017
Updated
11. july 2024
jComponent library
19 | 20
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com