Download and Upload Files Web Browser

Hi,   take a look in this thread uniface-9-6-04-web-dropzone-integration

Ok so i tried the dropzone integration but the javascript part is not been created when i test the DSP Is there a way that you can post a sample or a demo?

Also what if i only want to use just an input with the type="file"? Is it possible?

Hello, yes, you can do this : http://unifaceinfo.com/forum/uniface9/fileuploadviawebbrowser/ But it is not obvious, in the uniface documentation, that the name of the input file tag, must have a matching uniface field with the same name drawn in the component. Philippe.

Hi Philippe,   So i need to use an USP then? Can't be done in a DSP?

It can be done with a DSP too. The layout doesn't need to be bound with the component structure. The unique constraint, is that you need a component field with the same name of the "html input file tag". for instance a DSP named mydsp :

Component Structure :

You need at last an entity DUMMY with a field FILENAME

Layout :

<form target="_self" action="mydsp" enctype="multipart/form-data" method="post" name="form">
     <input name="filename" type="file" /> 
     <input value="Upload" type="submit" />
 </form>

exec trigger :

variables

  string lvFileName

  raw lvContent

endvariables

  lvFileName = $item("FILENAME", $webinfo("INPUT'))

  if (lvFileName != "")
   ; something has been submited

    fileload/web "FILENAME", lvContent ; load stream from submit

    filedump/raw lvContent, lvFilename ; dump file on server

  endif

  ; draw the DSP

  weblayout

  webdefinitions

  websave

end

Hi Phillipe,    Seems to be working thanks for the help!!!

Hi again,   I'm having a little problem with My Upload DSP because is inside a DSP Container, so when the form is submitted the file is uploaded but also the page is redirected, how can i prevent that? 

Hello, you can't do that without refreshing all the page. For security reason, browsers don't authorize to fetch file on local disk without using a file input tag and post it via a form; it is impossible to do that with javascript, which how DSP containers actually work. It isn't an Uniface issue, it's a global security feature; all other web frameworks can't also do that by this way. After this global thought, a simple workaround, is to use an iframe html tag instead of DSP container. By using this way, when the file form is posted, only the iframe is refreshed not the global page. For example, if your file submission DSP is named mydsp, you can embed it in your main dsp with this html tag:

 <iframe src="mydsp"></iframe>

You can, of course, customise this tag, with sizes, borders, etc...

I believe you can get the behaviour you need by using the JavaScript objects FormData and XMLHttpRequest. The basic idea is that you create a new FormData object based on the form you have on the DSP. You then use XMLHttpRequest to post it to the server. This prevents a full page refresh on the main page. I have a sample demonstrating this approach. I'll get it packaged up and uploaded to the sample area, see if it fits your requirements.

I've now uploaded the sample "DSP File Upload" here: http://unifaceinfo.com/community-samples/

Thanks for the share James. I didn't know about FormData object in Javascript. It looks more attractive than an ugly iframe. Internet Explorer seems to support this since version 10.

Ah yes, that's a good point, thanks. I'll add that requirement to the readme in the sample. If it's not supported in earlier browsers then you'd want to go the iframe route as you've suggested. You can actually programatically create an iframe and make quite a tidy solution that way. There are actually a lot of widgets out there which will do the browser detection for you and then pick the appropriate strategy for doing the upload. The Uniface back-end would be the same whatever.

Thanks James,   I'll have a look at the sample