Use of Upload function with Standalone editor

fabioberetta

Hello,

I am using standalone collection editor. I took this example:

https://editor.datatables.net/examples/standalone/collection.html

Now I would like to use photos in the collection and would like touse Upload functions. Now without datatables I cannot use the File() functin that is used in the editor.

Can you suggest a way I can use the upload function without the dataTables?

ty
f

fabioberetta

Hello Allan,

If you have some spare time could you give me a hint. I really cant find how to modify the editor setup in case I need to use a standalone edit in conjunction with Upload.

How can I replace the function file()?

edUser = new $.fn.dataTable.Editor( {
        ajax: "_php/dtUsers.php",
        fields: [ {
                label: "First name:",
                name: "users.first_name"
            }, {
                label: "Last name:",
                name: "users.last_name"
            }, {
                label: "Position:",
                name: "users.position"
            }, {
                label: "Email",
                name: "users.user_email"
            }, {
                label: "Phone",
                name: "users.phone"
            }, {
                label: "Role",
                name: "users.role_id"
            }, {
                                label: "Photo",
                                name: "users.photo_id",
                                type: "upload",
                                display: function ( file_id ) {
                                    return ( file_id && file_id!=0 ) ? '<img src="'+tabUsers.file( 'file', file_id ).webPath+'USER_T128_'+tabUsers.file( 'file', file_id ).id+'.'+tabUsers.file( 'file', file_id ).fileExtension+'"/>' : null;
                                }
                        }
        ]
    } );

ty
f

allan

Hi,

So the key point here is that you can't access the file() method that Editor adds to DataTables since you don't have a DataTable.

However, you will still have access to the file id (from whatever you data source is), but you would need to look up the information about the file in some manner other than file(). That could be an Ajax call to the server or you could have it cached in a Javascript variable somewhere and look that up (which is basically what file() does).

Aside from that, the upload field type should be usable in a standalone table just like any other field type. As a test, you could simply display the file id to start with, rather than rendering an img tag (or whatever you need).

Regards,
Allan

fabioberetta

Hi Allan,

thanks for the tip. Displaying the id is not an issue. I can have it stored in a span just like any other field.

I know how to build alternatives to file() to lookup the table to collect the web path ro render the image.

What I need is more specific. I would like t use the editor to display the modal window to allow editting of one of the collection panel. I would like to use it to upload the photo of the employee that I am editing.

Now what I do not know is how to replace the file() function to use your perfect editor upload interface (file selection button, drag and drop area and show the uploaded photo next to the file selection button).

ty
f

allan

I know how to build alternatives to file()

I do not know is how to replace the file() function

I'm afraid I'm a little confused. You do, or don't know how to replace file()?

Allan

fabioberetta

Hi Allan,

I'll make it more simple.

I need to use the of the editor and use the upload. How should I build the render function without use of the file() function?

ty
f

fabioberetta

Hello Allan,

I have tried this:

function getWebLink(id, callback) {
        
        var dataLoad = new Object; 
        
        dataLoad ['requestedService'] = "fileWebLink";
        dataLoad['id'] = id;
        
        $.ajax({
            url: "_php/serviceDispatch.php",
            type: 'POST',
            dataType: "json",
            data: dataLoad,
            success: function (link) {
                callback(link);
            }
        });
    
    };

and changed the code for the editor in this way:

{
                        label: "Photo",
                        name: "users.photo_id",
                        type: "upload",
                        display: function ( photo_id ) {
                                getWebLink ( photo_id, function (link) {
                                    var _link = '<img src="' + link + '"/>';
                                    return '<img src="' + link + '"/>'                                      } );
                        }

It did not work. The call back returns the right link but it is not displayed in the modal form.

ty
f

fabioberetta

Allan,

I have modified the function to be syncronous and it works.

I do not like syncronous functions. Any suggestion to have the asyncronous version to work?

ty
f

allan

Hi,

The way I'd probably do it myself is to have the renderer create a <div> element with a unique id. Then call your getWebLink function with that id and on Ajax load it will be able to write the image into that div element based on that id.

Regards,
Allan

fabioberetta

Excellent suggestion. I'll give it a try.

ty
f