<div>
In this example, you can't upload your own files.<br />
Uploads are disabled for security reasons.
<br /><br /><br />
<div class="image-preview-single">
<img src="" alt="" />
<input
type="hidden"
role="uploadcare-uploader"
data-clearable
data-images-only
data-public-key="8b178a5b708a4aa049f7"
value="a15a0473-5262-48c7-82e3-2fefcd14e293"
/>
</div>
<div class="image-preview-single">
<img src="" alt="" />
<input
type="hidden"
role="uploadcare-uploader"
data-clearable
data-images-only
data-public-key="8b178a5b708a4aa049f7"
value="9dd2f080-cc52-442d-aa06-1d9eec7f40d1"
/>
</div>
</div>
body {
margin: 16px;
}
p {
margin: 8px 0;
}
code {
font-family: monospace;
}
.image-preview-single {
padding: 10px 0;
}
.image-preview-single > img {
width: 128px;
height: 96px;
vertical-align: middle;
visibility: hidden;
display: inline-block;
}
function installWidgetPreviewSingle(widget, img) {
widget.onChange(function(file) {
img.css('visibility', 'hidden')
img.attr('src', '')
if (file) {
file.done(function(fileInfo) {
var size = '' + img.width() * 2 + 'x' + img.height() * 2
var previewUrl = fileInfo.cdnUrl + '-/scale_crop/' + size + '/center/'
img.attr('src', previewUrl)
img.css('visibility', 'visible')
})
}
})
}
$('.image-preview-single').each(function() {
installWidgetPreviewSingle(uploadcare.SingleWidget($(this).children('input')), $(this).children('img'))
})
External CSS
This Pen doesn't use any external CSS resources.