Solved

Dynamic Form input type="file"

Posted on 2008-06-25
22
2,744 Views
Last Modified: 2013-11-19
Hi,

This code, as the body of an HTML document, uploads the user selected file as expected:

<iframe src="/scripts/blank.html" name="backFrame" id="backFrame"></iframe>
<form method="POST" id="postForm" action="/cgi-bin/upload" enctype="multipart/form-data" target="backFrame">
<input type="file" id="inptfle" name="inptfle" class="bttn impbttn1">
<input type="submit" id="subbttn" class="bttn impbttn2" value="Import">
</form>

All well & good, but when I try to add these elements dynamically IE v6 doesn't send the full file information, just the name as if it was a standard parameter - I have checked this with a network sniffer and confirmed that this is the case.

I can simulate this scenario by removing the 'name' property from the 'file' element in the plain HTML document and suspect that this may be related to the problem but I have checked (using IE Developer Toolbar) and the name does appear to be the present.

Any ideas would be welcome - a simple snippet that is known to work under IE v6 and dynamically creates a form with just a single input/file element would be a start.

I have tried numerous options including creating the element using both document.createElement and formobject.innerHTML but nothing has worked. The code that works well under Safari (OS X) but always fails under IE v6 (W XP).


0
Comment
Question by:ralphcarey
  • 12
  • 5
  • 5
22 Comments
 

Author Comment

by:ralphcarey
Comment Utility
Any thoughts at all on this subject would be welcome. There is obviously something simple that I am missing about dynamically creating an upload form but I can't work out what it is and I have spent an inordinate amount of time on something that really should be easy!

0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
What happens if you remove the target attribute?  What type of file is at the action value?

bol
0
 

Author Comment

by:ralphcarey
Comment Utility
Hi bol,

As you would expect, If I remove the target attribute the iframe isn't used so a new page is loaded but the same issues occur - it works fine on Safari but not at all on IE.

The program /cgi-bin/upload is a compiled Perl app which processes the uploaded file. I have put in some debugging lines so information about the file being uploaded is logged, but IE doesn't pass any.

According to the (Apache) web server logs, when the plain HTML page is used IE doesn't even attempt to access the web server after the submit button is pressed, it just displays a 'page not found' message without even trying. Using the dynamic page I can see the /cgi-bin/upload app being loaded but, as I mentioned in my first mail, IE doesn't pass file info to it.

0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Thanks for the details and response.  I know you did mention some of the stuff and sorry to have you repeat but it did help to confirm and get the details.

Does the HTML validate?  You can use the validator at http://validator.w3.org if you don't have another.  I am just curious about the form page.  A possible cause could be some error in the html.  The code above looks normal.  The target attribute was the only thing I wasn't sure I had seen used like that before so that is why I asked for the test without it.

Can you upload any files on this server using a form?  Have you tried similar code on another server (if you have the option)?  I am not an Apache expert but another thought is whether some setting in Apache is making it so none of these would work.

Let me know about this or if you have a question.

bol
0
 

Author Comment

by:ralphcarey
Comment Utility
Hi bol,

Thanks for the further response.

The code for the static HTML page validates as okay, the only error was with a historical reference to 'xmlns' in the 'head' tag.

I can upload files using exactly the same code when I use Safari rather than IE. I do not have the option to use a 3rd party server to test the client or server code on.

The thought that I might have configured something wrong on the Apache server has been a nagging worry so I compared the packets leaving the client from the static & dynamic HTML pages with a network sniffer. It confirmed the debugging info from the app on the server that it is only being sent the file name, not the full multipart form file info like 'content-disposition' when I use IE rather than Safari.

I stil think this must be something incredibly simple that I am doing wrong. Using the iframe is only so that the file can be uploaded without a page reload so I do not think that is the issue and, as discussed in previous emails, the same problem occurs even when it is not used.

If you, or anyone else, has a few lines of working client code that does a file upload that is known to work under IE that would be a start.

Ralph

0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Hi guys,

Just wild-ass-guessing, but since iframes are often used to attack, could IE6 be incorrectly sensing this as a cross-site scripting thing and preventing the upload?
0
 

Author Comment

by:ralphcarey
Comment Utility
Hi Jason,

I wouldn't be at all surprised if IE was doing something and not giving any messages but I don't think it is specifically the iframe that is the issue because the upload still does not work even when it is removed.

I also use an iframe to transfer data elsewhere in the app and it works perfectly, the difference being that the other data being sent is not a 'file' element.

Do you, or anyone else, know of any good debugging or tracing tools for IE? I use 'Web Inspector' for Safari and that seems to do a reasonable job of reporting issues so something similar for IE might help.

Loads of other sites upload files so it must be reasonably straightforward but I can't find any code (even after a huge amount of time spent googling) that creates a simple file upload form dynamically.

0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
The only one I know of is the Developer Toolbar and you have that already.
0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 250 total points
Comment Utility
>> Do you, or anyone else, know of any good debugging or tracing tools for IE? <<

I have started to use PageSpy for IE development testing.  Doesn't really have a Javascript debugger though but has been the best tool I have found for IE (that didn't cause system problems).  It is the favorite of at least one other really good expert here (I can't remember who).  See http://www.sembel.net/ for the program if you are interested.

>> I can't find any code (even after a huge amount of time spent googling) that creates a simple file upload form dynamically. <<

What part of your form is dynamic?  Maybe that is the problem but I don't see a sign of it in what you have posted here.  The HTML looks good that you have posted (the basic html for a form to upload a file).

Is Perl the only server language your server will use?  At least that is what I assume is the language of the file in the cgi-bin/upload directory.  It is odd this is working in Safari though but, if you want another page to try, then let me know what server scripts you can use and I will try to provide a basic page to test with.

bol
0
 

Author Comment

by:ralphcarey
Comment Utility
Hi bol,

Thanks for the info about PageSpy, I've installed it and it looks as if it gives a lot more info than the basic Developers toolbar, although none of it relevant here as far as I can ascertain.

Just to reiterate the issue:

The static code (in my initial note) works fine, with or without the iframe (my later comment about 'page not found' can be ignored, I think that was a temporary buffering problem). The problem occurs when I create the form dynamically use document.createElement etc. Inspecting the generated code appears to be exactly the same as that on the static page but it doesn't actually work! Clicking on the 'file' input allows file selection, then clicking on the submit button sends the form to the server but instead of the file contents being sent, only the file name is sent as if the input type was 'text' rather than 'file'.

The servers (dev on my laptop & a remote testing one) are both under my control so I can install anything that will be useful. They both run OS X so natively support Perl and PHP.

As far as I can work out tho', the problem isn't with the server as a capture of packets leaving the client shows that it is not even trying to send the file but I'm happy to try anything to resolve

Just as test, I'll use the 'attach file' option to upload a tiny file along with this message, my bet is that it will upload perfectly.


analmostemptyfile.doc
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Thanks for that response.  I still need to look through it closer I think (and when I am less tired) but PageSpy may actually be more helpful here than I thought.  Not for Javascript debugging but to see the html made by the script.  After the point when the page should've made the form use PageSpy to view the page.  The best option would be to click on the form.  Look in the DHTML tab to see the html source as it was generated by the browser.  How does that look?

Is the iframe tag being created dynamically?  What specific is being made and also what is the method for putting in attributes?  I know that the order and method used for filling the form tag's attributes can be buggy in some browsers and versions.  That could very well be the problem here.  Seeing the script you are using will help.  For example earlier IE version couldn't create an iframe with createElement.

Sorry I overlooked the importance of you mentioning dynamic.  I didn't think it was actually making the form but I see now I must've just missed or misunderstood that part.  The details of that script and how it is inserted will be helpful if PageSpy's DTHML tab won't show you the problem.

Let me know how this helps or if you have a question.  I hope this is clear but it is late. :)

bol
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:ralphcarey
Comment Utility
Hi Bol,

Thank you for your continued attention, it is much appreciated!

To simplfy the output I have created a test page with the absolute minimum number of elements (note that the iframe is not there as I think it was an unecessary complication at this stage). This is the dynamically generated code (via PageSpy, only £10, a bargain!):

<BODY bgColor=#ffffff>
<DIV id=anchor>
<!-- This script generates the HTML that follows -->
<SCRIPT language=javascript src="/scripts/test.js" type=text/javascript></SCRIPT>

<FORM id=postForm action=/cgi-bin/upload method=post enctype="multipart/form-data">
<INPUT id=inptfle style="CURSOR: pointer" type=file name=inptfle>
<INPUT id=subbttn style="CURSOR: pointer" type=submit value=Import name=subbttn>
</FORM>
</DIV>
</BODY>

I've tried generating the elements using both 'createElement' and 'createNamedElement' as well as setting attributes with 'setAttribute' or directly using syntax like 'objId.attributename = value', it doesn't seem to make any difference, neither does whether the attributes are set before or after the element is appended to the parent object although I haven't tried every single combination of these so I'm not writing the element creation method or order of adding attributes off as causes of the problem.

Naturally enough, if I copy the generated form code to the static page, it works perfectly okay!

The Experts Exchange pages 'manually' collect the form objects together before sending them to the server, so I am going to give that a try next.







0
 

Author Comment

by:ralphcarey
Comment Utility
Since the solution to this problem is evidently less obvious than I originally envisaged, I've created some standalone test files which contain only relevant code.

Please find following (in a single document, so the individual files will have to be separated):

dynamicform.html - uses Javascript to create a file upload form, it works under Safari but does not work under IE and is the basis of the issue I am experiencing

staticform.html - this is just a few lines of html to create a file upload form, it works under IE & Safari

uploadtest.pl - a short Perl script to display information (to the error log and destination page) about the elements being sent to it. If Perl is installed on your file server it should just need putting into the cgi-bin directory and the permissions set to 'execute'.




uploadfileproblem.txt
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
I'm starting to wonder if this isn't a Perl problem (it's been sooooooo long since I used perl) or a perl + windows + asp issue?

Do you have the capacity to switch to a different scripting language and try uploading via PHP or ASP?
0
 

Author Comment

by:ralphcarey
Comment Utility
Hi Jason,

I know for certain that if the form/input/file element does not include a 'name' attribute (as opposed to just an id) then the upload will not work because the Perl script will not pick up the data whether the client is IE or Safari.

However, as far as I can see from network sniffing (in a previous life I was a routing/switching guy), the IE client just does not send the appropriate file information from a form that is created dynamically rather than one created using static HTML.

ASP is not an option because the servers I use are OS X based. I do not know PHP but if you have a script that does a similar job to the Perl one I uploaded then I would be very glad to install that as a diagnostic tool.

I am still convinced that I am missing something really simple but, as far as I can tell, I have taken out all the unrelated variables and the code still doesn't work. Let me know if there is any way I can simplify the examples so that the problem environment can be recreated as easily as possible.

For what it is worth, when using Safari as a client, the submit button has to be clicked a second time if there is not a slight delay between the file selection and the first click. I do not think this is relevant to the actual issue but thought I should mention it.




0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Before getting all radical, try chaging this:

<INPUT id=inptfle style="CURSOR: pointer" type=file name=inptfle>

to

<INPUT id="inptfle" style="CURSOR: pointer" type="file" name="inptfle">
0
 

Author Comment

by:ralphcarey
Comment Utility
Hi Jason,

I can see where you are going with this and I have a suspicion that the problem I am experiencing does have a solution as simple as the one you suggest.

However, the browsers I am using add quotes as they see fit when given an id. So if the id is a single word with no unusual characters (E.g. 'inptfle') then it will be created as plain text but if contains whitespace or something similar (E.g. 'inpt fle') then it will automatically be enclosed in double quotes as per your suggestion. As far as I can seen there is no way to force this to happen with dynamically created elements.

0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
1) Try it with the static form...

2) You ought to be able to alter the javascript to force a single or double quote in there...
0
 

Author Comment

by:ralphcarey
Comment Utility
The static form already has double quotes around the names & IDs and works with or without them on both IE & Safari.

As the browser has control of how the element appears the only way I can see of forcing double quotes into the dynamic page output is to put spaces into the IDs. This does force the quotes but the page stops working even with Safari so I'm not sure we are moving forward!

0
 

Author Comment

by:ralphcarey
Comment Utility
I've tidied up the in the test scripts even more, please check them out in the attached file.



uploadfileproblem.txt
0
 

Accepted Solution

by:
ralphcarey earned 0 total points
Comment Utility
I discovered that the cause of the problem was the 'enctype' attribute of the form.

Despite Microsoft's, and everyone elses, documentation, it needs to be set using frmObj.encoding="multipart/form-data" rather than in the standard way that I was doing it.

Anyway, the upload functions fine now. Thank you to bol & Jason for the input.

0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Thanks for posting what you found.  I hadn't realized you were using script for that part until after you posted what you found.  Some browsers do seem to use enctype in script but, as you found, encoding needs to be used in the other cases.

I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now