JS-based file upload [#28483]

This patch adds JavaScript-based inline uploading (screenshot).

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.

Comment	File	Size	Author
#21	jsupload_2.patch	14.63 KB	Steven
#21
#17	jsupload_1.patch	14.63 KB	Steven
#17
#5	jsupload_0.patch	14.6 KB	Steven
#5
#1	progress.gif	1.22 KB	Steven
	jsupload.patch	14.71 KB	Steven

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Steven CreditAttribution: Steven commented 9 August 2005 at 01:39

File	Size
progress.gif	1.22 KB

This image belongs in the misc directory.

Comment #2

m3avrck CreditAttribution: m3avrck commented 9 August 2005 at 15:38

This sounds like a great and much needed feature! I'm curious as to how extendable this feature is because I would like to very soon create a window that can be opened from a link (maybe even through TinyMCE) to basically include links to documents on a Drupal website within the content itself, instead of merely "attaching" them to the end of the document. Taking this upload feature, along with better a file manager could create quite an awesome webbased FTP like program that I know many would find useful. I'll have to take a look at this patch much more closely very soon.

Comment #3

drumm

he/him

NY, US

CreditAttribution: drumm commented 10 August 2005 at 21:44

Works as expected and it degrades well (at first I didn't do a hard refresh and my browser wasn't seeing the new js or css).

Comment #4

drumm

he/him

NY, US

CreditAttribution: drumm commented 10 August 2005 at 21:44

Version:

4.6.0

Comment #5

Steven CreditAttribution: Steven commented 17 August 2005 at 00:41

File	Size
jsupload_0.patch	14.6 KB

Keeping up to date. Still needs confirmed testing on KHTML browsers like Konqueror and Safari, please.

Comment #6

Gabriel R. CreditAttribution: Gabriel R. commented 17 August 2005 at 15:58

I'd be happy to test on Safari (1.2 and 2/1.3) and other WebKit browsers and report the results here, but I can't apply the patch on any of my installs (too risky) and don't have the time to set up a new Drupal installation.

Steven, any chance for you to share a web page for me to test?

Thanks.

Comment #7

Stefan Nagtegaal CreditAttribution: Stefan Nagtegaal commented 17 August 2005 at 16:09

Maybe it is me, but Steven why do you bother about the fact that this will work on Safari? All other JS/AJAX we currently have in core doesn't work with Safari...

Is it something special, or is t just curiocity?

Stefan

Comment #8

Steven CreditAttribution: Steven commented 17 August 2005 at 16:35

Mostly because I can't test it, and Javascript is a fidgety business. But I have to admit I was surprised when I found out (recently!) that Drupal JS doesn't work in Safari. The features we check for are all basic W3C DOM stuff, I assumed Safari would support them.

Do we know why Safari doesn't work?

Comment #9

Crell CreditAttribution: Crell commented 17 August 2005 at 19:44

I'm not sure about Drupal in particular, but Safari is missing a LOT Of W3C DOM "stuff". Many functions are there, but stubbed out and do nothing. Others are badly implemented. It's closer to the standard than IE is, but with the missing functionality I'm not sure which is really easier to code for. I don't know if Konqueror is crippled in the same way, but I would suspect it is. (I've not gotten any decent Ajax to work in Konqueror myself, although I freely admit to not being an expert on the subject.)

Comment #10

Stefan Nagtegaal CreditAttribution: Stefan Nagtegaal commented 17 August 2005 at 21:31

Okay, I found out how to debug with Safari..

When I goto: '?q=node/add/$type', I get these errors:
- SyntaxError - Parse error (line 37)
drupal.js
- TypeError - Object (result of expression isJsEnabled) does not allow calls (line 3)
collapse.js
- TypeError - Object (result of expression isJsEnabled) does not allow calls (line 4)
autocomplete.js

Maybe you know what's wrong or what todo about it?

Comment #11

Thox CreditAttribution: Thox commented 18 August 2005 at 08:49

Status:

Needs review

» Needs work

After successfully attaching a file, the user can navigate away from the page without pressing submit. The attachment shows up in the table, but in this case the attachment isn't linked to the node.

Comment #12

m3avrck CreditAttribution: m3avrck commented 18 August 2005 at 14:17

Now I haven't had time to play with this patch yet, but that last comment gave me an idea.

Is there a JS check to see if the user is trying to navigate away from the page? For example, they are uploading a file and click a link in another app, all of a sudden that upload page they are on is replaced by some other page. A simple JS check for this saying "Do you want to leave this page and cancel the upload?" would certainly be a great usability boost and prevent this from happening.

Comment #13

tostinni CreditAttribution: tostinni commented 18 August 2005 at 14:53

Retaking this idea of controlling if user is living a page or not, I recently saw the new IPB permission panel demo, it makes an intense use of AJAX and provide a way to keep track if the user is living the page.
See the demo here.

Comment #14

Steven CreditAttribution: Steven commented 18 August 2005 at 15:29

Status:

Needs work

» Needs review

Thox: this is by design, and no different from submitting a file by doing a preview, and then navigating away from the edit page. "Changes made to the attachments list will not be permanent until you save this post."

The patch simply streamlines the workflow.

Comment #15

Dries CreditAttribution: Dries commented 18 August 2005 at 22:02

Status:

Needs review

» Needs work

Patch doesn't apply.

(BTW, is it me or is the progress bar somewhat toy-ish and somewhat flashy?)

Comment #16

Thox CreditAttribution: Thox commented 19 August 2005 at 08:39

When attaching two or more files with the same without pressing submit, the original file is overwritten and the table shows two files with the same name. After pressing submit, the table shows one file.

Comment #17

Steven CreditAttribution: Steven commented 19 August 2005 at 13:07

Status:

Needs work

» Needs review

File	Size
jsupload_1.patch	14.63 KB

Thox: this is also an existing behaviour/bug in upload.module. This patch does not affect any of the underlying file saving or storage mechanisms.

It simply introduces an asynchronous form submission and result display, but otherwise uses exactly the same code as the non-JS version.

Attached is an up-to-date, but otherwise unchanged version.

Comment #18

Bèr Kessels CreditAttribution: Bèr Kessels commented 19 August 2005 at 21:12

Steven: I will test this on KHTML, but might need some help, for I am very limited in time (read: reallyy have no time for testing). HOwever: in contrary to what Stefan says, the current ajax/js works well on konq. AND on safari (and beleive me I have a hell of a testing environment :))