cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Solution for the Problem decribed in Craig's Weblog

Go to solution
Former Member

on ‎08-12-2004 8:40 PM

0 Kudos

Hi SDN Members,

Craigs Weblog: "INPUT TYPE="FILE" and your options..."

/people/sap.user72/blog/2004/08/11/input-typefile-and-your-options

Summarizes forum posts about the following problem:

<i>" ... 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."</i>

Double points for the one who comes up with the solution. (Brian McKellar has thrown in 100 of his own points too

Looking forward to it, Mark.

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎08-15-2004 7:37 PM
0 Kudos

Solution post in new blog [link]/people/dagfinn.parnas/blog/2004/08/15/inputfile-how-to-hide-the-plain-browse-button[/link] and a working example is provided at [link]http://temp.elsewhat.com[/link](provided my server stays up)

Show replies
Show replies
former_member181879
Active Contributor
‎08-16-2004 6:12 AM
0 Kudos

Hallo Mark,

Dagfinn has presented a solution that works. Using opacity and z-order, he actually does not hide the fileupload button. No, he just makes it "invisible", but still at the top. This way you see the fake button, but press the real button! An execellent idea to solve the problem in another way.

The complete weblog is good, showing not only the problem, but also the typical approach which always fails, and then his solution. Recommended reading!

My 100points stand! You can transfer them over! It has been an investment well worth making for the pleasure of reading this solution.

thanks, brian

former_member181879
Active Contributor
‎08-16-2004 6:19 AM
0 Kudos

PS: Dagfinn can you also link your weblog into the BSP category. This way we will find always again, and can reference to it. Together with the weblog of Craig, it shows the real power of SDN!

Former Member
‎08-16-2004 8:07 AM
0 Kudos

Hi,

The blog now links to the BSP category as well.

I actually thought (like you probably) that the first solution was going to work, especially when it popped up the file upload window.

What I also for a long time thought the solution would be, was to use the handleEvent method on the input type="file" element and sending in some event (mozilla uses eventclicked for the file dialog). This line of thought stopped due to being unable to create an arbitrary event.

Then I tried to browse the mozilla source for clues, but couldn't actually find the implementation of the different elements (maybe I was looking at the wrong place, but I would have believed that each element should have its own class).

Looking forward to the next challenge

Former Member
‎08-17-2004 11:38 AM
0 Kudos

Hello Dagfinn,

I've just sent you an email with the screen shots and the code I am using. However, as I've stated it doesn't work. We've been trying it on every type of system we can find here and it just doesn't work.

????


<html>

  <head>

    <script type="text/javascript">
    //Function which fills the fake form's input field
    function fillFakeForm()
    {
		 document.forms['fakeForm'].myFileText.value= document.forms['realForm'].file.value;
    }
    </script>

    <!--The transparency is set in the fileUpload class-->
    <style type="text/css">
     .fileUpload {
        -moz-opacity:0 ;
        filter:alpha(opacity: 0);
        -khtml-opacity: 0;
     }
    </style>
  </head>

  <body>
    <!--Real form. Must have higher z-index than fake form-->
    <span style="position: absolute; top: 10px; left: 10px;z-index: 1;">
      <form name="realForm" method="post" ENCTYPE="multipart/form-data">
        <!--The file upload uses the css class defined previously and defines two event handlers-->
        <input type="file" class="fileUpload"  name="file" onkeyup="fillFakeForm();" onmouseout="fillFakeForm();">
        <input type="submit">
      </form>
    </span>

    <!--Fake form which should be visible. Must have lower z-index than the real form-->
    <span style="position: absolute; top: 10px; left: 10px; z-index: 0;">
      <form name="fakeForm">
        <input type="text" name="myFileText">
        <!--This image is the graphics replacing the browse button-->
        <img src="<%=CL_BSP_MIMES=>SAP_ICON( id = 'ICON_EDIT_FILE' ) %>" border="0">
      </form>
    </span>

  </body>
</html>

That is the code we've been trying that works for Brian, but not for us. I've tried it in different broswer on a BSP page as well as a normal HTML page.

Former Member
‎08-17-2004 12:39 PM
0 Kudos

I should clarify the problem I think.

The image replacement works, what does not work is the submit, we get no file content.

Former Member
‎08-17-2004 2:46 PM
0 Kudos

My latest response to Craig. And the file upload works for me

Please be aware that if you that the HTTP post will be very different when you use ENCTYPE="multipart/form-data" on the form. The file upload is not part of any servlet standard, so you generally need to use a component on the server side (on temp.elsewhat.com (which is down now) I've used the apache commons file upload http://jakarta.apache.org/commons/fileupload/). Without it/or similar you will not be able to read the other form values either.

If you remove the fake form, the style and the javascript, does the example work then ?

Former Member
‎08-18-2004 12:16 PM
0 Kudos

OK apologies all around, it seems to be working fine in the W2K servers but local IDE environments don't seem to be 100% and not sure about the XP ones yet.

Not sure why the servers gave us problems before it must have been a silly mistake on my part.

Our SAP WebAS is also OK.

Answers (0)

Ask a Question