Click here to Skip to main content
Click here to Skip to main content

Adding file index to file list in jQuery fileupload

, 28 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
How to add an 'index' to the file records apearing in fileupload jQuery plugin

Prologue

fileupload is a great jQuery plugin that enables asynchronous file uploads.
 
I have found it very useful, but encountered an obstacle when I began to rely on the position of file in a certain list.

Background

In Affectix, we create online messages and allow the user to upload images to attach to the message.
 
For example - if I want to create a message about my lost pet, I would upload images of the pet, and Affectix will attach those images to the message.
 
From different reasons, I decided to save the images in a list. It looks like this:
 
MessageObject
|
|--> Images = [img1, img2, img3, ....]

On a Second Look

If you consider the MessageObject's Editor-WebPage, you realize that the uploaded images appear on screen as a list. This list contains href encors that might GET/POST to the server - instructing the deletion of an image.

The Problem

 
We would like to be able to GET/POST the instruction: "Delete image at index 3", but fileupload does not provide an 'index' value on the file records.

The Solution

We enhance the fileupload plugin to include indexes.

The Details

fileupload comes with 2 .js files:
  1. jquery.fileupload.js
  2. jquery.fileupload-ui.js
In this solution, we modify the second file: jquery.fileupload-ui.js.

Step 1

Add a support function ('_set_indexes') that queries the fileupload DOM, and creates the desired indexes. Note: The indexes are stored in the jQuery 'data' object:
//
// jquery.fileupload-ui.js
//
(function ($) {
    'use strict';
    
    // The UI version extends the basic fileupload widget and adds
    // a complete user interface based on the given upload/download
    // templates.
    $.widget('blueimpUI.fileupload', $.blueimp.fileupload, {
        options: {
	    ...
        },
 
	...
		
	/// ------------------------------------------------------------
        _set_indexes: function() {
        	$('$.files .template-download').each(function(index, obj) {
				var jObj = $(obj);
				jObj.data('index', index);
				//debug(jObj.data('index'));
			});
        },
	/// ------------------------------------------------------------

	...
		
    });
 
}(jQuery));

Step 2

Launch the support function whenever the list changes (the bold lines). For example, when a file just finished uploading, or when a file has been removed from the list:
(function ($) {
    'use strict';
    
    // The UI version extends the basic fileupload widget and adds
    // a complete user interface based on the given upload/download
    // templates.
    $.widget('blueimpUI.fileupload', $.blueimp.fileupload, {
        options: {
			
		...
			
		done: function (e, data) {
	            var that = $(this).data('fileupload');
	            if (data.context) {
	                data.context.each(function (index) {
	                    var file = ($.isArray(data.result) &&
	                            data.result[index]) || {error: 'emptyResult'};
	                    if (file.error) {
	                        that._adjustMaxNumberOfFiles(1);
	                    }
	                    $(this).fadeOut(function () {
	                        that._renderDownload([file])
	                            .css('display', 'none')
	                            .replaceAll(this)
	                            .fadeIn(function () {
	                                // Fix for IE7 and lower:
	                                $(this).show();
	                                that._set_indexes();
	                            });
	                    });
	                });
	            } else {
	                that._renderDownload(data.result)
	                    .css('display', 'none')
	                    .appendTo($(this).find('.files'))
	                    .fadeIn(function () {
	                        // Fix for IE7 and lower:
	                        $(this).show();
	                        that._set_indexes();
	                    });
	            }
	        },
				
		...
			
		destroy: function (e, data) {
	            var that = $(this).data('fileupload');
	            if (data.url) {
	                debug(data);
	                $.ajax(data)
	                    .success(function () {
	                        that._adjustMaxNumberOfFiles(1);
	                        $(this).fadeOut(function () {
	                            $(this).remove();
	                            that._set_indexes();
	                        });
	                    });
	            } else {
	                data.context.fadeOut(function () {
	                    $(this).remove();
	                    that._set_indexes();
	                });
	            }
	        }
	        			
		...
        },
 
	...
		
    });
 
}(jQuery));

Step 3

Fix the 'delete' Ajax call:
(function ($) {
    'use strict';
    
    // The UI version extends the basic fileupload widget and adds
    // a complete user interface based on the given upload/download
    // templates.
    $.widget('blueimpUI.fileupload', $.blueimp.fileupload, {
        options: {
			
		...
 
        },
 
	_deleteHandler: function (e) {
            e.preventDefault();
            var button = $(this);
            var context = button.closest('.template-download');
            e.data.fileupload._trigger('destroy', e, {
                context: context,
                url: button.attr('data-url'),
                type: button.attr('data-type'),
                dataType: e.data.fileupload.options.dataType ,
                data: { 'index': context.data('index') }
            });
        },
 
	...
		
    });
 
}(jQuery));

Step 4

On the server side, you will receive the 'index' variable. You can take it from there.

Summary

In this code tip, we implemented an enhancement to the jquery fileupload plugin. We added an index to the file list, and fixed the 'delete' call to include that index. The attached code refreshes the index everytime the list changes. As a result, we are able to delete files using only their index and context.
 
Good Luck!
Or (David) Berkovitch

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Or (David) Berkovitch
Architect ENGetica
Israel Israel
A Computers Engineer with accumulate 10 years of experience in varying software and business fields. Natural Entrepreneur. Technology and business enthusiast.

Comments and Discussions

 
QuestionThanks. PinmemberMember 1032642610-Dec-13 9:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141030.1 | Last Updated 28 Aug 2011
Article Copyright 2011 by Or (David) Berkovitch
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid