UploadCare, like FileStack, lets users upload files to the cloud from their local computer or they can pull existing files from online cloud storage services like Google Drive, Dropbox, OneDrive and more. UploadCare offers a simple JavaScript based widget so you can add file uploading capabilities to any web page, including file upload forms and email builders, with a few lines of code.

This example shows how to add the UploadCare file upload widget to a web page and immediate preview the content of the file. The widget also shrinks the large images so they take less storage space in your account. The uploaded files are served via UploadCare CDN.

The system-dialog data attribute can be set to true if you would like to use the native system upload dialog. Please note that users will not be able to select files from cloud services when the native dialog is presented. Only images-only can be set to false to allow users to upload files of any MIME type and not just image files.

<script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script>

<script src="https://ucarecdn.com/libs/widget/2.10.3/uploadcare.min.js" charset="utf-8"></script>

<script>
  UPLOADCARE_PUBLIC_KEY = '<<YOUR KEY>>';
  (function () {
    uploadWidget = uploadcare.Widget('[role=uploadcare-uploader]');
    uploadWidget.onUploadComplete(function (file) {
      $('img.preview').attr('src', file.cdnUrl);
      uploadWidget.value(null);
    });
  })();
</script>