How to view an uploaded image, like in editor?

Stacey1134

Okay this is a simple one I think, but I have not been able to find any forum posts that ask this.

Quick background, so you understand what I am trying to do. I use file upload to upload scanned letters. The file upload piece works fine, and on the database table, it renders fine (see below):

        var table = $('#correspondenceTable').DataTable( {
            // lengthChange: false,
            pageLength : 5,
            lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],  
            ajax: "ajaxCorrespondence.php",
            columns: [
                {data: "scanned_mail.postmark_date" },
                {data: "scanned_mail.priority" },
                {data: "scanned_mail.category" },
                {data: "scanned_mail.attention" },                
                {data: "scanned_mail.chapter", visible: false},
                {data: "scanned_mail.cr_id" },
                {data: "scanned_mail.campaign" },
                {data: "scanned_mail.pe_choice1", visible: false, searchable: false  },
                {data: "scanned_mail.pe_choice2", visible: false, searchable: false  },                                                                                                
                {data: "scanned_mail.notes", visible: false, searchable: false },
                {
                    data: "scanned_mail.image",
                    render: function ( file_id ) {
                        return file_id ?
                            '<img src="'+editor2.file( 'scanned_files', file_id ).web_path+'" width="45" height="45"/>' :
                            null;
                    },
                    searchable: false,
                    defaultContent: "No scan",
                    title: "Letter"
                }                
            ],
            select: true
        } );

When a user views it, and selects the record, they will press a button to view the letter in full size. I am using a separate editor instance for this, which also opens fine (see below):

        editor3 = new $.fn.dataTable.Editor( {
            ajax: "ajaxCorrespondence.php",
            table: "#correspondenceTable",
            display: 'bootstrap',      
            fields: [ {
                    label: "Scanned Letter:",
                    name: "scanned_mail.image",
                    type: "upload",
                    display: function ( file_id ) {
                           return '<img src="'+editor2.file( 'scanned_files', file_id ).web_path+'"/>';
                    },
                    clearText: "Clear",
                    noImageText: 'No Scan'

                }
            ]

        } );

From this editor, however I DO NOT want the user to edit or change the uploaded file (link), and see it full size. This user will be actually reading the scanned letter. So to reiterate, nothing is broken, and everything is currently working as designed, I just want to add this ability. Thoughts and suggestions? Thanks so much.

allan

Do you mean you want the upload field to be read only? field().disable() will do that.

Or do you mean you just want the file to be shown in the modal, but no editing control for it at all? If so, use this plug-in which will draw out the value (you'd need to modify it a little to include the img element.

Allan

Stacey1134

Yes, the file shown in the modal with no editing control. I installed the plug in, and it's only returning the file_id number no matter what variation I try.

Thing is, I definitely needed this plug-in earlier, and I will make good use of it in the rest of my project so thanks. I'm going to mark this answered, even though it hasn't solved my problem as of yet. If you can post a working example, that would be helpful. Otherwise thanks for the direction, I know this will work somehow, when I figure it out I will post it for the next person.

Stacey1134

Ok, this may be a possible fix, but I need a little help.
I found this post https://datatables.net/forums/discussion/71125/showing-an-image-in-an-image-viewer. And it does exactly what I need.

However the render function is not passing over the path, so the viewer works, but has no image to link to. See here:

       var table = $('#correspondenceTable').DataTable( {
            // lengthChange: false,
            pageLength : 5,
            lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],  
            ajax: "ajaxCorrespondence.php",
            columns: [
                {data: "scanned_mail.postmark_date" },
                {data: "scanned_mail.priority" },
                {data: "scanned_mail.category" },
                {data: "scanned_mail.attention" },                
                {data: "scanned_mail.chapter", visible: false},
                {data: "scanned_mail.cr_id" },
                {data: "scanned_mail.campaign" },
                {data: "scanned_mail.pe_choice1", visible: false, searchable: false  },
                {data: "scanned_mail.pe_choice2", visible: false, searchable: false  },                                                                                                
                {data: "scanned_mail.notes", visible: false, searchable: false },
                {
                    data: "scanned_mail.image",
                    render: function ( file_id ) {
                        return file_id ?
                            '<img src="'+editor2.file( 'scanned_files', file_id ).web_path+'" width="45" height="45"/>' :
                            null;
                    },
                    searchable: false,
                    defaultContent: "No scan",
                    title: "Letter",
                    className: "image"
                }                
            ],
            select: true
        } );

        // Display the buttons
        new $.fn.dataTable.Buttons( table, [

            { extend: "create", className: 'btn btn-success', text: '<i class="fa-duotone fa-memo-pad"></i>', 
                titleAttr: 'Scan New Letter', editor: editor1, formTitle: 'Scan New Correspondence' },
            { extend: "edit", className: 'btn btn-warning', text: '<i class="fa-duotone fa-i-cursor"></i>', 
                titleAttr: 'Edit Letter Details', editor: editor2, formTitle: 'Change Existing Scanned Correspondence'  },
            { extend: "remove", className: 'btn btn-danger', text: '<i class="fa-duotone fa-trash"></i>', 
                titleAttr: 'Delete Letter', editor: editor2 },
            {
                className: 'btn btn-info',
                text: '<i class="fa-duotone fa-user-magnifying-glass"></i>',
                titleAttr: 'Comrade Lookup',
                action: function ( e, dt, node, conf ) {                  
                    $('#comradeLookup').modal('show'); 
                }
            },
            { extend: "create", className: 'btn btn-success',text: '<i class="fa-duotone fa-face-smile-plus"></i>', 
                titleAttr: 'Add New Comrade', editor: contactEditor, formTitle: 'Add New Comrade' },
            { extend: "edit", className: 'btn btn-info',text: '<i class="fa-duotone fa-memo"></i>', 
                titleAttr: 'View Letter', editor: editor3, formTitle: 'Comrade Letter' }                        
        ] );

        table.buttons().container()
            .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

        table.on("click", "td.image", function(e) {
            e.preventDefault()
        
            let table = $(this).closest("table").DataTable()
            let row = $(this).closest("tr")
            let data = table.row(row).data()
        
            let image = new Image()
            image.src = data.web_path
            image.alt = data.file_name
        
            let viewer = new Viewer(image, {
                zoomRatio: 2,
                maxZoomRatio: 2,
                hidden: function() {
                    viewer.destroy();
                }
            }).show()
        })


    } );

alternatively, this wouldn't work either: It shows the image id of 5

        editor3 = new $.fn.dataTable.Editor( {
            ajax: "ajaxCorrespondence.php",
            table: "#correspondenceTable",
            display: 'bootstrap',      
            fields: [ {
                    label: "Scanned Letter:",
                    name: "scanned_mail.image",
                    type: "display",
                    def: function ( file_id ) {
                           return '<img src="'+editor3.file( 'scanned_files', file_id ).web_path+'"/>';
                    },
                }
            ]

        } );

        editor3.on('open', function(e, mode, action) {
            $('div.modal-dialog', editor2.displayNode()).addClass('modal-xl');
            editor3.field( 'scanned_mail.image' ).message( function (file_id) {
                return '<img src="'+editor2.file( 'scanned_files', file_id ).web_path+'"/>';
            });  
        });    

Thoughts?

allan

There is no render or display option for that plug-in. You'd need to update the set function in it to create the img tag based on the file information. You can use this.file('scanned_files', val); to get the file information (that just gives you the file() method.

Allan

Stacey1134

Ahh, Thanks!

Just so anyone else tries to do this, modifying the set function in editor.display.js from

    set: function ( conf, val ) {
        conf._rawHtml = val;
        conf._div.html( val );
    },

to this

    set: function ( conf, val ) {
        conf._rawHtml = val;
        conf._div.html( 
            '<img src="' +this.file( 'scanned_files', val ).web_path+'"/>'
        );
    },

note: scanned_files is my table name to store file info. Like files in the editor examples.
Will allow you to display the the file image, in say a separate editor instance like this

        editor3 = new $.fn.dataTable.Editor( {
            ajax: "ajaxCorrespondence.php",
            table: "#correspondenceTable",
            display: 'bootstrap',      
            fields: [ {
                    // label: "Scanned Letter:",
                    name: "scanned_mail.image",
                    type: "display"
                }                    
            ]
        } );

that users can activate with a button like this:

            { extend:...

            { extend: "edit", className: 'btn btn-info',text: '<i class="fa-duotone fa-memo"></i>', 
                titleAttr: 'View Letter', editor: editor3, formTitle: 'Comrade Letter' }                        
        ] );

        table.buttons().container()
            .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

Awesome, This really beats taking the value and image paths from the select, loading and rendering into a separate bootstrap modal. Which was what I thought I'd have to do.

allan

A nice option for that plug-in might be to add a render option to it. It isn't something I've encountered a need for before, but now that I've seen your question here, I'm surprised I haven't! I'll look into that.

Allan

Stacey1134

Also like I said before, I really love this plugin, there are so many frontend uses. So I actually kept _fieldTypes.display = { as is, and added _fieldTypes.displayimage = { with the image changes, that way I can use the plugin for images with type: "displayimage" and type: "display" as you originally designed.