Our state of the art Gantt chart


Post by janan »

In grid examples, columntypes demo we would like to have widget type as filepicker?
 {
            text    : 'Widget',
            field   : 'age',
            width   : 100,
            type    : 'widget',
            widgets : [{
                type     : 'filepicker',

            }]
        }
Do we have to configure FilePicker seperately ?
Could you please give some example?

Post by sergey.maltsev »

Hi, janan!

Try this config for filepicker column
    {
        text    : 'Filepicker',
        field   : 'name',
        width   : 100,
        type    : 'widget',
        widgets : [
            {
                type : 'text'
            },
            {
                type          : 'filepicker',
                valueProperty : 'value',
                onChange      : ({ source }) => {
                    // Assign first file name to record's "name" property
                    source.cellInfo.record.name = source.files[0].name;
                    // If you want to hide a badge
                    source.button.badge = '';
                }
            }]
    },

Don't forget to import FilePicker.js
import '../../lib/Common/widget/FilePicker.js';

Post by janan »

Hi,
I am using file picker in one of the columns . When i get storechanges as below i do not get file uploaded row in store changes.
var storeChanges = br.store.changes
Can you please help ?

Post by sergey.maltsev »

Hi!

This is sample code.
new Grid({
    appendTo : 'container',
    columns  : [
        {
            text    : 'File',
            field   : 'file',
            width   : 100,
            type    : 'widget',
            widgets : [
                {
                    type : 'text'
                },
                {
                    type          : 'filepicker',
                    valueProperty : 'value',
                    onChange      : ({ source }) => {
                        // Assign first file name to record's "file" property
                        source.cellInfo.record.file = source.files[0].name;
                        // If you want to hide a badge
                        source.button.badge = '';
                    }
                }]
        }
    ],
    store : new Store({
        data      : [{ file : 'empty' }],
        listeners : {
            change : ({ changes }) => {
                console.log('changes', JSON.stringify(changes));
            }
        }
    })
});
You will see something like this in console after selecting a file
changes {"file":{"value":"MySelectedFileName.gif","oldValue":"empty"}}

Post by janan »

hi,
This above works in getting the file name .But how do i send the file object ?If i send the data JSON.stringify i do not get the file object with it.

Post by sergey.maltsev »

Hi!

You could use AjaxHelper.post method to upload file using FormData.
https://www.bryntum.com/docs/grid/#Common/helper/AjaxHelper#function-post-static
https://developer.mozilla.org/en-US/docs/Web/API/FormData
function uploadFile(fileName) {
    const formData = new FormData();
    formData.append('file', fileName);
    AjaxHelper.post('upload.php', formData).then(response => {
        console.log(response);
    });
}
Simple php backend
<?php

try {
    move_uploaded_file( $_FILES['file']['tmp_name'], $_FILES['file']['name']);
    echo '{"success": true, "msg": "Upload ok!"}';
} catch (Exception $e) {
    die(
        json_encode(
            array(
                'success' => false,
                'msg'     => $e->getMessage()
            )
        )
    );
}

Post by sergey.maltsev »

Hi!

You could use AjaxHelper.post method to upload file using FormData.
https://www.bryntum.com/docs/grid/#Common/helper/AjaxHelper#function-post-static
https://developer.mozilla.org/en-US/docs/Web/API/FormData
function uploadFile(fileName) {
    const formData = new FormData();
    formData.append('file', fileName);
    AjaxHelper.post('upload.php', formData).then(response => {
        console.log(response);
    });
}
Simple php backend
<?php

try {
    move_uploaded_file( $_FILES['file']['tmp_name'], $_FILES['file']['name']);
    echo '{"success": true, "msg": "Upload ok!"}';
} catch (Exception $e) {
    die(
        json_encode(
            array(
                'success' => false,
                'msg'     => $e->getMessage()
            )
        )
    );
}

Post by janan »

Hi,
We use 'filePicker' widget based on the above example. After updating based on latest release, onChange function is running twice. Could you help it ?

Post Reply