- Patch #28483 by Steven: JavaScript enabled uploading.

  Comment from Steven: It does this by redirecting the submission of the form to a hidden <iframe> when you click "Attach" (we cannot submit data through Ajax directly because you cannot read file contents from JS for security reasons).  Once the file is submitted, the upload-section of the form is updated.  Things to note:

    * The feature degrades back to the current behaviour without JS.
    * If there are errors with the uploaded file (disallowed type, too big, ...), they are displayed at the top of the file attachments fieldset.
    * Though the hidden-iframe method sounds dirty, it's quite compact and is 100% implemented in .js files. The drupal.js api makes it a snap to use.
    * I included some minor improvements to the Drupal JS API and code.
    * I added an API drupal_call_js() to bridge the PHP/JS gap: it takes a function name and arguments, and outputs a <script> tag. The kicker is that it preserves the structure and type of arguments, so e.g. PHP associative arrays end up as objects in JS.
    * I also included a progressbar widget that I wrote for drumm's ongoing update.php work. It includes Ajax status updating/monitoring, but it is only used as a pure throbber in this patch. But as the code was already written and is going to be used in the near future, I left that part in. It's pretty small ;). If PHP supports ad-hoc upload info in the future like Ruby on Rails, we can implement that in 5 minutes.

1 files changed, 59 insertions, 0 deletions

diff --git a/misc/upload.js b/misc/upload.js
new file mode 100644
index 000000000..48f403448
--- /dev/null
+++ b/misc/upload.js
@@ -0,0 +1,59 @@
+// Global killswitch
+if (isJsEnabled()) {
+  addLoadEvent(uploadAutoAttach);
+}
+
+/**
+ * Attaches the upload behaviour to the upload form.
+ */
+function uploadAutoAttach() {
+  var acdb = [];
+  var inputs = document.getElementsByTagName('input');
+  for (i = 0; input = inputs[i]; i++) {
+    if (input && hasClass(input, 'upload')) {
+      var uri = input.value;
+      var button = input.id.substr(5);
+      var wrapper = button + '-wrapper';
+      var hide = button + '-hide';
+      var upload = new jsUpload(uri, button, wrapper, hide);
+    }
+  }
+}
+
+/**
+ * JS upload object.
+ */
+function jsUpload(uri, button, wrapper, hide) {
+  var upload = this;
+  this.button = button;
+  this.wrapper = wrapper;
+  this.hide = hide;
+  redirectFormButton(uri, $(button), this);
+}
+
+/**
+ * Handler for the form redirection submission.
+ */
+jsUpload.prototype.onsubmit = function () {
+  var hide = $(this.hide);
+  // Insert progressbar and stretch to take the same space.
+  this.progress = new progressBar('uploadprogress');
+  this.progress.setProgress(-1, 'Uploading file...');
+  this.progress.element.style.width = '28em';
+  this.progress.element.style.height = hide.offsetHeight +'px';
+  hide.parentNode.insertBefore(this.progress.element, hide);
+  // Hide file form
+  hide.style.display = 'none';
+}
+
+/**
+ * Handler for the form redirection completion.
+ */
+jsUpload.prototype.oncomplete = function (data) {
+  // Remove progressbar
+  removeNode(this.progress);
+  this.progress = null;
+  // Replace form and re-attach behaviour
+  $(this.wrapper).innerHTML = data;
+  uploadAutoAttach();
+}
\ No newline at end of file