Cleaner Look File Drop

[paulmitchell1989]

Hello!

In the concept demo it states...

Quote

Using the HTML widget, File Drops can be used to display information to staff with a cleaner look...

Any chance I can have the code? 

Thanks!

[Graham Quince]

<style>
  .fileList{
    float:left;
    border:0px solid #000000;
    height:60px;
    width:90%;
    line-height:60px;
    margin-right:20px;
    font-weight:bold;
    font-size:12pt;
  }
  .os-icon-ext-pdf {
    float:left;
    display:inline-block;
    margin-right:10px;
  }

</style>
<div id="filelist"></div>

<script type="text/javascript">

var baseURL = Frog.Utilities.getBaseUrl(),
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid = '631520BE20028A7887142FA97B1E680DF1A6591CCE9DBBA8';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid
    }).done(function(filesResponse) {
        var $fileList = $('#filelist');

        filesResponse.data.resources.forEach(function(file, index) {
            // Check whether the file is one of these filetypes; Want to add more? Add to the array
            if (['pdf','PDF'].indexOf(file.file.ext.toLowerCase()) > -1) {
                if ($fileList.length) {
                    // This only runs when you have uncommented the HTML code above
                    // This code adds file names to the ul#filelist

                        $fileList.append(
                                         '<a href="'+baseURL+'/app/file/resource/'+file.file.uuid+'">'+
                                         '<div class="fileList">'+
                                             '<div class="os-icon-ext-pdf"></div>'+
                                              file.file.name+
                                          '</div>'+
                                          '</a>'
                         );

                }

            }
        });
    });
</script>

 

[paulmitchell1989]

Thanks @Graham Quince !