Written by Barbara Sawala. Updated on . First published on May 18, 2020, in Other
Integrating image uploads into your website can be tricky and time-consuming, especially when facing tight deadlines or working on small projects.
Fortunately, with Uploadcare, you can set up an image uploader in just minutes.
This tutorial will guide you through the process step by step. Let's get started!
After setting up your account, create your first project from the dashboard.
On the API Keys tab, you’ll find the Public Key for your project.
This key is needed to identify which account and project the uploaded file will belong to.
Copy this key to use it next.
To start using the Uploadcare File Uploader, you’ll need to install Uploadcare Blocks
— a JavaScript library for file uploading and processing.
Uploadcare Blocks contain multiple web components to easily add the file uploader, the image editor, adaptive images, and even more to your web app.
1. Start by connecting Uploadcare Blocks to the document and register Blocks:
2. Configure the uploader by adding <lr-config> tag.
Don’t forget to put your public key to the pubkey attribute instead of the YOUR_PUBLIC_KEY placeholder:
3. Finally, add the File Uploader component to your markup.
Uploadcare provides three solutions, so you can choose one that best fits your needs.
As an example, let's try regular mode:
This is it! Your file uploader is now ready to use.
You can continue to customize it.
Among other options,
you can set the maximum and minimum number of files that can be selected for a single upload, use a built-in cloud image editor,
validate files by their format or size, and allow different types of files to be uploaded, not just images.
Moreover, you have the option to customize the uploader's appearance using CSS.
Simply override the default CSS styles defined in the css-src attribute with your own CSS rules.
You have the option to quickly style elements or utilize the shadowStyles property for more advanced customization.
Uploadcare takes care of all your headaches related to picture uploading and adding images to your website or project:
instead of spending hours or days developing your own solution from scratch, you can add a few lines to your code and get a ready-made,
highly customizable image uploader in a matter of minutes.
This saves a ton of time and allows you to focus on the unique features of your app or website rather than reinventing the wheel again and again.
Uploadcare offers a comprehensive suite of image-handling services, covering image uploads, storage, delivery, transformations, and optimization.
Our CDN and robust cloud hosting infrastructure, allows every uploaded to Uploadcare Storage image to be delivered securely and reliably across 288K servers in 136+ countries and nearly 1,500 networks.
Uploadcare’s Upload API is user-friendly and accessible from both your backend and browser, enabling quick image uploads through our uploading network.
If you have additional questions about Uploadcare’s image-uploading service or want to dive deeper into the capabilities, you can read the documentation, ask the community, or just get in touch and schedule a demo.