Fine Uploader Gallery View Demo
Home
Demos
Docs
Downloads
Blog
GitHub
Demos
Fine Uploader is the easiest javascript file uploader library to set up.
Code examples are provided, whether you are using a jQuery wrapper, or plain JavaScript.
Basic Setup
Gallery View
Manual Trigger
Validation
Upload to Amazon S3
Basic Setup
Want to upload files to your own server? You need only to include a CSS file, a JavaScript file, and handle the uploads on the server side according to the technology you are using. There are absolutely no other dependencies.
You can quickly set up an HTML page in order to use Fine Uploader:
Download and unpack the latest version of Fine Uploader.
Use one of the provided server scripts, or write your own.
Setup your HTML and JavaScript.
Upload!
Have a look at the following live demos for examples of common setups.
Gallery View for Images
In this demo, we're utilizing Fine Uploader 4's client-side image preview generation feature. Note that client-side previews are only supported in modern browsers (not IE9 and older). For more info, see the thumbnail feature docs.
This uploader is also restricted in
allowed extensions (jpeg, jpg, gif, and png)
This demo uses the default simple thumbnails template bundled with Fine Uploader UI. For details on customizing templates, see the styling documentation.
Note: File bytes are not actually being sent to the server for this demo due to limitations of the GitHub Pages server.
Upload files
View Code
No Dependencies jQuery
Fine Uploader Gallery View Demo
Manually Trigger Uploads & Edit File Names
The default behavior of Fine Uploader is to immediately attempt to upload files as they are selected. One option allows you to simply queue all files, and then start uploading at a later time by calling uploadStoredFiles() on your Fine Uploader instance. You can also easily allow your users to edit the names of each submitted file before uploading.
This Fine Uploader instance below also demonstrates the edit file name feature, which allows you to edit the name of any file before it is uploaded, simply by clicking on the "pencil" icon.
Note: File bytes are not actually being sent to the server for this demo due to limitations of the GitHub Pages server.
Select files
Upload
View Code
Validation
There are various options available to you when using Fine Uploader. In this demo, we've used a small subset of these options. To see all available options and their usage, please refer to Fine Uploader documentation on the Github repository.
We are implementing the following options in this demo:
restriction to jpeg, jpg, and txt files,
restriction to a maximum file size of 50 kB,
limit total number of submitted files to 3.
This demo uses the default template bundled with Fine Uploader UI. For details, see the styling documentation.
Note: File bytes are not actually being sent to the server for this demo due to limitations of the GitHub Pages server.
Upload files
View Code
Upload Files Directly to Amazon S3
Fine Uploader has always supported uploading to your own server. Now you can remove the complexity and inefficiency of handling uploads on your local server by delegating to Amazon. Upload files directly to Amazon's Simple Storage Service from your browser! Want to upload to S3 without any server-side code at all? Have a look at our S3 no-server demo instead!
Below is a fully-functional live demo that also includes the native preview/thumbnail generation feature. Here, you can try out Fine Uploader S3 by sending files to one of our S3 buckets! Yes, this actually does upload files to an S3 bucket! You can also download the file after a successful upload (by clicking on the thumbnail).
This example demonstrates:
Use of a custom domain for an S3 bucket
Sending an ajax request to your server when the file is in S3
Enabling advanced features, such as
Client-side preview generation (newer browsers)
Server-generated thumbnail display (older browsers)
Drag & drop
Retry of failed uploads
Chunking
Auto-resume of interrupted uploads
Deleting an uploaded file
Validation rules
Limit 5 "net" files per session
Max file size of 15 MB
The server-side code for this demo was written in PHP. You can easily duplicate this example in your project by following our Fine Uploader S3 getting started guide.
Please read the blog post on the Fine Uploader S3 module for more details.
Note: If you want to test the auto-resume feature, you must use any browser other than IE9 and older or stock Android and submit a large file 6-15MB. After at least 5MB have been uploaded (since each chunk is 5 MiB): close or refresh the page, re-submit the file, and watch Fine Uploader pick up from where it left off!
Upload files
View Code
Fine Uploader uses HTML5
Fine Uploader Logo
About Licensing Support Twitter Contributing
