Skip to Content

Updated:

Due to some new information from Microsoft I wanted to update this weblog, please read the following link for more details. Users must submit a fully qualified path when you use the “input type=file” element in a Web application in Windows XP Service Pack 2

This topic has been covered twice now in the BSP message forums and I thought it might be a good idea to put the information together here to help those out that might have the same question in the future.

This is a common task that many web developers have to deal with. They have to create an upload form and let the user select a file from the local computer. This is handled quite nicely by the HTML form element

input type=”file”

, however most of you that have used this know that it creates a text field and a button together and the text for the button is generated automatically. This automatic generation of text is connected to the browser and you have no control over it. For example mine shows in German no matter what I do, even though everything about my browser display is English. (I have a German OS). So what options do you have for this issue?

Well, for starters you can check out File Input Field, it’s a great resource on the whole issue for web development in general. Then after you wet your lips there you can move on to our two threads, File browser and

Change label language.

Still not sastisified?<br>

<br>

Well let me make it a bit easier for you, here is the basics, put into nice text boxes for easy copy and paste:<br><br>

<textarea rows=”10″ cols=”79″>

<form method=”POST” enctype=”multipart/form-data”>

  <input type=”file” name=”myfile” style=”display:none” onchange=”fileName=this.value”> 

  <input type=”button” value=”open file” onclick=”myfile.click()”>

  <input type=”button” value=”show value” onclick=”alert(fileName)”>

</form>

</textarea>

<br>

This example is the raw basics of HTML and can easily be tested by copying this code to a blank HTML page and opening it in your browser.<br>

<br>

<b><u>Author:</u></b>[Craig Cmehil | https://forums.sdn.sap.com/profile.jspa?userID=118]

<br>

<textarea rows=”10″ cols=”79″>

<htmlb:content design=”design2003″>

  <htmlb:page title = “Test submit “>

    <htmlb:form id=”myform” method=”POST” enctype=”multipart/form-data”>

    <htmlb:inputField id=”myFile”

                visible=”true”

                width=”300px” /><br>

    <htmlb:listBox id=”filelist”

                width=”300px” />

    <script>

    function selectFolder(){

      var myText = “Browse for file”;

      var objShell = new ActiveXObject(“Shell.Application”);

      var ssfWINDOWS = 0;

      var objFolder;

      objFolder = objShell.BrowseForFolder(0, myText, 0, ssfWINDOWS);

      if (objFolder != null) {

         document.forms.myform.myFile.value=objFolder.Items().Item().Path;

         getFileList(objFolder.Items().Item().Path);

      }

    }

    function getFileList(id) {

      var FSO = new ActiveXObject(“Scripting.FileSystemObject”);

      var myStartingFolder = id;

      if ( myStartingFolder != null || myStartingFolder != “” ) {

        var myFolder = FSO.GetFolder( myStartingFolder );

        var myFileList = new Enumerator(myFolder.files);

      // First clear all entries

        document.forms.myform.filelist.options.length = 0;

      for (; !myFileList.atEnd(); myFileList.moveNext()) {

          document.forms.myform.filelist.options[document.forms.myform.filelist.options.length] = new Option(myFileList.item().name,FSO.GetFileName(myFileList.item()));

      }

     } // start folder found

               

    } // getFileList

    </script>

    <htmlb:button id=”myButton”

            onClientClick=”selectFolder()”

            text=”Browse” />

    </htmlb:form>

  </htmlb:page>

</htmlb:content>

</textarea>

<br>

This example is goes a bit more complex and has to be noted that it uses a ActiveX control and is <b><u>NOT RECOMMENDED</u>for use due to security issues and concerns.

Author:

Durairaj Athavan Raja

<u>NOT RECOMMENDED</u></b> for use due to security issues and concerns.<br>

<br>

<b><u>Author:</u></b>[Iwan Santoso | https://forums.sdn.sap.com/profile.jspa?userID=20798]<br>

<textarea rows=”10″ cols=”79″>

<%@page language=”abap” %>

<%@extension name=”htmlb” prefix=”htmlb” %>

<htmlb:content design=”design2003″ >

  <htmlb:page title=”text extension ” >

    <script>     

      function processFile()      {       

        document.forms[“myForm”].browse.click();       

        document.forms[“myForm”].file.value = document.forms[“myForm”].browse.value;     

      }   

    </script>   

   

    <htmlb:form id=”myForm” method=”POST” enctype=”multipart/form-data”>     

   

      <input type=file name=browse style=”display:none;”>     

     

      <htmlb:inputField id    = “file”                       

                        size  = “50” />     

                       

      <htmlb:button text          = “Select a file…”                   

                    onClientClick = “processFile()” />   

   

    </htmlb:form> 

  </htmlb:page>

</htmlb:content>

</textarea>

<br>

This example is the BSP basics can easily be tested by copying this code to a blank BSP page and opening it in your browser.<br>

<br>

Please remember, for each of these examples and in general for reading a file from the local drive to the server you <b><u>have</u></b> to have the form on the paged defined as < form method=”POST” enctype=”multipart/form-data”><br>

<br>

For those of you reading this and trying out the example please note, and I can’t say it enough the examples using the VBScript and ActiveX code is  <b><u>NOT RECOMMENDED</u></b>!!! For those of you who have some experience with these methods know that there are a lot of security issues and just plain problems with it. I think it should also be noted that it has been recommended by Brian McKellar to not use these versions. Something to also be noted from Brian, is a reply of his:

style=”border: thin inset; width:50%;background-color:lightgrey”>
+
People, people, I do not want to rain on your party, but I do have to tell you a small story. Once a colleague of mine showed me this nice trick. We render a hidden file upload field, then we place a nice button there, and just made it all roses. He did the changes, and shipped that in a service pack.

What nobody never did, was actually test the file upload. Everybody

just looked at the rendering and said oohh and aahh. But this is the point. You will have to press that upload button, and then see if you find the content in the server.

I will donate a 100 of my points if you make this trick work. (Only IE would be fine for me.)

Two comments:

(1) The browser prevents you from setting a < input type=file> value with anything from JavaScript. This is the simplest way to steal files from a disk without the user knowing. This is absolutely prohibited. We lost a lot of hair here. Your Javascript is just not executing.

(2) If you should want to do a file upload, then your example programs needs a form, that is also a POST, and also encodingType = “multipart/form-data”! (Which alone tells me that the actual upload test was not checked:)

Like I said, we were so happy that we shipped it in a service pack before we reliased the subtle mistake.

++bcm
+

Now with that you are probably wondering why I even gave all the examples? Well for one, you should at least try them and see for yourself in order to better understand that you are left with one

solid

option. Sorry to say, you have to live with the browser rendering the text for the button. Not a great answer but for now the best one.

Challenge from Brian McKellar,

we would like to use < input type=file>, but to replace the actual browse button. Or more exact, to be able to replace the text and set the styles differently. Until now we have failed. The 100pts stand for a viable solution that works. Which includes getting the file back to the server!

And we have a winner

, ok so I always wanted to say that on a stage. But this is no dream but reality, we really have a winner. You have to see it to believe it but it’s a winner!! [Input=FILE, how to hide the plain browse button | Input=FILE, how to hide the plain browse button], by Dagfinn Parnas. A refreshing new twist to web development if I do say so myself and a refreshing upbeat way to solve a problem. This just goes to show that sometimes you have to remember “There is no spoon”.

Thanks Dagfinn!!! Super solution!

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Brian McKellar
    Craig,

    Excellently written! You have captured the mood and the text of a long thread, and presented it perfectly.

    A side remark: We would like to use

    , but to replace the actual browse button. Or more exact, to be able to replace the text and set the styles differently. Until now we have failed. The 100pts stand for a viable solution that works. Which includes getting the file back to the server!

    brian

    (0) 
      1. Dagfinn Parnas
        Managed to hack up a solution which seems to be working very well.

        Just need to tweak it a little bit and I’ll probably post a new weblog later today.

        (0) 
            1. Craig Cmehil
              This would then be the same like using ActiveX to read the file in. It can be done but is not exactly the most secure way.  The link I provided “File Input Field” talks about the “signed scripts” as well.
              (0) 
              1. Dagfinn Parnas
                Think I have a new workaround to my problem which is really weird,but should work in the newest browsers.

                Will try to have an blog up by the weekend

                (0) 
    1. Craig Cmehil
      Strange the link to the weblog doesn’t work.  Perhaps you posted it in the forum under the topic? I’ll have to go look.  Did your solution give the file to the server at the end? I mean did we have the file at the end of the process?
      (0) 

Leave a Reply