I’ve created my own button to invoke the openDialog()
function but it doesn’t seem to work with the installWidgetPreviewMultiple()
function. If I use my button without the role="uploadcare-uploader"
I can open the dialog, select an image and click Add, the dialog closes but the previews aren’t showing up. But if I add the input role, the button behaves the same as previous but it creates a new button.
For my yellow button, my code is:
$label.on('click', function (e) {
e.preventDefault();
uploadcare.openDialog(null, {
imagesOnly: true,
multiple: true,
previewStep: true
})
.done(function (file, fileGroup, list) {
file.promise()
.done(function (fileInfo) {
console.log(fileInfo.cdnUrl);
});
console.log("DONE");
});
});
And for the widget, my code is:
function installWidgetPreviewMultiple(widget, list) {
widget.onChange(function (fileGroup) {
$('.progress-container').fadeOut();
$('.image-preview-multiple').addClass('with-content');
list.empty();
if (fileGroup) {
$.when.apply(null, fileGroup.files()).done(function () {
$.each(arguments, function (i, fileInfo) {
var src = fileInfo.cdnUrl + '-/scale_crop/250x250/center/';
list.append(
$('<div/>', {
'class': '_item'
}).append(
[$('<a></a>)', {
href: fileInfo.cdnUrl,
target: '_blank',
title: fileInfo.name
})
.append($('<img/>', {
src: src,
class: 'preview-img'
}))
])
);
});
});
}
});
}
$(function () {
$('.image-preview-multiple').each(function () {
installWidgetPreviewMultiple(
uploadcare.MultipleWidget('.btn-label'),
$(this).children('._list')
);
});
});