How to Upload Files with UploadCare JavaScript API

H
Published in: JavaScript

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>
Published in: JavaScript

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch