body {
  margin: 16px;
}

p {
  margin: 8px 0;
}

code {
  font-family: monospace;
}

.image-preview-multiple ._list {
  padding-top: 20px;
}
.image-preview-multiple ._item {
  padding: 0 0 10px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100px;
  word-break: break-word;
  font-size: 12px;
  line-height: normal;
}
.image-preview-multiple ._item img {
  display: block;
  width: 80px;
  height: 80px;
  padding: 0 10px 6px;
}

function installWidgetPreviewMultiple(widget, list) {
  widget.onChange(function(fileGroup) {
    list.empty()
    if (fileGroup) {
      $.when.apply(null, fileGroup.files()).done(function() {
        $.each(arguments, function(i, fileInfo) {
          var src = fileInfo.cdnUrl + '-/scale_crop/160x160/center/'

          list.append($('<div/>', {class: '_item'}).append([$('<img/>', {src: src}), fileInfo.name]))
        })
      })
    }
  })
}
$(function() {
  $('.image-preview-multiple').each(function() {
    installWidgetPreviewMultiple(uploadcare.MultipleWidget($(this).children('input')), $(this).children('._list'))
  })
})