<script>
  UPLOADCARE_PUBLIC_KEY = "demopublickey";
</script>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
<div>
  <input type="hidden" role="uploadcare-uploader" name="my_file" id="uploadcare-file" data-images-only data-crop="1:1"/>
</div>
// get a widget reference
var widget = uploadcare.Widget('[role=uploadcare-uploader]');

// listen to the "upload completed" event
widget.onUploadComplete(function (fileInfo) {
  // get CDN URL from file information. Here you can generate a thumbnail using the file URL, save the URL to DB, etc. File UUID and other info can be extracted from fileInfo as well
  console.log(fileInfo.cdnUrl);
  // lets generate and render a thumbnail
  // create a new image element
  var preview = new Image();
  // set image source
  // "/resize/100x/" will rescale our image to 100px in width proportionally
  // "/format/auto/" will convert the image to WebP if supported by the browser
  preview.src = fileInfo.cdnUrl + "-/resize/100x/-/format/auto/";
  // add the preview to the page
  document.body.appendChild(preview);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.