widget column types as filepicker

Our state of the art Gantt chart
Post Reply
User avatar
janan
Premium Member
Premium Member
Posts: 10
Joined: Mon Aug 26, 2019 9:58 am

widget column types as filepicker

Post by janan » Wed Sep 11, 2019 11:59 am

In grid examples, columntypes demo we would like to have widget type as filepicker?

Code: Select all

 {
            text    : 'Widget',
            field   : 'age',
            width   : 100,
            type    : 'widget',
            widgets : [{
                type     : 'filepicker',

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

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 187
Joined: Mon Dec 24, 2018 9:15 am

Re: widget column types as filepicker

Post by sergey.maltsev » Wed Sep 11, 2019 1:41 pm

Hi, janan!

Try this config for filepicker column

Code: Select all

    {
        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

Code: Select all

import '../../lib/Common/widget/FilePicker.js';

User avatar
janan
Premium Member
Premium Member
Posts: 10
Joined: Mon Aug 26, 2019 9:58 am

Re: widget column types as filepicker

Post by janan » Wed Oct 02, 2019 4:03 pm

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 ?

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 187
Joined: Mon Dec 24, 2018 9:15 am

Re: widget column types as filepicker

Post by sergey.maltsev » Thu Oct 03, 2019 9:07 am

Hi!

This is sample code.

Code: Select all

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

Code: Select all

changes {"file":{"value":"MySelectedFileName.gif","oldValue":"empty"}}

User avatar
janan
Premium Member
Premium Member
Posts: 10
Joined: Mon Aug 26, 2019 9:58 am

Re: widget column types as filepicker

Post by janan » Mon Oct 07, 2019 9:26 am

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.

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 187
Joined: Mon Dec 24, 2018 9:15 am

Re: widget column types as filepicker

Post by sergey.maltsev » Mon Oct 07, 2019 10:24 am

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

Code: Select all

function uploadFile(fileName) {
    const formData = new FormData();
    formData.append('file', fileName);
    AjaxHelper.post('upload.php', formData).then(response => {
        console.log(response);
    });
}
Simple php backend

Code: Select all

<?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()
            )
        )
    );
}

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 187
Joined: Mon Dec 24, 2018 9:15 am

Re: widget column types as filepicker

Post by sergey.maltsev » Mon Oct 07, 2019 10:24 am

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

Code: Select all

function uploadFile(fileName) {
    const formData = new FormData();
    formData.append('file', fileName);
    AjaxHelper.post('upload.php', formData).then(response => {
        console.log(response);
    });
}
Simple php backend

Code: Select all

<?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 Reply