File Uploader

var $ = uploadcare.jQuery;
$('body').append('It works!');javascript

<script>
  UPLOADCARE_PUBLIC_KEY = 'demopublickey';
</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>html

<input type="hidden" role="uploadcare-uploader" name="my_file_input" />html

npm install uploadcare-widgetbash

import uploadcare from 'uploadcare-widget'javascript

<input id="uploader" type="hidden" />html

const widget = uploadcare.Widget("#uploader", { publicKey: 'demopublickey' });javascript

<script>
  UPLOADCARE_PUBLIC_KEY = 'demopublickey';
  UPLOADCARE_LOCALE = 'ru';
  UPLOADCARE_CLEARABLE = true;
</script>html

<input type="hidden" role="uploadcare-uploader"
  data-public-key="demopublickey"
  data-images-only
/>html

<input data-option="true" />
<input data-option="any-value" />
<input data-option="" />
<input data-option />html

<input data-option="false" />
<input data-option="disabled" />html

<input id="uploader" type="hidden" />html

const widget = uploadcare.Widget("#uploader", {
  publicKey: 'demopublickey',
  imagesOnly: true,
  crop: '300x200'
});javascript

<script>
  UPLOADCARE_TABS = 'url file facebook';
</script>html

<input type="hidden" role="uploadcare-uploader" name="my_file"
  data-tabs="url file facebook"
/>html

<input type="hidden" role="uploadcare-uploader" name="my_files"
  data-multiple="true"
/>html

<input type="hidden" role="uploadcare-uploader" name="my_file"
  data-preview-step=""
  data-image-shrink="1024x1024"
/>html

<input type="hidden" role="uploadcare-uploader" name="my_files"
  data-multiple=""
  data-image-shrink="640x480"
/>html

UPLOADCARE_LOCALE = 'en';
UPLOADCARE_LOCALE_TRANSLATIONS = {
  buttons: {
    cancel: 'Cancel',
    remove: 'Remove',
    choose: {
      files: {
        one: 'Choose a file',
        other: 'Pick files'
      },
      images: {
        one: 'Choose an image',
        other: 'Load images'
      }
    }
  }
};javascript

function pluralize(number) {
  // do something
  return 'some_subkey';
}javascript

UPLOADCARE_LOCALE_TRANSLATIONS = {
  file: {
    one: 'Only one file! :(',
    some: 'Only %1 files. Upload more.',
    many: '%1 files!! That\'s a lot.'
  }
};
UPLOADCARE_LOCALE_PLURALIZE = function(n) {
  if (n === 1) return 'one';
  if (n > 1 && n <= 10) return 'some';
  return 'many';
};javascript

<input type="hidden" role="uploadcare-uploader" name="my_file"
  data-crop=""
/>html

<input type="hidden" role="uploadcare-uploader" name="my_file"
  data-crop="free, 16:9, 4:3, 5:4, 1:1"
/>html

<input type="hidden" role="uploadcare-uploader" name="my_file"
  data-crop="4:3"
/>html

<input type="hidden" role="uploadcare-uploader" name="my_file"
  data-crop="400x300 upscale"
/>html

const widget = uploadcare.Widget("[role=uploadcare-uploader]");

widget.onDialogOpen((dialog) => {
  function uploadFromClipboard(e) {
    let data = e.clipboardData;
    if (!!data && !!data.items.length) {
      // check if clipboard data is image
      if (data.items[0].type.indexOf("image") != 0) {
        alert("No image in the clipboard");
        return;
      }
      let blob = e.clipboardData.items[0].getAsFile();
      dialog.addFiles("object", [blob]);
    }
  }
  window.addEventListener("paste", uploadFromClipboard);
});javascript

// get a widget reference
const widget = uploadcare.SingleWidget("[role=uploadcare-uploader]");

// listen to the "upload completed" event
widget.onUploadComplete(fileInfo => {
  // get a CDN URL from the file info
  console.log(fileInfo.cdnUrl);
});javascript

// get a widget reference
const widget = uploadcare.MultipleWidget("[role=uploadcare-uploader]");

// listen to the "change" event
widget.onChange(function (group) {
  // get a list of file instances
  group.files().forEach(file => {
    // once each file is uploaded, get its CDN URL from the fileInfo object
    file.done(fileInfo => {
      console.log(fileInfo.cdnUrl);
    });
  });
});javascript

// get a widget reference
const widget = uploadcare.MultipleWidget("[role=uploadcare-uploader]");

// listen to the "upload completed" event
widget.onUploadComplete(groupInfo => {
  // get CDN URL from group information
  console.log(groupInfo.cdnUrl);
});javascript

// create a new dialog object
const dialog = uploadcare.openDialog(null, '', {
  multiple: false // set to true for multi-file uploads
});

// get a file or group instance
dialog.done(res => {
  // once a file or group is uploaded, get its CDN URL
  res.promise().done(info => {
    console.log(info.cdnUrl);
  });
});javascript

// get widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]");

let cameraRecDuration = null;
let recStart = null;
let recEnd = null;

// calculate webcam recording duration
document.body.addEventListener("click", e => {
  // user clicks "start recording"
  if (e.target.classList.contains("uploadcare--camera__button_type_start-record")) {
    recStart = new Date().getTime();
  }
  // user clicks "stop recording"
  if (e.target.classList.contains("uploadcare--camera__button_type_stop-record")) {
    recEnd = new Date().getTime();
    cameraRecDuration = (recEnd - recStart) / 1000;
    console.log("Duration: ", cameraRecDuration);
  }
});javascript

// get widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]")
// get dialog object to access its API
widget.onDialogOpen(dialog => {
  // listen to "file added" event
  dialog.fileColl.onAdd.add(file => {
    console.log("File added", file)
  });
  // listen to "file removed" event
  dialog.fileColl.onRemove.add(file => {
    console.log("File removed", file)
  });
});javascript

// get widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]");

// listen to the "upload completed" event
widget.onUploadComplete(fileInfo => {
  // get source details from file information
  console.log(fileInfo.sourceInfo.source);
});javascript

.uploadcare--jcrop-tracker::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  /* URL of the overlay image */
  background-image: url(<https://i.imgur.com/hSbF6v0.png>);
  background-size: cover;
  background-position: center;
}

.uploadcare--jcrop-tracker:first-of-type{
  opacity: 1 !important;
  background-color: transparent !important;
}css

<input type="hidden" role="uploadcare-uploader" name="my_file" id="uploadcare-file" data-crop="2:3, 5:6, 16:9" />html

let currentPreset = '2:3';

document.addEventListener('click', e => {
  // user clicks on a crop preset icon
  if (e.target.classList.contains('uploadcare--crop-sizes__item') || e.target.classList.contains('uploadcare--crop-sizes__icon')) {
    // get the caption of the preset selected
    currentPreset = document.querySelector('.uploadcare--crop-sizes__item_current').dataset.caption;
    console.log(currentPreset);
  }
});javascript

// original base64 image
const b64data = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";

// convert dataURI to a File object
function dataURLtoFile(dataurl, filename) {
  let arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {type:mime});
}

// convert a base64 image to a File object
const fileToUpload = dataURLtoFile(b64data, "image");

// upload the file to Uploadcare
let upload = uploadcare.fileFrom("object", fileToUpload);

upload.done(fileInfo => {
  console.log("File uploaded: ", fileInfo.cdnUrl);
});javascript

// get widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]");

widget.onUploadComplete(fileInfo => {
  const preview = document.createElement("img");
  // create a preview of the uploaded image of 200px width
  preview.src = fileInfo.cdnUrl + "-/resize/200x/";
  // add the thumbnail to the page
  document.body.appendChild(preview);
});javascript

<input type="hidden" role="uploadcare-uploader" name="my_file" id="uploadcare-file" data-crop="free,1:1,2:3" />html

.uploadcare--crop-sizes__item {
  overflow: visible;
}
.uploadcare--crop-sizes__item:nth-child(1)::after {
  content: "Free form";
}
.uploadcare--crop-sizes__item:nth-child(2)::after {
  content: "Square";
}
.uploadcare--crop-sizes__item:nth-child(3)::after {
  content: "Portrait";
}css

<input type="hidden" role="uploadcare-uploader" id="uploadcare-file-1" data-btn-text="I'm the first buton" />
<input type="hidden" role="uploadcare-uploader" id="uploadcare-file-2" data-btn-text="I'm the second one" />
<input type="hidden" role="uploadcare-uploader" id="uploadcare-file-3" data-btn-text="And I am the third" />html

// get an array of widget references
const widgets = uploadcare.initialize();

// update each widget button text with the data-btn-text attribute's value
widgets.forEach(widget => {
  widget.inputElement.nextSibling.querySelector(".uploadcare--widget__button_type_open").innerHTML = widget.inputElement.getAttribute("data-btn-text");
});javascript

// get widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]");

// once a file is uploaded, output its URL and reset the widget
widget.onUploadComplete(fileInfo => {
  console.log(fileInfo.cdnUrl);
  widget.value(null);
});javascript

/* turn the "after" pseudo element of the dialog container's div into a hint */
.uploadcare--tab__content::after {
  content: "Wake up Neo... The Matrix has you... Follow the white rabbit🐇";
  padding: 1em;
  margin: 2em;
  background-color: #000;
  color: #00ff00;
  border-radius: 5px;
}css

const SECOND = 1000;

// record time limit
const TIME_LIMIT = 5 * SECOND;

const widget = uploadcare.Widget("[role=uploadcare-uploader]");

widget.onDialogOpen((dialog) => {
  // Listen to a click on the Start button
  dialog.dialogElement[0].addEventListener("click", (e) => {
    if (
      e.target.classList.contains(
        "uploadcare--camera__button_type_start-record"
      )
    ) {
      const stopBtn = dialog.dialogElement[0].querySelector(
        ".uploadcare--camera__button_type_stop-record"
      );

      // Diasplay countdown on Stop button
      let remaining = TIME_LIMIT;
      stopBtn.innerText = `Stop (in ${remaining / 1000}s)`;
      let counter = setInterval(() => {
        remaining -= 1000;
        if (remaining <= 0) {
          clearInterval(counter);
        }
        stopBtn.innerText = `Stop (${remaining / 1000}s)`;
      }, 1000);

      // Click Stop button (stop recording) after TIME_LIMIT
      setTimeout(() => {
        stopBtn.click();
      }, TIME_LIMIT);
    }
  });
});javascript