How to open the Uploaded File?

How to open the Uploaded File?

churchilchurchil Posts: 34Questions: 5Answers: 0

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

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @churchil ,

    This example here shows how to do file upload.

    Cheers,

    Colin

  • churchilchurchil Posts: 34Questions: 5Answers: 0

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

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

  • churchilchurchil Posts: 34Questions: 5Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    And yep, that rendering could include a button.

  • churchilchurchil Posts: 34Questions: 5Answers: 0

    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';
            },
    
  • churchilchurchil Posts: 34Questions: 5Answers: 0

    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

  • churchilchurchil Posts: 34Questions: 5Answers: 0
    edited May 2019

    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?

  • churchilchurchil Posts: 34Questions: 5Answers: 0
    edited May 2019

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • churchilchurchil Posts: 34Questions: 5Answers: 0
    edited June 2019

    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.

This discussion has been closed.