view/download icons missing when using ViewFileItem

[claudiobosticco]

SmartClient Version: v13.1p_2025-11-25/AllModules Development Only (built 2025-11-25)

Hi, I’m trying to use ViewFileItem with the #upload example.
After uploading a file successfully, and selecting the record in the grid, I would expect to see the preview and download icons in the viewForm, but they don’t show up.
Here is the code I’m using:

<DataSource ID="mediaLibrary" serverType="sql" tableName="mediaLibrary">
    <fields>
        <field name="pk" type="sequence" hidden="true" primaryKey="true"/>
        <field name="title"/>
        <field name="image" type="binary" maxFileSize="5242880" required="true"/>
    </fields>
</DataSource>

isc.DynamicForm.create({
    autoDraw: false,
    ID: "uploadForm", width: 300,
    dataSource: mediaLibrary,
    fields: [
        { name: "title", required: true },
        { name: "image", type: "imageFile", multiple:false, hint: "Maximum file size is 5 MiB" },
        { title: "Save", type: "button",
            click: function () {
                this.form.saveData("if(dsResponse.status>=0) uploadForm.editNewRecord()");
            }
        }
    ]
});

isc.DynamicForm.create({
    autoDraw: false,
    ID: "viewForm",
    dataSource: mediaLibrary,
    width: "100%",
    fields: [
        { name: "title", title: "Title", type: "text", width: "*" },
        { name: "image", title: "image", editorType: "ViewFileItem", showFileInline:false,
            startRow: false, endRow: false
        }
    ]
});

isc.ListGrid.create({
    autoDraw: false,
    ID: "mediaListGrid",
    width: "100%",
    height: 224,
    autoFetchData: true,
    recordClick:"viewForm.editRecord(record)",
    dataSource: mediaLibrary
});

isc.VLayout.create({
    autoDraw: false,
    ID:"mainLayout",
    width:500,
    height:250,
    members:[viewForm, mediaListGrid]
});

isc.HStack.create({
    width:"100%",
    membersMargin: 10,
    members:[uploadForm, mainLayout]
});

Is there an issue or am I missing something?

[Isomorphic]

We just tested your sample code from the showcase and both icons are present and functioning correctly. Tested with various skins from the Flat and Enterprise series.

For instance:
Tahoe:


Stratus:





Please retest and let us know if there is anything else in your code that was not included in your post.

Regards
Isomorphic Software

[claudiobosticco]

Hi, I wasn’t referring to the icons on the grid records, but to the icons on the ViewFileItem inside the viewForm (above the grid).

The documentation for ViewFileItem explicitly mentions them:

Displays one of two UIs, according to the value of showFileInline. If showFileInline is false, this Item displays the View and Download icons and the filename. Otherwise, it streams the image-file and displays it inline.

[Isomorphic]

OK. We were able to reproduce the issue and we have fixed it. Please try again with tomorrow’s builds (November 28).

Regards
Isomorphic Software

[claudiobosticco]

Thanks, I’ll try it as soon as it’s available.

I also noticed that in the docs for FileItem/ViewFileItem, in the displayCanvas/displayForm/displayItem properties, a "blob" field type is mentioned:

...and the field type is "blob"

However, I can’t find any documentation for a blob FieldType.

[claudiobosticco]

SmartClient Version: v13.1p_2025-11-28/AllModules Development Only (built 2025-11-28)

OK. We were able to reproduce the issue and we have fixed it. Please try again with tomorrow’s builds (November 28).

I see it's fixed, thank you very much!

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-03/AllModules Development Only (built 2025-12-03)

Hi, I think I've found another problem.
In a ViewFileItem I’m trying to customize the displayItem that shows the file name, but it doesn’t seem to work.

I modified the customBinaryField example by adding displayItemProperties, but the formatValue defined there is not being called:

isc.DynamicForm.create({
    ID: "formView",
    width: "100%",
    dataSource: customBinaryField,
    fields: [
           {name: "id", width: 150, canEdit:false},
        {name: "file", canEdit:false, editorType:"ViewFileItem",
             displayItemProperties: {
                 formatValue: function (value, record, form, item) {
                     return "foo";
                 }
             }
        }
    ]
});

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:500, height:224,
    dataSource: customBinaryField,
    selectionType: "single",
    autoFetchData: true,
    fields:[
        {name:"id", width:100},
        {name:"file", width:380}
    ],
    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.HLayout.create({
    ID: "hLayoutButtons",
    width: 500,
    layoutMargin: 10,
    membersMargin: 10,
    members: [buttonDownload, buttonView]
});

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

[Isomorphic]

We just fixed this issue. Please try again with tomorrow’s builds (December 5).

Regards
Isomorphic Software

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-05/AllModules Development Only (built 2025-12-05)

I see it's working now, thank you very much!

[claudiobosticco]

Hello, I actually noticed that the formatValue gets called 5 times for every formView.editSelectedData(listGrid). Is it normal?

Also, value and record in the formatValue don't contain the actual values.

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-05/AllModules Development Only (built 2025-12-05)

Hi, I’ve just realized there’s a regression related to the test case from the first post - the modified #upload sample:

isc.DynamicForm.create({
    autoDraw: false,
    ID: "uploadForm", width: 300,
    dataSource: mediaLibrary,
    fields: [
        { name: "title", required: true },
        { name: "image", type: "imageFile", multiple:false, hint: "Maximum file size is 5 MiB" },
        { title: "Save", type: "button",
            click: function () {
                this.form.saveData("if(dsResponse.status>=0) uploadForm.editNewRecord()");
            }
        }
    ]
});

isc.DynamicForm.create({
    autoDraw: false,
    ID: "viewForm",
    dataSource: mediaLibrary,
    width: "100%",
    fields: [
        { name: "title", title: "Title", type: "text", width: "*" },
        { name: "image", title: "image", editorType: "ViewFileItem", showFileInline:false, canEdit:false,
            startRow: false, endRow: false
        }
    ]
});

isc.ListGrid.create({
    autoDraw: false,
    ID: "mediaListGrid",
    width: "100%",
    height: 224,
    autoFetchData: true,
    recordClick:"viewForm.editRecord(record)",
    dataSource: mediaLibrary
});

isc.VLayout.create({
    autoDraw: false,
    ID:"mainLayout",
    width:500,
    height:250,
    members:[viewForm, mediaListGrid]
});

isc.HStack.create({
    width:"100%",
    membersMargin: 10,
    members:[uploadForm, mainLayout]
});

With both showFileInline set to either true or false, and using either type="binary" or type="imageFile" for the image field, after uploading an image, when I click on the corresponding record in the grid, nothing is displayed in the image formItem (viewForm). I don’t see the image when showFileInline is true, nor the view/download icons when it’s false.

[Isomorphic]

We'll check on the regression. Regarding it being called multiple times, it looks like your sample doesn't have autoDraw set up to avoid redraws, so that's expected (and is warned about in the SmartClient log).

[claudiobosticco]

Thanks for the quick reply.
I'm not sure I fully understand the suggestion regarding autoDraw, and I’m not seeing any WARN messages related to it.
Moreover, I’m observing the same behaviour in my application, where I’m already using isc.setAutoDraw(false).

[Isomorphic]

https://smartclient.com/smartclient-...anvas.autoDraw

If you run your code from #7, where you reported seeing duplicate formatValue calls, in an environment where autoDraw is not defaulted to false, you will see each component draw, then get reparented, then draw in its new parent. This can cause a lot of extra draws. These are all logged in the SmartClient Developer Console.

It's not clear in which environment you're seeing a lot of duplicate calls. It's 100% expected in the above circumstance. If you have another situation in which you're seeing it, you might use getStackTrace() to take a look at how it's happening, so you can see whether it's internal SmartClient processing vs your code doing something multiple times.

[claudiobosticco]

Ok, I can investigate what’s happening in my application - where autoDraw is already defaulted to false - to see whether there’s something else triggering the duplicate calls.

But regarding the behaviour in the Showcase: wouldn’t adding isc.setAutoDraw(false) as the first line of the sample be enough to avoid those extra draws, or is there something else that needs to be done in that environment?