You can quickly set up an HTML page in order to use Fine Uploader:
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
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.
Since we need to catch click events on an HTML element, we will be using jQuery to handle events and selectors for the sake of simplicity.
You can obviously take it further with the optional jQuery wrapper demos.
Want to allow your users to edit file names before they are uploaded, in all browsers? No problem!
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:
In this demo, we are using the
itemLimit validation option to enforce a maximum item limit.
Default settings, but we include support for Twitter Bootstrap.
In order to style your uploader’s look, you can customize the template classes as you like.
We use here both Fine Uploader and Twitter Bootstrap’s CSS and add some styling reset.
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! You can also download the file after a successful upload.
This example demonstrates:
The server-side code for this demo was written in PHP. You can view the actual server-side code for this example in the Fine Uploader Server Github repository.
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!