none
how to use a jQuery or html5 file picker in Lightswitch? RRS feed

  • Question

  • Hi,

    I currently have a Lightswitch app where I am importing a text file into the database. On the desktop client side, I used Matt Sampsons example ( creating a silverlight browse screen and filestream to get around security permissions/concerns).

    I am now attempting to do same from html client.

    Has anyone got that working? ( ie the window coming up that allows you to choose file from your desktop). Should one be using a jquery plugin for this, or pure html5?

    I guess too that I am not completely clear on the relationship between the default.htm file in  LightSwitch html client app and incorporating the javacript into the LightSwitch html client screen.

    I have seen some examples for LightSwitch for 'uploading pics' etc which isnt quite the same as this. I would assume selecting a 'text' file from desktop and importing into LightSwitch app (in this case html client) would be a pretty common business need.

    I think in this case all I am looking for is how to call/bring up the desktop file selection window  from the html client screen to get the file name. I already have code in the background that uses stored procedures and web api that could actually parse the text file.

    Can anyone shed light on how to do the above? Are there any books/articles that provide a generic boiler plate for how 'any' jQuery plug in is incorporated into html client screen in a standard way?

    Sorry if dumb questions or if they have already been answered.

    Thanks

    Tuesday, May 6, 2014 2:54 PM

Answers

  • LS HTML Client is a single page application that generates all the html client-side at runtime using javascript with the help of a library called jQuery Mobile which enhances HTML by changing inputs, buttons and-the-like into ones suitable for mobile UI.    That's why you'll see no markup in default.htm and rarely do we need to change default.htm.   Usually changes to default.htm are simply to add references to other javascript libraries or css stylesheets. 

    Using the designer you can add controls to the layout and javascript handles rendering them into HTML  client-side at runtime.  A Custom Control allows you to inject HTML into a screen using the controls _render method in the javascript behind the screen.  I'd suggest going back to the earliest posts re: HTML Client on the LS team blog for some more info about using CustomControls and javascript, etc.

    So, to render a file input box you'd:

    1 - add CustomControl to your screen layout

    2 - click 'edit render code'

    3 - and put some html in the element using javascript like so:

    myapp.AddEditPicture.Image_render = function (element, contentItem) { // Write code here.

    //make a jQuery object from some HTML var fileinput = $('<input name="file" type="file" style="margin-bottom: 10px;" />');

    //append the object to the element on the screen - 'render it'

    $(element).append(fileinput);

    //at this point jQuery Mobile does it's magic to enhance the newly added html };

    Input boxes, for example, are enhanced respective to the HTML5 input type. In this case, the type='file' so modern browsers know it's for use by the filereader object

    With the above code, you should be able to invoke the common file dialog to browse for a file the path to which will be saved in the input element.

    To use the file path, you need to handle the change event of the file input and 'do something' with the file.

    Additionally, if your users may not be running a recent browser that supports filereader, then you need to provide a fallback method to get the file.  This tutorial handles the events and also provides a fallback. 

    http://blogs.msdn.com/b/bethmassi/archive/2014/05/01/storing-images-in-azure-blob-storage-in-a-lightswitch-application.aspx

    It's specific to images and the server-side code saves the files to azure storage, but the steps to setup the custom control, include the referenced image uploader script , etc should be suitable to get you started.

    Hopefully I made some sense out of it all...again read the team blog, especially early stuff introducing the HTML Client as that's about all the documentation that exists from MSFT.

    HTH,

    Josh

    • Marked as answer by lvsund Thursday, May 8, 2014 2:36 PM
    Thursday, May 8, 2014 1:01 PM

All replies

  • Search the forums there are many methods and examples:

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/53a30cde-d2b5-4ae8-b0f5-f326eeb78a4d/uploading-files-with-lightswitch-html?forum=lightswitch.

    Html5 filereader object can display the filedialog:

    https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

    You simply render a custom control using this html then handle the change events to upload, etc.:

    <input type="file" id="input">

    HTH, Josh

    Wednesday, May 7, 2014 1:02 PM
  • Hi Josh

    Thanks

    I had come across the second of the links you had provided too.

    I think part of my issue is lack of familiarity with the interaction between Lightswitch and Javascript at an in depth level.

    My assumption from the above code is that that would go into the default.htm file in the LightSwitch project.

    Still not clear exactly on how javascript calls that. 

    My intent was to put a button on the page that would essentially be a 'load' or 'import' button which when clicked would bring up a file select dialog box. I would then assign the file name picked

    Normally in the html client I would assume that the action would come off of the '_execute' code from the button.

    Not sure where the 'custom control' comes in the picture for this example. Does the custom control exist because of the above code being in the htm file? Or does it exist because you create a 'custom control' within the screen designer and link it up to the above html code? And how does the above code relate to an _execute method off of a button.

    Sorry- definitely showing my ignorance here :(

    Will peruse further the first link above too...

    Wednesday, May 7, 2014 8:13 PM
  • LS HTML Client is a single page application that generates all the html client-side at runtime using javascript with the help of a library called jQuery Mobile which enhances HTML by changing inputs, buttons and-the-like into ones suitable for mobile UI.    That's why you'll see no markup in default.htm and rarely do we need to change default.htm.   Usually changes to default.htm are simply to add references to other javascript libraries or css stylesheets. 

    Using the designer you can add controls to the layout and javascript handles rendering them into HTML  client-side at runtime.  A Custom Control allows you to inject HTML into a screen using the controls _render method in the javascript behind the screen.  I'd suggest going back to the earliest posts re: HTML Client on the LS team blog for some more info about using CustomControls and javascript, etc.

    So, to render a file input box you'd:

    1 - add CustomControl to your screen layout

    2 - click 'edit render code'

    3 - and put some html in the element using javascript like so:

    myapp.AddEditPicture.Image_render = function (element, contentItem) { // Write code here.

    //make a jQuery object from some HTML var fileinput = $('<input name="file" type="file" style="margin-bottom: 10px;" />');

    //append the object to the element on the screen - 'render it'

    $(element).append(fileinput);

    //at this point jQuery Mobile does it's magic to enhance the newly added html };

    Input boxes, for example, are enhanced respective to the HTML5 input type. In this case, the type='file' so modern browsers know it's for use by the filereader object

    With the above code, you should be able to invoke the common file dialog to browse for a file the path to which will be saved in the input element.

    To use the file path, you need to handle the change event of the file input and 'do something' with the file.

    Additionally, if your users may not be running a recent browser that supports filereader, then you need to provide a fallback method to get the file.  This tutorial handles the events and also provides a fallback. 

    http://blogs.msdn.com/b/bethmassi/archive/2014/05/01/storing-images-in-azure-blob-storage-in-a-lightswitch-application.aspx

    It's specific to images and the server-side code saves the files to azure storage, but the steps to setup the custom control, include the referenced image uploader script , etc should be suitable to get you started.

    Hopefully I made some sense out of it all...again read the team blog, especially early stuff introducing the HTML Client as that's about all the documentation that exists from MSFT.

    HTH,

    Josh

    • Marked as answer by lvsund Thursday, May 8, 2014 2:36 PM
    Thursday, May 8, 2014 1:01 PM
  • Actually all of that helps hugely.

    It helps clear up my misunderstanding of where the html goes in such a control as the above. It does make sense that html is injected into the javascript. Yes I had seen that the htm file was uses for references to javascript libraries and css files. It was whether anything else was supposed to be their and how that linked up.

    Your answer above clarified all of that. Thanks

    Will also peruse the links you provided ...

    Thursday, May 8, 2014 2:36 PM
  • Got it working with the above code- thanks!
    Thursday, May 8, 2014 2:56 PM