All posts in the topic Posting Multiple Files Using the Web (Short link)
Summary
- There are 4 posts — by 1 authors — in this topic.
- Latest post made by Michael JasonSmith at 2009 Jun 22 01:43 UTC
| From | File | Date |
|---|---|---|
| Michael JasonSmith | multiple-files-scaled.jpg | 2008 Sep 29 23:59 UTC |
| Michael JasonSmith | delete.png cancel.png page_white_delete.png | 2009 Jun 22 01:43 UTC |
I am working on an interface to allow users of GroupServer to add multiple
files from the Web. The use-case is as follows.
Kate wants to share some photos from the face to face meeting the
group held yesterday. As she is already logged in to the website,
she decides to use the Web interface. Going to the Meeting topic,
she finds the Add a Post interface. She writes a short message,
and adds the first photo to the post, repeating the steps for adding
the file for each of her photos.
There are two prototype interfaces that we have developed.
1. http://groupserver.org/file-upload-prototypes/attach.xml
2. http://groupserver.org/file-upload-prototypes/attach2.xml
The first is based on a paper prototype that Dan and I worked on, a picture of
which I have posted below. It uses JavaScript to pop up a file-selector field
for every file.
The second interface is based on the jQuery Multiple File Upload Plugin
http://www.fyneworks.com/jquery/multiple-file-upload/
It shows a single file-selector field, but keeps a list of files that it
displays below the file-selector field.
I have no preference for either, with each having advantages and disadvantages.
I am going to conduct some user-trials with each interface, as I have *no*
idea which is better. As ever your opinion is sought, and valued, Dear Reader.
The following file was added to this topic:
I have updated the GroupServer code that handles message processing. The main
change is to allow multiple files to be posted using the web. While the
back-end code is now in place, the user-interface still only allows a single
file to be added. The only user-visible change is that the "Message posted"
message, which is shown on the Topic and Start a New Topic pages after a
message has been posted, is now a link to the new message.
Once we fix the MIME-types on our development platforms I will add the
JavaScript goodness that will allow multiple files to be added using the Web.
I have added JavaScript code to allow multiple files to be uploaded to a topic from the one file-input element. Because of the heavy use of JavaScript, I will need to do quite a bit of testing before the code goes live. I use “progressive enhancement”, so JavaScript is not required to add a single file to a topic. JavaScript is required to add multiple files, because this is not handled by the HTML 4.01 standard. When HTML 5 forms are supported the JavaScript can be dropped. http://dev.w3.org/html5/spec/Overview.html#file-upload-state One day. One glorious day.
Multiple files can now be posted via the Web on OnlineGroups.Net. Progressive enhancement is used to add this feature to the page, so if the browser does not support JavaScript a single file should still be added. The new JavaScript code is mostly based around Multiple File Upload plugin for jQuery http://www.fyneworks.com/jquery/multiple-file-upload/ In some short user-evaluations I found that this worked better than an alternative I proposed http://groupserver.org/r/post/2S7ExyY0u5dX46i1K9JnxU The Multiple File Upload plugin adds a hidden file-input element every time a file is added, and then clears the visible input element. The visible list of files is a copy of the same data. The “X” link next to each file name is connected to a function that deletes the line from the files list, and deletes the associated input element. I tried different variants for the “X” link. Icons — such as the ones below — can look too much like file icons or bullets. Looking like a bullet is also the problem with a dash (-). I though about the words “Remove”, “Cancel, or “Delete”, but they are ambiguous. In the end I went for a bold “X” with the tool-tip “Remove this file from files list”. The trickiest part of the entire exercise was to convince Zope Formlib not to play with the data. I did this by adding some *more* JavaScript, to rename the form-fields before they were handed back to the server. This allows the From, and Message fields to be checked by Formlib, but the files can pass through without being altered. I did try and convince Formlib to accept a list of files, but it caused too many problems when it tried to render the widget for it. Some CSS work may be called for, to make the files-list spaced out correctly, but everything is functional.
The following files were added to this topic:
This site is provided by OnlineGroups.Net, where you can start your own free online groups site, using the open source web-based mailing list manager GroupServer.