Uploading file from listgrid

[eakduman]

Hi Team,

I need to know if it is possible to upload file from a listgrid, I mean adding new record in the listgrid and uploading a file in an image field

Smart client version : v101p_2019-05-14_PowerEdition

[Isomorphic]

Hi eakduman
We're not 100% clear on exactly what you need, but to understand how SmartClient handles file upload, it's probably best to start with this overview:
https://www.smartclient.com/smartcli...=group..upload

If this doesn't give you enough information to achieve what you need, we'll probably need a fuller description of exactly what you're after to comment on whether it's possible and how best to proceed

Regards
Isomorphic Software

[eakduman]

I created an example for upload via ListGrid. If you copy the following program code to the example at https://www.smartclient.com/smartcli...tomBinaryField and follow the instructions in the images, I will explain what I want to do.

isc.DynamicForm.create({
    ID: "formView",
    width: "100%",
    dataSource: customBinaryField,
    fields: [
           {name: "id", width: 150, canEdit:false},
        {name: "file", canEdit:false}
    ]
});

isc.DynamicForm.create({
    ID: "formEdit",
    width: 100,
    dataSource: customBinaryField,
    fields: [
        {name: "id", width: 150, required: true},
        {name: "file", required: true}
    ]
});

isc.IButton.create({
    ID: "uploadButton",
    title: "Upload",
    width: 100,
    click: function(){
        formEdit.saveData("if(dsResponse.status>=0) formEdit.editNewRecord()");
    }
});

isc.VLayout.create({
    ID: "vLayoutForms",
    width: 100,
    members: [
        isc.Label.create({
            contents: "Editor",
            width: 50,
            height: 25,
            autoDraw: true,
            baseStyle: "exampleSeparator"
        }),
        formEdit,
        uploadButton,
        isc.Label.create({
            contents: "View",
            width: 50,
            height: 25,
            autoDraw: true,
            baseStyle: "exampleSeparator"
        }),
        formView
    ]
});

isc.ListGrid.create({
    ID: "listGrid",
    width:600, height:224, alternateRecordStyles:true,
    dataSource: customBinaryField,
    selectionType: "single",
    autoFetchData: true,
    canEdit:true,
    canRemoveRecords: true,
    fields:[
        {name:"id", width: "10%"},
        {name:"file", width:"90%"}
    ],
    recordClick: function(viewer, record, recordNum, field, fieldNum, value, rawValue) {
        formEdit.editSelectedData(listGrid);
        formView.editSelectedData(listGrid);
    }
});

isc.HLayout.create({
    ID: "hLayoutTop",
    width: 700,
    layoutMargin:10,
    membersMargin: 10,
    members:[listGrid, vLayoutForms]
});

isc.Button.create({
    ID: "buttonDownload",
    width:200,
    title: "Download Selected File",
    click: function () {
        var selectedRecord = listGrid.getSelectedRecord();
        if (selectedRecord == null) {
            isc.say("You must select one record");
            return;
        }
        customBinaryField.downloadFile(selectedRecord);
    }
});

isc.Button.create({
    ID: "buttonView",
    width:200,
    title: "View Selected File",
    click: function () {
        var selectedRecord = listGrid.getSelectedRecord();
        if (selectedRecord == null) {
            isc.say("You must select one record");
            return;
        }
        customBinaryField.viewFile(selectedRecord);
    }
});

isc.Button.create({
    ID: "buttonNewRecord",
    width:200,
    title: "New Record",
    click: function () {
         listGrid.startEditingNew();
    }
});



isc.HLayout.create({
    ID: "hLayoutButtons",
    width: 500,
    layoutMargin: 10,
    membersMargin: 10,
    members: [buttonDownload, buttonView, buttonNewRecord]
});

isc.VLayout.create({
    ID: "vLayout",
    width: 300,
    members: [hLayoutTop, hLayoutButtons]
});

[Isomorphic]

Ah - you're trying to use inline grid editing to upload a new file for a binary field. That's not currently supported.

For now you'll have to provide an alternative UI for the users (a DynamicForm).
In fact this sample demonstrates this with the "Editor" form on the right. You can edit new records via 'startEditingNew()' on that form, or you can edit existing records via 'editSelectedData()'