This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website.
IE7+ (including IE10), Firefox, Safari (OS X), Chrome, IOS6, and Android are supported. Does NOT require Flash, jQuery, or any external libraries.
Uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome, and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere.
You can use any server technology. We have already seen implementations with:
ASP.NET ColdFusion Java Node.js Perl PHP Python
You can quickly set up an HTML page in order to use Fine Uploader:
You can use the following basic markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader Demo</title>
<link href="client/fineuploader.css" rel="stylesheet">
</head>
<body>
<div id="fine-uploader"></div>
<script src="client/fineuploader.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
// Pass the HTML element here
element: document.getElementById('fine-uploader'),
// or, if using jQuery
// element: $('#fine-uploader')[0],
// Use the relevant server script url here
// if it's different from the default “/server/upload”
request: {
endpoint: 'server/handleUploads'
}
});
}
window.onload = createUploader;
</script>
</body>
</html>
You can have a minimal setup without using neither jQuery nor Twitter Boostrap. You simply use the minimal HTML markup above. The relevant HTML tag and Javascript code for this demo are extracted on the right.
Here for the demo purposes, we active the debug mode (which defaults to false). You can see the logs in real time in your browser’s JavaScript console.
<div id="fine-uploader"></div>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
request: {
endpoint: 'server/handleUploads'
},
debug: true
});
}
window.onload = createUploader;
</script>
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader - Boostrapped Minimal Demo</title>
<link href="client/fineuploader.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Fine Uploader
-------------------------------------------------- */
.qq-upload-list {
text-align: left;
}
/* For the bootstrapped demos */
li.alert-success {
background-color: #DFF0D8;
}
li.alert-error {
background-color: #F2DEDE;
}
.alert-error .qq-upload-failed-text {
display: inline;
}
</style>
</head>
<body>
<div id="bootstrapped-fine-uploader"></div>
<script src="client/fineuploader.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader'),
request: {
endpoint: 'server/handleUploads'
},
text: {
uploadButton: '<i class="icon-upload icon-white"></i> Test me now and upload a file'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
},
debug: true
});
}
window.onload = createUploader;
</script>
</body>
</html>
In addition to the minimal out-of-the-box demo, we include here Fine Uploader’s jQuery wrapper.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader - jQuery Wrapper Minimal Demo</title>
<link href="client/fineuploader.css" rel="stylesheet">
</head>
<body>
<div id="jquery-wrapped-fine-uploader"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="client/fineuploader.js"></script>
<script src="client/js/jquery-plugin.js"></script>
<script>
$(document).ready(function () {
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: 'server/handleUploads'
},
debug: true
});
});
</script>
</body>
</html>
Head over one of the following pages to see how to customize further Fine Uploader.
Fine Uploader