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 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

Single File Upload Widget

Multi-File Upload

Great for batch uploads and galleries

Multi-File Upload Widget
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" />