Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > cross browser multipart form handling

Reply
Thread Tools

cross browser multipart form handling

 
 
John Fereira
Guest
Posts: n/a
 
      09-02-2005
So, one of the limitations of multipart-form handling is that when an <input
type="file" ..> tag is used it will bring up a window which allows a user to
select a file for upload but won't allow the user to select multiple files.
As you may know, the tag produces a text input field with an adjacent button
for selecting a file from the local file system.

As I would like to be able to allow the user to upload an arbitrary number
of files and process them as a batch on the server side I came up with the
following solution:

I've added an onClick event to the input element like this:

<div id="files"><input class="textsmall" type="file" name="file-0" id="file-
0" size="70" value="Browse" onClick="FormUtil.addFile(this);"/></div>

The FormUtil.addFile() function creates a new input element and appends it
as a child of the element with an id of "files".

The first thing I noticed is that clicking in the text box initiates the
onClick event (not just clicking on the button as I would have hoped). To
handle this I can check the value. If it is zero length, I send an alert
message indicating to select the Browse button. Once the browse window pops
up and a file is select, the new input element is created and onClick
attribute is removed from the element just clicked (this allows changing
that input tag without creating a new element).

This works quite well in Firefox. However, it appears that the order of the
event handling is different for IE. In Firefox it appears that the browse
window is displayed first, and once the file has been selected, the onClick
event fires. In IE, it appears that the onClick event fires first and the
browse window isn't displayed until the event completes.

Does anyone have a cross browser solution?
 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      09-02-2005
John Fereira wrote:

> Does anyone have a cross browser solution?


onchange ?



never I though to use onclick for that filer
(with my IE needs to click overside the field)

--
Stephane Moriaux et son [moins] vieux Mac
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      09-03-2005
John Fereira wrote:
> So, one of the limitations of multipart-form handling is that when an <input
> type="file" ..> tag is used it will bring up a window which allows a user to
> select a file for upload but won't allow the user to select multiple files.
> As you may know, the tag produces a text input field with an adjacent button
> for selecting a file from the local file system.


On some browsers only the button is shown until a file is selected,
don't expect that the text field is always visible from the start.

>
> As I would like to be able to allow the user to upload an arbitrary number
> of files and process them as a batch on the server side I came up with the
> following solution:
>
> I've added an onClick event to the input element like this:
>
> <div id="files"><input class="textsmall" type="file" name="file-0" id="file-
> 0" size="70" value="Browse" onClick="FormUtil.addFile(this);"/></div>
>
> The FormUtil.addFile() function creates a new input element and appends it
> as a child of the element with an id of "files".
>
> The first thing I noticed is that clicking in the text box initiates the
> onClick event (not just clicking on the button as I would have hoped). To


The element is both the field and the button, so I guess a click on
either is a click on the element. There is no way to code an on-click
for just the text area or just the button.

> handle this I can check the value. If it is zero length, I send an alert
> message indicating to select the Browse button. Once the browse window pops


That would annoy the heck out of me, why not just do nothing?

> up and a file is select, the new input element is created and onClick
> attribute is removed from the element just clicked (this allows changing
> that input tag without creating a new element).


But means that the behaviour changes with no sign to the user that it
has. Again, potentially confusing and annoying.

>
> This works quite well in Firefox. However, it appears that the order of the
> event handling is different for IE. In Firefox it appears that the browse
> window is displayed first, and once the file has been selected, the onClick
> event fires. In IE, it appears that the onClick event fires first and the
> browse window isn't displayed until the event completes.


I think you have a number of usability issues here that can be avoided
by using a separate button to create the extra input. When the button
is clicked, add another input.

You may want to add a 'delete' button too to get rid of extra inputs
that might be created in error - have fun with it!



--
Rob
 
Reply With Quote
 
John Fereira
Guest
Posts: n/a
 
      09-03-2005
RobG <(E-Mail Removed)> wrote in
news:43193a6e$0$517$(E-Mail Removed):

> John Fereira wrote:
>> So, one of the limitations of multipart-form handling is that when an
>> <input type="file" ..> tag is used it will bring up a window which
>> allows a user to select a file for upload but won't allow the user to
>> select multiple files. As you may know, the tag produces a text input
>> field with an adjacent button for selecting a file from the local file
>> system.

>
> On some browsers only the button is shown until a file is selected,
> don't expect that the text field is always visible from the start.


In this case, the page is an administrative interface that will only be used
by a handful of people so I have some control over what browsers will be
used. Unfortunately a couple of those users are from a government agency
that is a bit MS shop so they'll be using IE. I've looked at it in opera it
appears there is some confusion as to what the value attribute means. On IE
and firefox setting the value dictates the text used on the button but on
opera it also uses that contents for the input box.
>
>>
>> As I would like to be able to allow the user to upload an arbitrary
>> number of files and process them as a batch on the server side I came
>> up with the following solution:
>>
>> I've added an onClick event to the input element like this:
>>
>> <div id="files"><input class="textsmall" type="file" name="file-0"
>> id="file- 0" size="70" value="Browse"
>> onClick="FormUtil.addFile(this);"/></div>
>>
>> The FormUtil.addFile() function creates a new input element and
>> appends it as a child of the element with an id of "files".
>>
>> The first thing I noticed is that clicking in the text box initiates
>> the onClick event (not just clicking on the button as I would have
>> hoped). To

>
> The element is both the field and the button, so I guess a click on
> either is a click on the element. There is no way to code an on-click
> for just the text area or just the button.
>
>> handle this I can check the value. If it is zero length, I send an
>> alert message indicating to select the Browse button. Once the browse
>> window pops

>
> That would annoy the heck out of me, why not just do nothing?


I could do that. Since the same people will be using the page I imagine
that it will only take one click in the text box to get the message.
>
>> up and a file is select, the new input element is created and onClick
>> attribute is removed from the element just clicked (this allows
>> changing that input tag without creating a new element).

>
> But means that the behaviour changes with no sign to the user that it
> has. Again, potentially confusing and annoying.


Actually, the behavior does change. The contents of the adjacent text field
box changes. Again, since it's only going to be used by a few people an
explanation of the expected behavior would prevent any confusion. It might
not be totally intuitive but it doesn't have to be.

>
>>
>> This works quite well in Firefox. However, it appears that the order
>> of the event handling is different for IE. In Firefox it appears that
>> the browse window is displayed first, and once the file has been
>> selected, the onClick event fires. In IE, it appears that the onClick
>> event fires first and the browse window isn't displayed until the
>> event completes.

>
> I think you have a number of usability issues here that can be avoided
> by using a separate button to create the extra input. When the button
> is clicked, add another input.


I thought about doing that but it would require an extra click to add an
additional file.
>
> You may want to add a 'delete' button too to get rid of extra inputs
> that might be created in error - have fun with it!


The server side will handle the form elements with empty text fields so a
delete isn't really necessary. There is also a Cancel button that will
remove all child elements of the "files" element then add one to start over.
Since the page will have limited and predictable usage (it will be used
about 2-3 times a day to upload 2-3 files at a time) I can play a bit with
the user interface without too much consideration for users running on old
browsers. For example, I may add some AJAX functionalit (using Direct Web
Remoting) that will do some filename validation before submitting the form.
After the files are uploaded they'll get renamed using a standard convention
based on some information in a backend database and the "release date"
provided by the users. The release date is selected using JSCalendar.


 
Reply With Quote
 
John Fereira
Guest
Posts: n/a
 
      09-03-2005
ASM <(E-Mail Removed)> wrote in news:4318e1f1$0
$1751$(E-Mail Removed):

> John Fereira wrote:
>
>> Does anyone have a cross browser solution?

>
> onchange ?


That just might work. I'll let you know.

> never I though to use onclick for that filer
> (with my IE needs to click overside the field)


I hadn't thouht to use onChange. The element is different from other form
elements in that it produces both a text field and a button but the events
seem to apply to both. An onClick would seem to apply to the button while
an onChange might be more appropriate for the text field.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML File Upload using enctype=multipart/form-data in form? Matt Java 8 05-26-2012 07:40 AM
How to retrieve form field value if form is EncType=multipart/form-dataForm? Li Zhang ASP .Net 4 02-27-2009 01:23 AM
MIME Structure Multipart/Mixed with attachment and Multipart/Alternative blaine@worldweb.com Perl Misc 1 04-04-2007 08:23 PM
Action called twice when form enctype is multipart/form-data Duncan Java 0 02-24-2006 11:18 AM
HTML File Upload using enctype=multipart/form-data in form? Matt HTML 1 10-12-2004 08:17 PM



Advertisments