Quick Start Guide

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>

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 uploader
max-files="number" - Set maximum number of files
max-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

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>

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