jQuery File Upload Widget
(With Integrated Cloud Storage)
100% Serverless File Upload Widget
Powered by Upload.io
DMCA Compliant โข GDPR Compliant โข 99.9% Uptime SLA
Supports: Rate Limiting, Volume Limiting, File Size & Type Limiting, JWT Auth, and more...
Installation
Install via NPM:
npm install jquery @upload-io/jquery-uploader
Or via YARN:
yarn add jquery @upload-io/jquery-uploader
Or via a <script>
tag:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://js.upload.io/jquery-uploader/v3"></script>
Usage
Step 1) Initialize the uploader
plugin
Call this once only โ at the start of your app โ before calling $(x).uploader()
.
$.uploader.init({
apiKey: "free"
});
Step 2) Display the Upload Widget
To display a file upload dialog on click โ Try on CodePen
$(() => {
$("button").uploader({
onComplete: files => {
if (files.length === 0) {
console.log('No files selected.')
} else {
console.log('Files uploaded:');
console.log(files.map(f => f.fileUrl));
}
}
});
});
To display a file upload dropzone inline on the page โ Try on CodePen
$(() => {
$("div").uploader({
dropzone: {
width: "600px",
height: "375px"
},
onUpdate: files => {
if (files.length === 0) {
console.log('No files selected.')
} else {
console.log('Files uploaded:');
console.log(files.map(f => f.fileUrl));
}
}
});
});
The Result
All callbacks receive an Array<UploadWidgetResult>
:
{
fileUrl: "https://upcdn.io/FW25...",
filePath: "/uploads/example.jpg",
editedFile: undefined,
originalFile: {
fileUrl: "https://upcdn.io/FW25...",
filePath: "/uploads/example.jpg",
accountId: "FW251aX",
originalFileName: "example.jpg",
file: { ... },
size: 12345,
lastModified: 1663410542397,
mime: "image/jpeg",
metadata: {
...
},
tags: [
"tag1",
"tag2",
...
]
}
}
๐ API Support
๐ File Management API
Upload.io provides an Upload API, which supports the following:
- File uploading.
- File listing.
- File deleting.
- And more...
Uploading a "Hello World"
text file is as simple as:
curl --data "Hello World" \
-u apikey:free \
-X POST "https://api.upload.io/v1/files/basic"
Note: Remember to set -H "Content-Type: mime/type"
when uploading other file types!
Read the Upload API docs ยป
๐ Image Processing API (Resize, Crop, etc.)
Upload.io also provides an Image Processing API, which supports the following:
Read the Image Processing API docs ยป
Original Image
Here's an example using a photo of Chicago:
https://upcdn.io/W142hJk/raw/example/city-landscape.jpg
Processed Image
Using the Image Processing API, you can produce this image:
https://upcdn.io/W142hJk/image/example/city-landscape.jpg
?w=900
&h=600
&fit=crop
&f=webp
&q=80
&blur=4
&text=WATERMARK
&layer-opacity=80
&blend=overlay
&layer-rotate=315
&font-size=100
&padding=10
&font-weight=900
&color=ffffff
&repeat=true
&text=Chicago
&gravity=bottom
&padding-x=50
&padding-bottom=20
&font=/example/fonts/Lobster.ttf
&color=ffe400
Full Documentation
Uploader Documentation ยป
Need a Headless (no UI) File Upload Library?
Try Upload.js ยป
Can I use my own storage?
Yes: Upload.io supports AWS S3 on Upload Plus plans.
Upload.io offers its own built-in storage for ease and simplicity (default).
You can change this to AWS S3 on a folder-by-folder basis in the Upload Dashboard.
๐ Create your Upload.io Account
jQuery Uploader is the jQuery file upload component for Upload.io โ The File Upload Service for Web Apps:
Create an Upload.io account ยป
Building From Source
BUILD.md
License
MIT