Problem with <input type=file

jdthedj
jdthedj used Ask the Experts™
on
I have a form on our website which allows the user to upload a CV to us.  The form declaration has EncType="multipart/form-data", and the field on the form is <input type=file name="FileContents" Size=50>

We are getting a lot of emails from users saying that when they click the browse button the animated "working" icon shows but the system goes off into the wide blue.

We have tried to analyse what is common to the users and have discovered that there is no problem with those using Internet Explorer, but 90% of users using Firefox, Chrome, Safari, Mozilla etc have the problem.

Any ideas??
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
You need to post your code from the "View Source" for us to help you.  "View Source" is what the browser sees.

Author

Commented:
Thanks for the reply Dave.

Its a very simple form (written in ColdFusion - although this part is just HTML).  The problem only occurs when the button on the end of the *FileContents* field is clicked.

See attachment for the code.
FileUpload.txt
Most Valuable Expert 2015

Commented:
Yeah, please post the actual html. I see no reason a browser would hang on a plain html <input>.  It's such a core tag and doesn't do anything fancy.
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

Most Valuable Expert 2015

Commented:
Oops... our posts crossed.  

Looking at the code it seems possible they're either getting a javascript error.

A) Are you able to reproduce it yourself?
B) Are any of them tech savy enough to check FF's error console?

Author

Commented:
Thanks _agx_ - I cannot get the error in IE.  The users do not report an error - just that the file selected never arrives in the field on the form.  This is of course before they would click the *Upload* button, so the JS does not come into play.  

I have encountered the problem myself before in IE when uploading files to Inland Revenue.

Knowing the type of people we are dealing with I don't think they would be savvy enough to check the error console.  I will try to contact one or two to see if they can.
Most Valuable Expert 2015

Commented:
Weird.  Honestly the only time I've ever had problems with file input boxes is on old/slow computers.  If it's happening with a basic <input> just by clicking browse, then it suggests the browser or computer/sw is at fault. Because it's pure html at that point. I can't see any reason it wouldn't work unless the feature was being blocked somehow ...  So stupid question, do those users report the same problem with uploads on other sites?

Also, is this regular http or https?

Author

Commented:
I'll have to ask that question.  It's interesting that it does not appear to affect those using IE
Most Valuable Expert 2015

Commented:
Yeah it does seem odd.  But I'd be curious if the problem's consistent or intermittent and if you can glean any other patterns.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
"<CCFORM" is not HTML.  Something else must be in the "View Source" because no browser will recognize that.
Most Valuable Expert 2015

Commented:
Looks like he posted the CF source so we can run it and look at the generated html ourselves.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I don't have CF so I can't run it.  I would want to see what his server is generating for the page code anyway.  Browsers don't know anything about CF anyway.
Most Valuable Expert 2015

Commented:
Browsers don't know anything about CF anyway.

Lol, nobody said it did, being a server side language and all ;-)  The comment was just a pleasant hint that he probably assumed most people responding would be in the CF zone and running CF.  I'm sure he'd be happy to post the generated html for you if he gets a chance.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
The question is also in the HTML zone.  When you see differences in the way the browsers act, it is most often found in the page code found in the "View Source" because that's what the browser sees.

I look at all the zones because questions are often not really about the specific technology.  In the .NET and PHP zones, people often post server side code also.  When they post the "View Source", you find out whether their server code is working properly.  Sometimes it's not working because some piece of code or data is missing.
Most Valuable Expert 2015

Commented:
Yeah I'm very familiar with the process and believe me we're on the same page. It was just a polite way of saying have patience, I'm sure he'll get to it ;-)  I'd have posted it myself, but I'm not near CF right now.

Anyway, just fyi cfform is just a wrapper of a plain html <form> tag with a little extra javascript validation thrown in.  I doubt you'll find anything unusual in the html as he's using a plain <input> tag anyway. But you're welcome to look at it when the OP gets a chance to post it.

Edit: @jdthedj - Though it doesn't seem like you need a <cfform> anyway, since you're using any <cfinput> fields. May as well just use a plain <form>.

Author

Commented:
Thanks for all the discussion.  I have attached the *View Source* code.

@_agx_ I have always used cfform as a matter of habit. I wrote my own cf editor and it puts it in automatically.
FileUpload-2.htm
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
If that is the "View Source" in your browser, it shouldn't be running in any browser.  Did you open that thru an editor before posting it?  If so, please try again and save it directly and do not open it with anything but a plain text editor before you post it again.

Author

Commented:
I'm a bit confused.  I right-clicked in the browser and chose "View Source", then saved the file to disk.  Is that not correct?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I am almost certain you did something more.  The way that file is formatted is to display HTML in the browser, not to run it.  All the tags are replaced with HTML entities and each line is contained inside a div.  I just looked at that in IE and I think you clicked on "Formatted HTML View" when what we need is "HTML Source... Ctl+S".  Yes, I just tried it on my home page and that's what happened.  Try again, just use the first option "HTML Source... Ctl+S".

Author

Commented:
Thanks Dave - I have attached the new file.
FileUpload-3.htm
Dave BaldwinFixer of Problems
Most Valuable Expert 2014
Commented:
I get this when I try to send a file:

Timestamp: 4/18/2012 2:32:44 PM
Error: document.HomeForm.elements is not a function
Source File: file:///C:/Inetpub/wwwroot/ee/FileUpload-3.htm
Line: 199

Open in new window


I think that is supposed to be "document.forms.HomeForm....." or maybe just "HomeForm.elements("FileContents").value" without 'document' first.  http://www.w3schools.com/jsref/coll_form_elements.asp
Most Valuable Expert 2015
Commented:
I don't disagree the javascript validation syntax is wrong. I mentioned that several posts back.  But didn't you say the problem occurred when they clicked "browse" not the "upload" button?  

Btw: I'd really recommend switching to DOM syntax instead. Just give the input a unique "ID"

      <INPUT TYPE="File" NAME="FileContents" SIZE="50" id="FileContents">

    then use:

             fName = document.getElementById('FileContents').value;

Author

Commented:
I was in the process of replying when _agx_ added his comment.  I was going to say that I would change to getElementByID, but as pointed out the Javascript does not come into play when the use clicks the "browse" button.
Most Valuable Expert 2015

Commented:
True, but form.elements is kind of old school syntax ;) Unless you have to support really old browsers like IE4, I think it's better to use getElementById.

Are you positive the user's problem is with browse? Are you able to reproduce the problem?

Author

Commented:
The users indicate that the problem is with browse - they say control never comes back and the file chosen never appears in the input (file) field.  I cannot reproduce the problem because iot doesn't happen with Internet Explorer.

I emailed 4 people who had the problem asking for more info but they have not replied.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I didn't have any problem with Browse in Firefox11.  

I did notice that some of your javascripts are before the <head> element and although they may work there, they should really be inside the <head> element.  Also, there were no end tags like </body> and </html> so I was wondering if there was still something missing.

It would be better if you could give a link to check that page because some of your javascript isn't available this way.  If there is a problem with javscripts interfering with each other, we can't check that this way.

Author

Commented:
http://www.advancedpersonnel.co.nz/a/reg_step3.cfm.  Normally the user has filled in other forms to get there.
Most Valuable Expert 2015

Commented:
I cannot reproduce the problem because iot doesn't happen with Internet Explorer.

Yeah, but you can test it yourself with a diff browser like FF/Chrome/... right? There's no point using IE if you know it doesn't exhibit the problem.

I tried it with FF11, Safari 4, Opera 10 and had no problems with the browse button.  Only the javascript error mentioned earlier.

Author

Commented:
Thanks _agx_  Unfortunately at work we're not allowed to download other browsers etc.  Did the JavaScript actually throw an error that would be obvious to the user or just like IE with a small triangle in the task bar?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I uploaded a PDF file and didn't get any error this time.  Unless you are really tracking that page, I would remove the Google Analytics code.
Most Valuable Expert 2015

Commented:
Did the JavaScript actually throw an error that would be obvious to the user or just like IE with a small triangle in the task bar?

Only in one browser:

- In Opera 10, it displayed a popup message when the page loaded. But that's because your site is missing the /CFIDE mapping. So if you're using cfform validation, ajax, etc... anywhere on the site it won't work.

       JavaScript - http://www.advancedpersonnel.co.nz/CFIDE/scripts/masks.js
       Linked script not loaded

- In FF 11 nothing was visible until I displayed the error console:
     ie Tools > Web Developer > Error Console

- Safari 4 didn't throw any errors at all


       Unfortunately at work we're not allowed to download other browsers etc.

Oh boy .. if it's a public site that's downright silly.  Developers need access to the same tools as the typical visitor or they can't do their job ie properly test the site.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Yes, _agx_ is right.  Having only one browser to test a public site is kind of crippled.

Author

Commented:
Thanks for the continued help.  I have now changed the code on the form to be a plain form rather than cfform, and also changed the Javascript to getElementByID.

I agree with the need to have more browsers to test in, but the boss won't budge!

I'm not sure how to fix the Opera problem - I will have to talk to our web host company.

@Dave  - The Google Analytics code is embedded on each page by a template included at the top.
Most Valuable Expert 2015

Commented:
I'm not sure how to fix the Opera problem - I will have to talk to our web host company.


They need to create a virtual mapping for your web root or copy /CFIDE beneath your web root.
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=webservmgmt_6.html

I agree with the need to have more browsers to test in, but the boss won't budge!

I know it's like talking to a wall sometimes, but ..  aside from preventing you from doing your job, it also makes the site look bad.  Visitors have short attention spans.  When critical features don't work, many users just leave and never come back.  So it ultimately loses the company business - something most bosses care about  ;-) Edit: Not to mention all the extra time you'll end up spending trying to diagnose problems in the dark. It all adds up to wasted money.  I know you know all this .. but some bosses don't always see the connection.

Author

Commented:
Interestingly since I fixed the Javascript etc there have been no reported issues with uploading files.  I'm thinking the messages from users have not been quite correct in identifying the problem in the first place.

Thanks to both of you for your help with this.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Users tell you what they think they see which is really all they can do.  I've seen often that it may not have anything to do with the 'real' problem.  Glad to help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial