File uploads are something that, as developers, we have had to do for years and getting an ajax file uploader is always a better choice than redirecting the user to an upload page or even just reloading the page; keeping the user on the same page will improve the usability of your application.
Today we will be creating a simple ajax file uploader with drag and drop support.
The plugin
In this example I will be using the jQuery Upload File Plugin because it’s a simple to use and robust plugin that will get you up and running with an ajax upload in minutes.
When it comes to setting up the plugin it’s as simple as the website says, we first need to include jQuery, the JS file and also the CSS , for this example we will download this copy of the JS file to accommodate for preview images as well:
<link href="css/uploadfile.css" rel="stylesheet">
<script src="js/jquery.uploadfile.min.js"></script>After this is done we need to set up the HTML and using this plugin all we really need to do is set up an empty div and the plugin will take care of the rest. We don’t have to worry about typing the entire upload form , so let’s just pop this into our HTML:
<div id="upload">Upload</div>When it comes to our HTML that’s pretty much it, now all we have to worry about is the JavaScript.
The JavaScript
The first thing we need to do after we check if the document is ready is to call the uploadFile function to our empty div:
$(document).ready(function() {
$("#upload").uploadFile({
// Parameters here
});
});Now we need to think about what kind of functionality we want this upload form to have, firstly we want it to run the upload.php script so we need the url parameter with the link to that file, then we want to accommodate multiple file uploads so we need to set multiple to true, we also only want the user to upload images :
$("#upload").uploadFile({
url:"upload.php",
multiple: true,
allowedTypes: "jpg,jpeg,png,gif"
});One thing I want to do as well is change the error messages and we can do that by adding a couple more parameters:
$("#upload").uploadFile({
url:"upload.php",
multiple: true,
allowedTypes: "jpg,jpeg,png,gif",
doneStr:"Uploaded !",
extErrorStr:"You may only upload: ",
uploadErrorStr:"There was an upload error, please try again."
});In this part we changed the message when the file is uploaded, the default is “Done” and with doneStr I changed that to “Uploaded!” I also used the extErrorStr and uploadErrorStr to change the error message for when the user tries to upload something other than an image with uploadErrorStr.
That’s all the JavaScript we need, now we just have to add the CSS to improve the way it looks.
The CSS
Our uploader is functional and now we just need to make some changes to make our page more appealing. Firstly I surrounded our upload div with a section and added an h1 before the div and I will style all that like so:
body {
background: #2d3e50;
}
section {
width: 45%;
margin: auto;
margin-top: 50px;
}
h1 {
font-family: 'Open Sans', Arial, serif;
color: #edf1f4;
font-weight: 400;
text-align: center;
}As you can see I changed the page’s background to a blue color, set a width for the section and centered it on the page, then added some styles to our h1.
Next I center the entire interface as well and change the color of our upload button:
.ajax-file-upload {
font-family: 'Open Sans', Arial, serif;
background: #e84c3d;
box-shadow: 0 2px 0 0 #c13929;
color: #edf1f4;
}
.ajax-file-upload:hover {
background: #d24336;
box-shadow: 0 2px 0 0 #a62f23;
}
.ajax-upload-dragdrop {
margin: auto;
}After this we need to place our image properly so that the text and the progress bar floats to the right. I also changed the color of the text that displays the uploaded file name, the upload bar’s background and then some final touches:
.ajax-file-upload-image img {
float: left;
margin-right: 10px;
border-radius: 3px;
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.ajax-file-upload-image img:hover {
box-shadow: 1px 0 5px rgba(0,0,0,0.5);
}
.ajax-file-upload-filename {
color: #edf1f4;
}
.ajax-file-upload-bar {
background-color: #8dbf4a;
}
.ajax-file-upload-progress {
border: none;
margin: 0;
margin-right: 10px;
width: 45%;
}
.ajax-file-upload-statusbar {
margin: 20px auto;
border: 1px solid rgba(255,255,255,0.5);
height: 100px;
}That’s it! Take a look at the final result here.
Conclusion
As you can see, implementing and customizing this kind of interface is a really simple process nowadays and this brings a huge usability boost to your website. Not reloading will keep your users’ eyes focused on your website and less load time is just a better improvement all around.
