Widget visual tweaks

Color Buttons

One of the things you can do is change upload button color. This can be easily done using CSS.

.uploader-green-button .uploadcare-widget-button-open {
    background-color: #16d061;
}
.uploader-green-button .uploadcare-widget-button-open:hover {
    background-color: #15c25a;
}
.uploader-yellow-button .uploadcare-widget-button-open {
    background-color: #fbc701;
}
.uploader-yellow-button .uploadcare-widget-button-open:hover {
    background-color: #edc218;
}
  
<p class="uploader-normal-button">
  <input type="hidden" role="uploadcare-uploader">
</p>
<p class="uploader-green-button">
  <input type="hidden" role="uploadcare-uploader">
</p>
<p class="uploader-yellow-button">
  <input type="hidden" role="uploadcare-uploader">
</p>
  

Crazy Button

You can do something really crazy with CSS.

.uploader-demo-crazy .uploadcare-widget-button-open {
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  padding: 9px 14px;
  background-color: #e22092;
  background: linear-gradient(#e85eac, #e02a91);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  -webkit-transition: -webkit-transform .25s;
     -moz-transition: -moz-transform .25s;
          transition: transform .25s;
}
.uploader-demo-crazy .uploadcare-widget-button-open:hover {
  background: linear-gradient(#e14296, #d71876);
  -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
          transform: scale(1.05);
}
.uploader-demo-crazy .uploadcare-widget-dragndrop-area {
  line-height: 3.4;
  margin-top: -1.8em;
}
  
<p class="uploader-demo-crazy">
  <input type="hidden" role="uploadcare-uploader" data-clearable="">
</p>
  

Uploading Circle Color

Uploading circle fill color can be changed via CSS color property and backgroud color can be changed via border-color property.

#demo-circle {
  width: 3em;
  height: 3em;
  color: #56a8ff;
  border-color: #d4dfe5;
}
  
$(function() {
  (new uploadcare.Circle('#demo-circle')).renderer.setValue(.33);
});
  
<div id="demo-circle"></div>
  

.uploader-demo-circle .uploadcare-widget-status-loaded .uploadcare-widget-status {
  display: inline-block !important;
}
.uploader-demo-circle .uploadcare-widget-circle--canvas {
  color: #56a8ff;
  border-color: #d4dfe5;
}
  
<p class="uploader-demo-circle">
  Try to upload new file:<br>
  <input type="hidden" role="uploadcare-uploader" data-clearable="">
</p>
  

Try to upload new file:

Custom Progress Bar

If you want to replace builtin progress bar, you need to listen current widget object. You can obtain it in onChange callback. It will be file object for regular widget and group object for multiple widget. Then you need to listen to progress event and change your progress bar in accordance with current uploadProgress.

This is done in following installProgressBar function. It receives two arguments: Uploadcare widget instance and your progress bar DOM element. Anything else, including animation, is done via CSS.

One file uploader:

Multiple files:

Uploaded Image Preview

When user selects some image, it will be shown in the upload dialog. But what to do if you want to show image preview right on the page near to uploading widget. Such preview is more informative for user than file name and size.

.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');
      });
    }
  });
}
$(function() {
  $('.image-preview-single').each(function() {
    installWidgetPreviewSingle(
      uploadcare.SingleWidget($(this).children('input')),
      $(this).children('img')
    );
  });
});
  
<div class="image-preview-single">
  <img src="" alt="">
  <input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-public-key="1c86ca998ba22e75fbc6" 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="1c86ca998ba22e75fbc6" value="9dd2f080-cc52-442d-aa06-1d9eec7f40d1">
</div>
  

You have full control of size and position, it can be changed via CSS.

Image preview for multiupload widget may look different:

.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')
    );
  });
});
  
<div class="image-preview-multiple">
  <input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-multiple="" data-public-key="1c86ca998ba22e75fbc6" value="cd334b26-c641-4393-bcce-b5041546430d~11">
  <div class="_list"></div>
</div>
  

You can choose different images or just rearrange existing ones: all changes in widget will be reflected in the thumbnail list.

Questions?

We're always happy to help with code or other questions you might have! Search our site for more information or send us an email!