Skip to main content

jQuery file upload with Bootstrap progress bar

Performing an asynchronous file upload from the browser is a common problem with almost as many solutions as there are developers. The following solution is the best fit for my needs, and also works well with most popular browsers. Backwards compatibility is not an issue in this case which is great, because I can use the new technologies as they are supposed to be used.

Everything is put together in JSFiddle for a working example. I will continue to explain the parts below...

First, the input field needs to be styled as a button. The form tag is only present for us to be able to reset the file input field later on.

<form>
    <span class="fileUpload btn btn-default">
        <span class="glyphicon glyphicon-upload"></span> Upload file
        <input type="file" id="uploadFile" />
    </span>
</form>

.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

The Javascript is contained within one method which is executed when the file input is changed.

$("#uploadFile").change(function() {
    var formData = new FormData();
    formData.append('file', this.files[0]);
   
    $("#files").append($("#fileUploadProgressTemplate").tmpl());
    $("#fileUploadError").addClass("hide");
   
    $.ajax({
        url: '/url/json/',
        type: 'POST',
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener('progress', function(evt) {
                    var percent = (evt.loaded / evt.total) * 100;
                    $("#files").find(".progress-bar").width(percent + "%");
                }, false);
            }
            return xhr;
        },
        success: function(data) {
            $("#files").children().last().remove();
            $("#files").append($("#fileUploadItemTemplate").tmpl(data));
            $("#uploadFile").closest("form").trigger("reset");
        },
        error: function() {
            $("#fileUploadError").removeClass("hide").text("An error occured!");
            $("#files").children().last().remove();
            $("#uploadFile").closest("form").trigger("reset");
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    }, 'json');
});

When selecting a file for upload, a new AJAX request is performed. I use the FormData object to pass on the file to the backend as multipart/form-data. By attaching an event handler to the progress event I can set the width of the progress bar to the calculated percentage.

The error and success methods are simple handlers that hide the progress bar and either adds the file to the list on success or displays an error message on error.

In this particular case I am using jQuery templating, but since that project is abandoned I would recommend chosing another template engine...
Labels:

Comments

Post a Comment

Popular posts from this blog

Binding Enum with DescriptionAttribute in WPF

Binding an enumeration to a ComboBox can be done in several ways. In most cases you don't want to display the value itself, but a more user friendly description. One common approach is to use the DescriptionAttribute on the Enum values to supply a description for each value.  This is all possible in a very MVVM friendly way. First step is to add the  DescriptionAttribute  to the values of the enumeration. public enum MyValues { [Description("First value")] First, [Description("Second value")] Second } To retrieve the description from the enum we use a simple extension method. This method returns the value of the DescriptionAttribute if it exists, otherwise the string representation of the enum value is returned. public static string GetDescription(this Enum value) { var fieldInfo = value.GetType().GetField(value.ToString()); var attribute = fieldInfo.GetCustomAttributes(typeof(DescriptionAttribute), false).FirstOrDefault() as ...
2 comments
Read more

Binding a HTML-formatted string to a WPF WebBrowser control

Sometimes there is a need to display a HTML formatted string in a WPF application. There are a couple of ways to do this, but the most stright forward is to use a WebBrowser control and the NavigateToString method. This approach has one big flaw, you cannot use binding to a string out of the box, but I found a great solution through Stack Overflow which adds a bindable property to the  WebBrowser  control using  NavigateToString . The following class is all that is needed to add that behavior. A new depencency property named Html is introduced to the  WebBrowser  and the proper change action is performed in the OnHtmlChanged method. public class BrowserBehavior { public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached( "Html", typeof(string), typeof(BrowserBehavior), new FrameworkPropertyMetadata(OnHtmlChanged)); [AttachedPropertyBrowsableForType(typeof(WebBrowser))] public static string GetHtml(...
1 comment
Read more

The Cornball goes to Brunch with Chaplin

Lately I've been working pretty hard on different projects but not really stumbling upon anything blogworthy. The most recent project is quite interesting though, a single page, touch friendly, web application using the latest and greatest technologies. We've ended up with using Brunch with Chaplin , which is a very neat way of setting up a Backbone based single page web project with Brunch and Chaplin . Aside from this, I have my own little project that has lived on for almost 15 years already, The Cornball . From being a plain Windows application written i C an Win32 API, it has been ported to .NET using WPF, and is currently a Silverlight application hosted on Windows Azure. I could not find a better time to reanimate this project and create a new web based version, touch friendly, super optimized, awesome in any way. So I did... So please follow my journey at Github . It's going to take a while, I assure you, but I already have some ground work done. Meanwhile,...
2 comments
Read more