gistfile1.js

// List of fp-files
var uploaded_media_fpfiles = [];

// Template to show the file (<Filename> [x]).
var media_file_html = _.template('<div>File: <a class="file" href="<%= url %>" target="_blank"><%= filename %>!</a> <a class="remove" href="javascript:void(0)">&times;</a></div>');

// Use the pickAndStore api from FilePicker with a callback to uploaded_media
$('.upload-media').click(function() {
		filepicker.pickAndStore({
			multiple: true
		},{}, uploaded_media);
	});

// Upload the list of files and update the view.
 var uploaded_media = function(fpfiles) {
		uploaded_media_fpfiles = uploaded_media_fpfiles.concat(fpfiles);
		show_media_files();
};


// Hide the view if no file, otherwise show all of them using the file template.
var show_media_files = function() {
		var i;

		$('.media_files').html('');

		if (uploaded_media_fpfiles.length == 0) {
			$('.media_files').hide();
		} else {
			$('.media_files').show();
		}

		for (i=0; i<uploaded_media_fpfiles.length; i++) {
			var fpfile = uploaded_media_fpfiles[i];
			$('.media_files').append(media_file_html(fpfile));
		}
	}

// On click [x], it removes the file from the list and refresh the view.
// I'm using the url to identify it, but optimatally it would be better to use a unique id.
	$('.remove').live('click', function() {
		var url = $(this).parent().find('.file').attr('href');

		uploaded_media_fpfiles = _(uploaded_media_fpfiles).reject(function(x) {
			return x.url == url;
		});

		show_media_files();
	});