File browser

[Former Member]

Hi,

I work on a BSP application. This application is multi-language. For this, i use OTR. My problem is that i want to upload file and i need a file browser to search the file to upload. I don't want to use the htmlb object "fileupload" because i want to master the destination of the upload. Then i have to use html object "INPUT type=file" but the button generated is translate in the browser language (Browse .. in english). But i want to control this and write in using OTR. Is there any object that can help me ? Or someone have a solution whith "INPUT type=file" ?

Thanks

[former_member181879]

<b>Input=FILE, how to hide the plain browse button</b>

/people/dagfinn.parnas/blog/2004/08/15/inputfile-how-to-hide-the-plain-browse-button

Dagfinn Parnas

This is a response to the challenge from Brian McKellar, on how to use <input type=file>, but replacing the browse button. It shows you how to style the browse button anyway you would like, you can even replace it with an image.

[Former Member]

Just to completely beat the horse dead...

<a href="http://www.cs.tut.fi/~jkorpela/forms/file.html">File Input Field</a>

Particulary interesting in this site is the <a href="http://groups.google.com/groups?oi=djq&as_umsgid=%3C38119FEE.DFF60EBA%40sector27.de%3E">link</a> that points to this message

With <a href="http://developer.netscape.com/docs/manuals/communicator/jsguide/scripts.htm">signed script</a> in NN
 
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserWrite');
  document.formName.inputName.value = 'whatever'

And with that it begs the question, where is the hole in IE that allows that as well?

Some have chosen the ActiveX approach which causes not only problems but also concerns.

Others have chosen something like this:

<form>
 <input type="file" name="myfile" style="display:none" onchange="fileName=this.value"> 
 <input type="button" value="open file" onclick="myfile.click()"></p>
 <input type="button" value="show value" onclick="alert(fileName)"> </p>
</form>

As you can see the button activates the file upload since the file upload is actually hidden on the page.

With that (considering most is just re-stating previous messages) I would say that perhaps one of the moderators might lock this message?

[former_member181879]

Hi Craig,

<i>With that (...) I would say that perhaps one of the moderators might lock this message?</i>

I have though about this. But to tell you the truth, this is one of the things about which we often get questions/problems. It keeps coming back, as this is very confusing for some people.

I decided to block the parallel thread, so as to focus further appends on this thread. But let us leave it open, it is bound to flame up again one day.

bye, brian

[Former Member]

Hi Brian,

I suppose you are right, perhaps added this to a weblog or something might be a good idea? or at least a FAQ.

I just so happen to have a Weblog ready for it in case you agree

The weblog shows the examples from:

Iwan Santoso

Durairaj Athavan Raja

you and myself

Message was edited by: Craig Cmehil

[athavanraja]

Craig,

thanks for the links , interesting stuffs.

Brian.

"The you have come to the correct place. And the best way of learning is just to get your hands dirty."

Thats what i am exactly doing. And its paying off.

{Sorry for this out of context question: I have written an ABAP to call a web service thru http_get and transform the resulting XML using XSLT and call transformation into an internal table and render it on SAPGUI using ALV.

My question is : Is this approach is acceptable or do we have to use only SOAP protocol?}

Thanks.

Raja

[former_member181879]

> My question is : Is this approach is acceptable ...

If it works for you, why not? As long as you stay with defined interfaces, etc, all is fine.

[former_member181879]

> I just so happen to have a Weblog ready for it

Go for it! I am collecting the extra points!

[Former Member]

Hi Peter,

Let me put my two cents:

The upload returns a data type XSTRING, which show you a 2 digit hex code, you need to convert this to string.

Please read Brian's web log on how two convert

STRING <-> XSTRING<a href="/people/mark.finnern/blog/2003/09/23/bsp-programming-handling-of-non-html-documents Programming: Handling Of Non-HTML Documents</a>

I think this topic is not related at all with the original topic of this threat, and it would be better if you create separate topic.

But that's just my two cents.

Iwan

[former_member181879]

Iwan's answer is completely correct. Content is XSTRING that represents content of the file. You can also see <a href="/people/brian.mckellar/blog/2003/10/23/bsp-trouble-shooting-frequently-asked-short-questions">BSP Trouble Shooting: Frequently Asked (Short) Questions</a> for an example of xstring to string code.

[Peter_Inotai]

Thanks Iwan and Brain!

I will check the mentioned weblogs.

If I could convert XSTRING to STING, then the original problem can be solved (upload file to the server).

Anyway, I will test it, and let you know the result (may be in a separate topic).

Peter

[Former Member]

That is sweet! I hope you don't mind. I took you code and make it to use htmlb elements so it has the same look and feel

<%@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" >
      <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>

[former_member181879]

The only way to move a file from the browser into the backend is via <input type=file>. Here you can either use raw HTML or the HTMLB fileUpload. Eitherway, it is going to require the type=file. Nothing to do.

<i>I don't want to use the htmlb object "fileupload" because i want to master the destination of the upload.</i>

I do not really understand this remark. The HTMLB fileUpload is just a wrapper around <input type=file>. Thereafter, you just use the get_data call to get the xstring of the uploaded file. The benefit of our tag is that it knows how to exstract the correct multipart sequence out of the incoming post.

But then, good programmers like to roll their own. So, go for it.

Have you looked at the <htmlb:fileUpload upload_text/> attribute?

As for the browse text, why not use your favourite search engine, and let the eyes surf a little. The typical remarks I found are:

<i>As far File is concerned, there is nothing you can do to change either the style or the label "Browse" or even clear its value...</i>

Maybe you find the answer. We are also very interested!

++bcm

[athavanraja]

replace the file upload tag with the following code.

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

<input type=text name=file>

<input type=button

style="font-style:veranda; font-size:12px; font-weight:bold;text-transform:

lowercase;color:white;background-color:#A2C382;height:22px;border-style:ridge;text-align:

center;"

onClick="browse.click();file.value=browse.value;browse.disabled=true"

value="Select a File...">

Regards

Raja

[Former Member]

Durairaj, i've found the same code but just a little thing, replace :

onClick="browse.click();file.value=browse.value;browse.disabled=true"

By :

onClick="browse.disabled=false;browse.click();file.value=browse.value;browse.disabled=true"

Because when the user cancel the file browsing or wants to choose another file, the browse click don't because it have been disabled.

Thanks

[former_member181879]

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 <b>test</b> 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 <b>encodingType = "multipart/form-data"</b>! (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

[Peter_Inotai]

Hi Brain,

Can you provide some info about the meaning of 'content' in the Upload example?

CLASS cl_htmlb_manager DEFINITION LOAD.

* Optional: test that this is an event from HTMLB library.
IF event_id = cl_htmlb_manager=>event_id.

* See if upload is triggered from button
  DATA: event TYPE REF TO cl_htmlb_event.
  event = cl_htmlb_manager=>get_event( runtime->server->request ).

  IF event->id = 'submitButton' AND event->event_type = 'click'.

    DATA: data TYPE REF TO cl_htmlb_fileupload.
    data ?= cl_htmlb_manager=>get_data(
                                      request = runtime->server->request
                                     name    = 'fileUpload'
                                     id      = 'myFileUpload1'
                                       ).
    IF data IS NOT INITIAL.
      name         = data->file_name.
      content      = data->file_content.
      length       = data->file_length.
      content_type = data->file_content_type.
    ENDIF.

  ENDIF.
ENDIF.

I tried to upload a text file, the content was just a long number-string:-(

Is there a way to convert it to a readable string?

If I could convert it to a normal internal tab (and having something similar as in cl_gui_frontend_services=>gui_upload DATA_TAB), which contains the content of the file, then it can be written in the server with OPEN DATASET/TRANSFER/CLOSE DATASET.

Content is filled with kernel call, it's called raw data:

IF_HTTP_ENTITY~GET_DATA

method IF_HTTP_ENTITY~GET_DATA.


  system-call ict
    did
      ihttp_scid_get_data
    parameters
      m_c_msg                            " > c handle
      data                               " < raw data
      m_last_error.                      " < return code


endmethod.

Is it possible or I was thinking completely wrong?

Thanks in advance,

Peter

[athavanraja]

Hi,

This in response to the oringinal post:

The following example is just to prove that it can be done, though i wouldnt use it in a production environment as its not worth taking this path just the change the browse button sytle.

<SCRIPT LANGUAGE="VBScript">

Sub bc()

msgbox(document.myf.file.value)

Dim fso,ts, s

Const ForReading = 1

Const TristateTrue = -1

Set fso = CreateObject("Scripting.FileSystemObject")

Set ts = fso.OpenTextFile(document.myf.file.value, ForReading,TristateTrue )

document.myf.cont.value = ts.ReadAll

msgbox(document.myf.cont.value)

ts.Close

End Sub

</SCRIPT>

<form method = "post" name="myf" >

<htmlb:inputField id = "cont"

required = "true"

visible = "false" />

<input type=file id="myFileUpload1" name=browse style="display: none;">

<input type=text name=file>

<input type=button

style="font-style:veranda; font-size:12px; font-weight:bold;text-transform:lowercase;color:white;background-color:#A2C382;height:22px;border-style:ridge;text-align:center;"

onClick="browse.click();file.value=browse.value;browse.disabled=false"

value="Select a File...">

<input type = "submit" name ="Button1" value ="upload" onclick="bc();this.form.submit()" />

</form>

Your views on this please.

Regards

Raja

[Former Member]

Raja,

Nice example similiar to the I gave but skipping directly to the file select and not just a folder select.

The problem is, like with mine, SAP guys don't seem to like the whole ActiveX Objects and all that

But a nice example for someone in a pinch that needs a solution regardless of what it uses.

[athavanraja]

Hi Craig,

Thanks. I dont think SAP dosent like activex objects (its all over there in SAP GUI). In fact sometime back i have posted a article here on how to use and activex control to use MSword's spell checking with SAP GUI.

(https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sapportals.km.docs/documents/a1-8-4/ms word-like spell checker for sap gui fields)

The control frame work in ABAP has lot more potential to do many things but unfortunately , i havent seen being used much except SAP's own development.

Regards

Raja

[Former Member]

One of the problems with using these controls though is the security issues and of course that most work only when using the IE browser and not with other browsers, however, most of the BSP stuff we've been doing doesn't work so well with the other browsers either.

We've created custom elements for file uploads ourselves, and we've been playing around with the IESpell tool for creating a spell check control for our BSP pages. I'll be taking a closer look at your article now as well thanks!!

[former_member181879]

> following example is just to prove that it can be done

Yes, although I must admit it took me some time to understand what you are doing. I am very pragmatic in life, and will do what it takes to get the job done. But this is a hack slightly larger than I would tried.

What you do effectively, is to load the file in the browser into a hidden inputfield, and then to transport the file content as a form field. This is not what I would understand under file upload, but it can work.

I see two problems:

(1) Security and the use of ActiveX controls. We have had here a lot of resistence, and can not really go this way. As you write yourself, using it productively, one has to see if the benefit is really worth the risk.

(2) Form fields send to the server are URL encoded. Specifically for binary files you have to be very careful to understand and correct the concequence of the URL encoding.

Still it has been a nice exercise read and test the 20 lines of source!

++bcm

[athavanraja]

Hi Brian,

I was just experimenting.

I understand the concerns of using activex and the security threat and not to mention the pain of doing it just to change the browse button lable.

Thanks for your comments.

Regards

Raja

(NB:-I am basically an ABAPer who started with these web stuffs recently, so i am prone to mistakes/misunderstandings)

[former_member181879]

<i>I am basically an ABAPer who started with these web stuffs recently</i>

The you have come to the correct place. And the best way of learning is just to get your hands dirty.

[Former Member]

I don't think that is possible. If you drill down to the fileupload definition, it also use html object input type=file.

Other alternative, you may install the IE which customized to the language you want to use.