Use my own button for uploading


#1

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')
    );
  });
});

#2

Hi!

This example uses widget API (widget.onChange event). The dialog API is different and it doesn’t have the onChange method, that’s why this technique is not working with your custom button. Are there any specific reasons for using dialog API instead of using the widget?