Permalink
Browse files

- Added multiple file selection support for browsers which support th…

…e "multiple" attribute on file input fields and provide a files attribute for the selected files (File API), but provide no XHR file upload capability (Opera 11.10).

- Updated preview image loader to support multiple preview images in one upload row and added the handler parameter to the parseResponse method (jQuery File Upload UI).
- Updated Example Code to fully support the multiFileRequest option as well as iFrame based file uploads with multiple selected files.
- Removed the requirement to define url, uploadDir and thumbnailsDir from the client-side example code. Urls are supposed to be generated on server-side and exposed via JSON.
- Moved the code to load existing files out of the Extended UI Plugin into the example JS file.
  • Loading branch information...
1 parent 5ee5f18 commit 27dd778fac7701ee9137c3693265095c290f6d29 @blueimp committed Apr 21, 2011
Showing with 217 additions and 134 deletions.
  1. +5 −4 README.md
  2. +4 −3 README.txt
  3. +12 −8 example/application.js
  4. +3 −3 example/index.html
  5. +54 −36 example/jquery.fileupload-uix.js
  6. +84 −38 example/upload.php
  7. +32 −28 jquery.fileupload-ui.js
  8. +23 −14 jquery.fileupload.js
View
@@ -43,11 +43,12 @@
* Google Chrome - 7.0, 8.0, 9.0, 10.0
* Apple Safari - 5.0 ¹
* Mozilla Firefox - 3.6, 4.0
-* Opera - 10.6 ², 11.0 ², 11.1 ²
-* Microsoft Internet Explorer 6.0 ², 7.0 ², 8.0 ², 9.0 ²
+* Opera - 10.6, 11.0, 11.1 ²
+* Microsoft Internet Explorer 6.0, 7.0, 8.0, 9.0 ³
-¹ Drag & Drop is not supported on the Windows version of Safari.
-² MSIE and Opera have no support for Drag & Drop, multiple file selection or individual upload progress indication.
+¹ Drag & Drop is not supported on the Windows version of Safari.
+² Opera has no suppport for Drag & Drop or upload progress, but support for multiple file selection since version 11.1.
+³ MSIE has no support for Drag & Drop, multiple file selection or upload progress.
## License
Released under the [MIT license](http://creativecommons.org/licenses/MIT/).
View
@@ -48,10 +48,11 @@ Browser Support (tested versions)
- Google Chrome - 7.0, 8.0, 9.0, 10.0
- Apple Safari - 5.0 ¹
- Mozilla Firefox - 3.6, 4.0
- - Opera - 10.6 ², 11.0 ², 11.1 ²
- - Microsoft Internet Explorer 6.0 ², 7.0 ², 8.0 ², 9.0 ²
+ - Opera - 10.6, 11.0, 11.1 ²
+ - Microsoft Internet Explorer 6.0, 7.0, 8.0, 9.0 ³
¹ Drag & Drop is not supported on the Windows version of Safari.
-² MSIE and Opera have no support for Drag & Drop, multiple file selection or individual upload progress indication.
+² Opera has no suppport for Drag & Drop or upload progress, but support for multiple file selection since version 11.1.
+³ MSIE has no support for Drag & Drop, multiple file selection or upload progress.
License
-------
View
@@ -1,5 +1,5 @@
/*
- * jQuery File Upload Plugin JS Example 4.3.2
+ * jQuery File Upload Plugin JS Example 4.4
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
@@ -12,20 +12,24 @@
/*global $ */
$(function () {
+ // Initialize jQuery File Upload (Extended User Interface Version):
$('#file_upload').fileUploadUIX({
- // The url to the upload handler script (required):
- url: 'upload.php',
- // The url path to the uploaded files directory (required):
- uploadDir: 'files/',
- // The url path to the thumbnail pictures directory (required):
- thumbnailsDir: 'thumbnails/',
// Wait for user interaction before starting uploads:
autoUpload: false,
- // Blob size setting for chunked uploads (remove or set to null to disable):
+ // Upload bigger files in chunks of 10 MB (remove or set to null to disable):
maxChunkSize: 10000000,
// Request uploaded filesize prior upload and upload remaining bytes:
continueAbortedUploads: true,
// Open download dialogs via iframes, to prevent aborting current uploads:
forceIframeDownload: true
});
+
+ // Load existing files:
+ $.getJSON($('#file_upload').fileUploadUIX('option', 'url'), function (files) {
+ var fileUploadOptions = $('#file_upload').fileUploadUIX('option');
+ $.each(files, function (index, file) {
+ fileUploadOptions.buildDownloadRow(file, fileUploadOptions)
+ .appendTo(fileUploadOptions.downloadTable).fadeIn();
+ });
+ });
});
View
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<!--
/*
- * jQuery File Upload Plugin HTML Example 4.1
+ * jQuery File Upload Plugin HTML Example 4.1.1
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
@@ -21,8 +21,8 @@
</head>
<body>
<div id="file_upload">
- <form action="." method="POST" enctype="multipart/form-data">
- <input type="file" name="file" multiple>
+ <form action="upload.php" method="POST" enctype="multipart/form-data">
+ <input type="file" name="file[]" multiple>
<button type="submit">Upload</button>
<div class="file_upload_label">Upload files</div>
</form>
@@ -1,5 +1,5 @@
/*
- * jQuery File Upload User Interface Extended Plugin 4.3.2
+ * jQuery File Upload User Interface Extended Plugin 4.4
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
@@ -47,7 +47,7 @@
UploadHandler = function (container, options) {
var uploadHandler = this;
- this.uploadDir = this.thumbnailsDir = null;
+ this.url = container.find('form:first').attr('action');
this.autoUpload = true;
this.continueAbortedUploads = false;
this.forceIframeDownload = false;
@@ -89,14 +89,31 @@
});
};
+ this.buildMultiUploadRow = function (files, handler) {
+ var rows = $('<tbody style="display:none;"/>');
+ $.each(files, function (index, file) {
+ var row = handler.buildUploadRow(files, index, handler).show(),
+ cells = row.find(
+ '.file_upload_progress, .file_upload_start, .file_upload_cancel'
+ );
+ if (index) {
+ cells.remove();
+ } else {
+ cells.attr('rowspan', files.length);
+ }
+ rows.append(row);
+ });
+ return rows;
+ };
+
this.buildUploadRow = function (files, index, handler) {
+ if (typeof index !== 'number') {
+ return handler.buildMultiUploadRow(files, handler);
+ }
var file = files[index],
fileName = handler.formatFileName(file.name),
uploadRow = handler.uploadTemplate
.clone().removeAttr('id');
- uploadRow.attr('data-name', file.name);
- uploadRow.attr('data-size', file.size);
- uploadRow.attr('data-type', file.type);
uploadRow.find('.file_name')
.text(fileName);
uploadRow.find('.file_size')
@@ -113,34 +130,43 @@
};
this.getFileUrl = function (file, handler) {
- return handler.uploadDir + encodeURIComponent(file.name);
+ return file.url;
};
this.getThumbnailUrl = function (file, handler) {
- return handler.thumbnailsDir + encodeURIComponent(file.name);
+ return file.thumbnail;
+ };
+
+ this.buildMultiDownloadRow = function (files, handler) {
+ var rows = $('<tbody style="display:none;"/>');
+ $.each(files, function (index, file) {
+ rows.append(handler.buildDownloadRow(file, handler).show());
+ });
+ return rows;
};
this.buildDownloadRow = function (file, handler) {
+ if ($.isArray(file)) {
+ return handler.buildMultiDownloadRow(file, handler);
+ }
var fileName = handler.formatFileName(file.name),
fileUrl = handler.getFileUrl(file, handler),
+ thumbnailUrl = handler.getThumbnailUrl(file, handler),
downloadRow = handler.downloadTemplate
.clone().removeAttr('id');
- $.each(file, function (name, value) {
- downloadRow.attr('data-' + name, value);
- });
+ downloadRow.attr('data-id', file.id || file.name);
downloadRow.find('.file_name a')
- .attr('href', fileUrl)
.text(fileName);
downloadRow.find('.file_size')
.text(handler.formatFileSize(file.size));
- if (file.thumbnail) {
+ if (thumbnailUrl) {
downloadRow.find('.file_download_preview').append(
- $('<a href="' + fileUrl + '"><img src="' +
- handler.getThumbnailUrl(file, handler) + '"/></a>')
+ $('<a/>').append($('<img/>').attr('src', thumbnailUrl || null))
);
downloadRow.find('a').attr('target', '_blank');
}
downloadRow.find('a')
+ .attr('href', fileUrl || null)
.each(handler.enableDragToDesktop);
downloadRow.find('.file_download_delete button')
.button({icons: {primary: 'ui-icon-trash'}, text: false});
@@ -160,16 +186,20 @@
};
this.continueUploadCallBack = function (event, files, index, xhr, handler, callBack) {
- $.getJSON(
- handler.url,
- {file: handler.uploadRow.attr('data-name')},
- function (file) {
- if (file && file.size !== files[index].size) {
- handler.uploadedBytes = file.size;
+ if (typeof index !== 'undefined') {
+ $.getJSON(
+ handler.url,
+ {file: files[index].name},
+ function (file) {
+ if (file && file.size !== files[index].size) {
+ handler.uploadedBytes = file.size;
+ }
+ handler.uploadCallBack(event, files, index, xhr, handler, callBack);
}
- handler.uploadCallBack(event, files, index, xhr, handler, callBack);
- }
- );
+ );
+ } else {
+ handler.uploadCallBack(event, files, index, xhr, handler, callBack);
+ }
};
this.beforeSend = function (event, files, index, xhr, handler, callBack) {
@@ -199,7 +229,7 @@
var row = $(this).closest('tr');
$.ajax({
url: uploadHandler.url + '?file=' + encodeURIComponent(
- row.attr('data-id') || row.attr('data-name')
+ row.attr('data-id')
),
type: 'DELETE',
success: function () {
@@ -237,22 +267,10 @@
});
};
- this.loadFiles = function () {
- $.getJSON(uploadHandler.url, function (files) {
- $.each(files, function (index, file) {
- uploadHandler.buildDownloadRow(file, uploadHandler)
- .appendTo(uploadHandler.downloadTable).fadeIn();
- });
- });
- };
-
this.initExtended = function () {
uploadHandler.initDownloadHandler();
uploadHandler.initDeleteHandler();
uploadHandler.initMultiButtons();
- if (uploadHandler.loadFiles) {
- uploadHandler.loadFiles();
- }
};
this.destroyExtended = function () {
Oops, something went wrong.

0 comments on commit 27dd778

Please sign in to comment.