How to open the Uploaded File?

churchil

I have an File upload button. How can i open the files when they are uploaded? (Klick on them open the File)

colin

Hi @churchil ,

This example here shows how to do file upload.

Cheers,

Colin

churchil

this example only opens the picture or file in the table.

But i want to open it in a new tab, or with fullscreen

churchil

Is there an option to but an Button beside the uploaded file? I can give the Button a link with the path so i can open the file in big screen.

colin

Opening it is going to be browser dependent. In that example I posted before, it's being rendered as an image:

                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor.file( 'files', file_id ).web_path+'"/>' :
                        null;
                },

So you could render it as a download link or whatever suits your design.

colin

And yep, that rendering could include a button.

churchil

Can you show me how to include a button here?

        {data: "image",
        render: function (file_id){
            return file_id ?
                '<img src="'+editor.file('test', file_id).img_web_path+'" style="min-width:80%; max-width:100%; min-height:1%; max-height:3%;" />' :
                'No Img';
        },

churchil

or how i can but a link into the button in my script it doesnt work

        {data: "image",
        render: function (file_id){
            return file_id ?
                '<button type="button" class="btn btn-light btn-xs" style="min-width:80%; max-width:100%; min-height:1%; max-height:3%;"><img src="'+editor.file('test', file_id).img_web_path+'" style="min-width:80%; max-width:100%; min-height:1%; max-height:3%;" /> </button>' :
                'No Img';
        }, 

and it doesnt work with window.location.href and with no onclick

churchil

btw this works thx.

{
                label: "PDF:",
                name: "bewerber_upload[].id",
                type: "uploadMany",
                display: function ( fileId, counter ) {
                    return '<a href="'+editor.file( 'test', fileId ).web_path+'" target="_blank" type="button"><iframe src="'+editor.file( 'bewerber_upload', fileId ).web_path+'" width="90%" height="300vh" /></a>';
                },
//                 clearText: "Clear",
                noImageText: 'No PDF'
            }

one more question how can i use a IF instand of the iframe?

churchil

instead of the iframe i want a picture witch change when the .png or .jpg change how can i do this where do i have to give my IF

I tried it like this but that dont work pls help me

, {
                label: "PDF:",
                name: "bewerber_upload[].id",
                type: "uploadMany",
                display: function ( fileId, counter ) {
                 var endung = explode('.',$file_name)[1];
                     if(endung == "pdf"{
                        return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="pdf.png" width="100%" height="100%" /></a>';
                    }else if(endung == "docx"){
                         return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="docx.png" width="100%" height="100%" /></a>';
                    }else if(endung == "xlsx"){
                         return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="xlsx.png" width="100%" height="100%" /></a>';
                     }else if(endung == "???"){
                         return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="pdf.png" width="100%" height="100%" /></a>';
                     }
                    return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="pdf.png" width="100%" height="100%" /></a>';
                },

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I don't really understand what you mean I'm afraid. Do you want to show the pdf as a png? If so, you'd need to have a process on the server that would convert the pdf to png - imagemagick for example.

Allan

churchil

i want to show a picture instead of the preview of the pdf.

it works with this:

                display: function ( fileId, counter ) {
                    var filename = editor.file( 'bewerber_upload', fileId ).file_name;       
                    var endung = filename.substring(filename.length - 4, filename.length);          
                    endung = endung.replace('.',''); 
if(endung == "pdf"){
                        return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="pdf.png" width="100%" height="100%" /></a><p>'+filename+'</p>';
                    }else if(endung == "docx"){
                        return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="docx.png" width="100%" height="100%" /></a><p>'+filename+'</p>';
                    }else if(endung == "xlsx"){
                        return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="xlsx.png" width="100%" height="100%" /></a><p>'+filename+'</p>';
                    }else if(endung == "png"){
                        return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="'+editor.file( 'bewerber_upload', fileId ).web_path+'" width="100%" height="100%" /></a><p>'+filename+'</p>';
                    }else if(endung == "jpeg"){
                        return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="'+editor.file( 'bewerber_upload', fileId ).web_path+'" width="100%" height="100%" /></a><p>'+filename+'</p>';
                    }
//                     console.log(endung);
//                     return '<a href="'+editor.file( 'bewerber_upload', fileId ).web_path+'" target="_blank" type="button"><img src="pdf.png" width="100%" height="100%" /></a>';
                },

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.