Download and Upload Files Web Browser

Author: ablancouribe@compuamerica.com.ve (bioalexy)

Hi,   I need help in creating a DSP capable to manage de upload and download of files (images mainly) on the Web Browser Any suggestions? 

14 Comments

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


    Author: jtsagara (jtsagara@logisoft.gr)
  2. 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?


    Author: bioalexy (ablancouribe@compuamerica.com.ve)
  3. Also what if i only want to use just an input with the type="file"? Is it possible?


    Author: bioalexy (ablancouribe@compuamerica.com.ve)
  4. 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.


    Author: Philippe (philippe.grangeray@agfa.com)
  5. Hi Philippe,   So i need to use an USP then? Can't be done in a DSP?


    Author: bioalexy (ablancouribe@compuamerica.com.ve)
  6. 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

    Author: Philippe (philippe.grangeray@agfa.com)
  7. Hi Phillipe,    Seems to be working thanks for the help!!! Smile


    Author: bioalexy (ablancouribe@compuamerica.com.ve)
  8. 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? 


    Author: bioalexy (ablancouribe@compuamerica.com.ve)
  9. 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...


    Author: Philippe (philippe.grangeray@agfa.com)
  10. 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.


    Author: James Rodger (james.r.rodger@gmail.com)
  11. I've now uploaded the sample "DSP File Upload" here: http://unifaceinfo.com/community-samples/


    Author: James Rodger (james.r.rodger@gmail.com)
  12. 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.


    Author: Philippe (philippe.grangeray@agfa.com)
  13. 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.


    Author: James Rodger (james.r.rodger@gmail.com)
  14. Thanks James,   I'll have a look at the sample


    Author: bioalexy (ablancouribe@compuamerica.com.ve)