LS HTML - Create an object in javascript RRS feed

  • Question

  • Hi,

    I'm trying the following:

    var dpe = new myapp.DPE;
    dpe.ext = "jpg";
    dpe.bin = fullBinaryString.substring(fullBinaryString.indexOf(",") + 1);
    contentItem.value = dpe;

    However, it fails: error on page; which error? it doesn't say...

    When I add a breakpoint in the last line, I can see that while dpe is defined, dpe.ext and dpe.bin are not. Hence my question: how do you create an object in javascript and then assign it to contentItem?



    Tuesday, July 16, 2013 2:34 PM

All replies

  • You created a new object of your DPE entity set in your first line; however, it lacks an active data workspace, which said another way, it lacks an associated screen to give it context prior to being saved in the application database.  This is why dpe.ext and dpe.bin cannot be assigned, but screen.dpe.ext and screen.dpe.bin could be assigned after the association is made.  Likewise, the data context of contentItem.value determines what can successfully be assigned to it, typically a data primitive (string, integer, Boolean) but not your DPE entity in this case.

    Would you care to be a little more specific in describing what you want to do to hopefully be of more assistance?

    Wednesday, July 17, 2013 6:47 AM
  • Hi,

    Tks for the reply. What I'm trying to do is display an input control for the user to select a file and then save it as a binary in the database. I'm also saving the extension of the file (hard-coded at the moment) to be able to open it later (I don't know how yet though). My code is derived from the file image-uploader.js which I use to download images as described in a lightswitch post on the subject (lost the link though). So it looks like this:

    myapp.AddEditLot.DPE_render = function (element, contentItem) {
        createDPEUploader(element, contentItem);

    function createDPEUploader(element, contentItem) { var relativePathFromClientRootToThisFolder = "Scripts/"; var $element = $(element); var $file_browse_button = $('<input name="file" type="file" style="margin-bottom: 10px;" />'); $element.append($file_browse_button); $file_browse_button.bind('change', function handleFileSelect(evt) { var files = evt.target.files; if (files.length == 1) { var reader = new FileReader(); reader.onload = function (e) { var tempImg = new Image(); tempImg.src = reader.result; tempImg.onload = function () { var MAX_WIDTH = 400; var MAX_HEIGHT = 300; var tempW = tempImg.width; var tempH = tempImg.height; if (tempW > tempH) { if (tempW > MAX_WIDTH) { tempH *= MAX_WIDTH / tempW; tempW = MAX_WIDTH; } } else { if (tempH > MAX_HEIGHT) { tempW *= MAX_HEIGHT / tempH; tempH = MAX_HEIGHT; } } var canvas = document.createElement('canvas'); canvas.width = tempW; canvas.height = tempH; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0, tempW, tempH); var dataURL = canvas.toDataURL("image/jpeg"); previewImageAndSetContentItem(dataURL, contentItem); } }; reader.readAsDataURL(files[0]); } else { previewImageAndSetContentItem(null, $preview, contentItem); } }); function previewImageAndSetContentItem(fullBinaryString, contentItem) { if ((fullBinaryString == null) || (fullBinaryString.length == 0)) { contentItem.value = null; } else { var dpe = new myapp.DPE; dpe.value.ext = "jpg"; dpe.bin = fullBinaryString.substring(fullBinaryString.indexOf(",") + 1); contentItem.value = dpe; } } }

    In the DB, DPE has 3 columns: id (primary key), ext (string) and bin (binary).
    Wednesday, July 17, 2013 7:06 AM
  • My original answer may or may not apply in your specific situation, since I haven't personally worked with the control scenario you are currently doing.  I'll suggest though, two additional ways to create a new entity besides new myapp.DPE that you could try.




    Subtle differences, if any, between these two methods is not clear to me, but you may be able to assign dpe.ext and dpe.bin after one of these.  Whether contentItem.value can be assigned to dpe will depend if the custom control has been defined in your screen designer's View to accept the DPE entity, as you probably already know.

    Thursday, July 18, 2013 4:39 PM
  • This tutorial also consumes the same control:

    LightSwitch HTML Picture Manager Using WCF RIA Services

    The relevant code I think is this:

    myapp.AddPicture.FileImage_render = function (element, contentItem) {
        // Create the Image Uploader
        createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");

    Basically what createImageUploader does is take the contentItem as a parameter and then in the previewImageAndSetContentItem function, sets it to the binary result of the uploaded image to the contentItem:

    function previewImageAndSetContentItem(fullBinaryString, $preview, contentItem) {
            if ((fullBinaryString == null) || (fullBinaryString.length == 0)) {
                contentItem.value = null;
            } else {
                $preview.append($('<img src="' + fullBinaryString + '" style="' + previewStyle + '" />'));
                // As far as storing the data in the database, beyond previewing it,
                //     remove the preamble returned by FileReader or the server 
                //     (always of the same form: "data:jpeg;base64," with variations only on the 
                //     type of data -- jpeg, png, etc).
                //     The first comma serves as the necessary marker where the binary data begins.
                contentItem.value = fullBinaryString.substring(fullBinaryString.indexOf(",") + 1);

    In the Microsoft example they are then just saving the image to the database. In my example I am saving the image to the server hard drive using a WCF RIA Service.

    How are you trying to save the image?

    Unleash the Power - Get the LightSwitch HTML Client book


    • Edited by ADefwebserver Thursday, July 18, 2013 8:02 PM spelling
    Thursday, July 18, 2013 8:01 PM
  • Tks Allen,

    Indeed, my custom control data context is of type DPE so contentItem.value should be ok to be assigned a DPE entity.

    Unfortunately though, none of your two suggestions work. In the first one, DPE is undefined (I tried DPEs but no luck either) and in the second one details is undefined.

    Friday, July 19, 2013 8:18 AM
  • Hi,

    I certainly derived my solution form your tutorial in the first place.
    Note that I don't want to save images specifically: I do that elsewhere and it works fine (although one have to select image by image while I'd like to select several images at once and add them to my tile grid collection...).

    In this post, I'm trying to save any file as a binary. I also save the extension because I guess I'll need it to choose which application to open the binary with.

    Friday, July 19, 2013 8:37 AM