File Drop documents as Lozenges

[Graham Quince]

We all know the File Drop is a handy way of uploading documents, but it's not too pretty - especially for things like a Policies page for a school website.  I've just been having a play around with this older tutorial: 

https://schools.frogeducation.com/community/training/html-tutorials/file-drop

And used the code and CSS from the Link to Internet widget, to create this:

• The File Drop is hidden by a rule so it only appears for logged-in Admins.  But make sure you set the file drop to Group and not individual.
   
• The code uses the File Drop's API to return all the files, but then orders them by name instead of upload date.
   
• The File Drop has a tendency to add an underscore if the file bears the same name as one you have uploaded once already (even after deleting) the code splits the file name by underscores and only shows the first part.
   
• Finally - and slightly deviously - I've included a Form with just a text field (which allows the form to submit) and popped an email address in the Form's advanced settings.  When set up, the code hides the form, but triggers the submit button every time a document is downloaded.  (If you can imagine a situation where it would be good to know if someone was downloading all your statutory information in one quick visit).

You can see it in action here:

https://concept-demo.frogos.net/filedropdocs/documents-and-policies

As with all this type of code, it's up to you to have a play around and adapt the code to your own liking.  I'm happy to take a look if you get stuck.

<style>
    .half_width {
        width: calc(50% - 32px);
        float: left;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
</style>

<div class="file_list"></div>

<script type="text/javascript">
    
    var forceDownload = '?mode=download'; // or 
    //var forceDownload = ''; 

    var fileList = arguments[0].find('.file_list');
    var baseURL = Frog.Utilities.getBaseUrl();
    var imagebank = baseURL+'/app/public/sprite/os-icon-ext/sprite.png?v=2106_0_15';
    
    var fileDropUUID = 'FILE_DROP_UUID';
    
    var formUUID = 'FORM_UUID';
    fileList.append(
        '<style>'+
        'div[data-content-uuid="'+formUUID+'"] {'+
        'display: none !important;'+
        '}'+
        '</style>'
    );
    
    Frog.Model.api('filedrop.get', {
        filedrop: fileDropUUID
    }).done(function(filesResponse) {
        
        var files = filesResponse.data.resources;
        
        files.sort((a, b) => (a.file.name > b.file.name) ? 1 : -1);

        $.each(files, function(index, file) {

            if (file.deleted == '0') {
                
                var nameToShowArray = file.file.name.split('_');
                var nameToShow = nameToShowArray[0];
                
                fileList.append(
                    '<div data-name="'+nameToShow+'" data-filelink="'+file.file.uuid+'" class="half_width widget-content link-widget">'+
                    '<div class="content-wrapper">'+
                        '<div class="column link-info">'+
                        '<h2 class="os-ellipsis alone" title="'+nameToShow+'">'+
                        '<p class="link_text">'+nameToShow+'</p></h2>'+
                        '</div>'+
                    '</div>'+
                    '<div class="column widget-icon-wrapper">'+
                    '<div style="width: 42px; height: 55px; background-size: auto; background-image: url('+imagebank+')" class="widget-icon os-icon-ext-'+file.file.ext+' os-background-default">'+
                    '<a class="filedrop-preview os-icon-ext file-name"><span class="os-ellipsis file-name">'+file.file.ext+'</span></a>'+
                    '</div>'+
                    '</div></div>'
                );
            }
        })

    });
    
    
    $(fileList).on('click', '.link-widget', function(el){
        Frog.Utilities.download( baseURL+'/app/file/resource/'+el.currentTarget.dataset.filelink + forceDownload,true );
        
        $('div[data-content-uuid="'+formUUID+'"]').find('.btn-success').click();   
        setTimeout(function(){  
             $('div[data-content-uuid="'+formUUID+'"]').find('.reset').click();   
        }, 1000);

    });
</script>