Quick Start Guide
1
Add Javascript
Simple File Upload should be quick and easy to get up and running.
If you have any trouble, drop us a line at support@simplefileupload.com — we have the best customer support around.
Install the JavaScript library:
<script type="module" src="https://cdn.simplefileupload.com/simple-file-upload.latest.js"></script>
Add the web component to your page:
<simple-file-upload
public-key="YourPublicKey"
></simple-file-upload>
2
Customize
Configure the uploader with your preferred settings
Customize the uploader behavior with these attributes:
multiple="true|false"
- Show the multi-file uploader (default) or the single-file uploadermax-files="number"
- Set maximum number of filesmax-file-size="number"
- Set maximum file size in bytes
Single File Upload
Perfect for profile pictures or single document uploads

Multi-File Upload
Great for batch uploads and galleries

3
Handle Events
Listen for upload events and handle file data
Add event listeners to handle file uploads:
<script>
// Listen for change events on the uploader
document.addEventListener('DOMContentLoaded', function() {
const uploader = document.querySelector('simple-file-upload');
uploader.addEventListener('change', function(e) {
console.log('Upload details:', e.detail);
// Handle the uploaded files
const files = e.detail.allFiles;
// Your code here
});
});
</script>
4
Serve Files
Resize your images on demand
How do I resize on demand?
Easy! Simply add query parameters for width(w
) and height(h
). Add ?w=20&h=20
to the end of your image URL to resize to 20 by 20.
Example
// Original URL
const { cdnUrl } = event.detail.allFiles[0]; // From the upload event handler
// Resized to 200x200
const resized = cdnUrl + '?w=200&h=200';
// Using in an img tag
<img src={cdnUrl + '?w=300&h=300'} alt="Resized image" />
# Original URL
cdn_url = @upload.cdn_url # Saved in your database
# Resized to 200x200
resized_url = "#{cdn_url}?w=200&h=200"
# In ERB template
<%= image_tag "#{cdn_url}?w=300&h=300", alt: 'Resized image' %>
// Original URL
$cdnUrl = $upload->cdn_url; // Saved in your database
// Resized to 200x200
$resized = $cdnUrl . '?w=200&h=200';
// In HTML
echo '<img src="' . $cdnUrl . '?w=300&h=300" alt="Resized image">';
# Download original image
CDN_URL="https://your-saved-cdn-url.jpg" # Replace with your saved URL
# Download original image
curl $CDN_URL > original.jpg
# Download resized image (200x200)
curl "$CDN_URL?w=200&h=200" > resized.jpg
# Using wget
wget "$CDN_URL?w=300&h=300" -O resized.jpg