File Uploader Quick Start
Uploading is one of the fundamental concepts of Uploadcare, an end-to-end file handling platform. The uploading experience starts with Uploadcare File Uploader, an ultimate File Uploader. This section covers how you jump straight into action.
What you get in the end is a uploader button in a specific spot of your page. Hitting the button activates the uploading dialog driven by tabbed navigation.
Here, the button goes like this,
The File Uploader allows you to choose files from over a dozen sources, handle multiple files in one go, implement our Distributed Upload Network, and more.
While you can learn more about File Uploader dependencies and installation in another section, the simplest implementation would go like this:
Discover a page you would like the File Uploader to appear on. Navigate to its <head>
,
and put the following snippet there:
<script>UPLOADCARE_PUBLIC_KEY = "YOUR_PUBLIC_KEY";</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8"></script>
The first <script>
element here sets the target Uploadcare project for your
uploads by defining the UPLOADCARE_PUBLIC_KEY
parameter.
Replace YOUR_PUBLIC_KEY
with a Public API Key of the
project you want to use with the File Uploader. This requires you to
Sign Up and discover the API key under project settings around
the Dashboard.
You can also set UPLOADCARE_PUBLIC_KEY
to the "demopublickey"
value which
points to the Uploadcare demo account and does not require signing up for
Uploadcare. Just note we wipe out all the files on our demo account every 24
hours.
The second <script>
in the example above performs the
CDN install of the “full” File Uploader bundle, minified. You
might want to learn more about File Uploader bundle types or
available install methods.
That’s it. From here, our File Uploader will work as a simple form element allowing folk around your page to upload files of any types and sizes. You can always learn more about in-depth uploader configuration here.
In case you don’t feel like putting <script>
elements here and there, check
out other install methods like NPM or
head straight over to our integrations.