All Components:

Object Structure

Folder__c

Fields

Folder Name (Name --> Text)
Level (Level__c -> Picklist [Global (default), Object, Record])
Parent ID (Parent ID__c -> Text 255)
Parent Folder (Parent_Folder__c -> Lookup (Folder__c))

ContentVersion

Fields

Folder (Folder__c -> Lookup (Folder__c))

Apex Classes

FileStructureController.apxc

Aura Components

FileStructureAction.cmp
FileStructureItem.cmp
FileStructure.cmp (exposed = true)

FileStructureController.apxc

public without sharing class FileStructureController {
    
    @AuraEnabled
    public static void saveFile(String fileId, String folderId){
        update new ContentVersion(Id = fileId, Folder__c = folderId);
    }
    
    @AuraEnabled
    public static Wrap getFiles(String recordId, String parentFolderId){
        String objPrefix = String.isBlank(recordId)? '' : recordId.substring(0, 3) + '%';
        Wrap wrapRec = new Wrap();
        Folder__c folderRec;
        for(Folder__c f :[Select Id, Name, Level__c From Folder__c 
                          Where Id = :parentFolderId
                         AND ((Level__c = 'Object' and Parent_ID__c like :objPrefix)
                              OR (Level__c = 'Record' and Parent_ID__c = :recordId)
                              OR (Level__c NOT IN ('Record','Object')))]){
            wrapRec.folder = f;
        }
        List<ChildWrap> childFolders = new List<ChildWrap>();
        for(Folder__c f : [Select Id, Name, Level__c From Folder__c Where Parent_Folder__c =:parentFolderId 
                           AND ((Level__c = 'Object' and Parent_ID__c like :objPrefix)
                                OR (Level__c = 'Record' and Parent_ID__c = :recordId)
                                OR (Level__c NOT IN ('Record','Object')))
                          Order by Name ASC]){
            ChildWrap childFolder = new ChildWrap();
            childFolder.folder = f;
            childFolders.add(childFolder);
        }
        wrapRec.childFolders = childFolders;
        
        Set<Id> cdIds = new Set<Id>();
        for(ContentDocumentLink cdLink :[Select Id, ContentDocumentId From ContentDocumentLInk 
                                         Where LinkedEntityId = :recordId AND
                                        ContentDocument.LatestPublishedVersion.Folder__c =:parentFolderId ]){
            cdIds.add(cdLink.ContentDocumentId);
        }
        String query = 'Select Id, Title, CreatedDate, FileType, ContentDocumentId ';
        query += ' From ContentVersion ';
        query += ' Where ContentDocumentId IN :cdIds and IsLatest = true ';
        query += ' ORDER BY CreatedDate desc';
        system.debug('query :: '+query);
        wrapRec.files = Database.query(query);
        return wrapRec;
    }
    
    @AuraEnabled
    public static Integer getFileCount(String recordId){
        String objPrefix = String.isBlank(recordId)? '' : recordId.substring(0, 3) + '%';
        Set<Id> folderIds = new Set<Id>();
        for(Folder__c f : [Select Id, Name, Level__c From Folder__c Where 
                           ((Level__c = 'Object' and Parent_ID__c like :objPrefix)
                            OR (Level__c = 'Record' and Parent_ID__c = :recordId)
                            OR (Level__c NOT IN ('Record','Object')))
                           Order by Name ASC]){
            folderIds.add(f.Id);
        }         
        Set<Id> cdIds = new Set<Id>();
        for(ContentDocumentLink cdLink :[Select Id, ContentDocumentId From ContentDocumentLInk 
                                         Where LinkedEntityId = :recordId AND
                                        (ContentDocument.LatestPublishedVersion.Folder__c IN :folderIds OR
                                         ContentDocument.LatestPublishedVersion.Folder__c = null)]){
            cdIds.add(cdLink.ContentDocumentId);
        }
        String query = 'Select Id, Title, CreatedDate, FileType, ContentDocumentId';
        query += ' From ContentVersion ';
        query += ' Where ContentDocumentId IN :cdIds and IsLatest = true ';
        query += ' ORDER BY CreatedDate desc';
        system.debug('query :: '+query);
        List<sObject> sObjectList = Database.query(query);
        return sObjectList.size();
    }
        
    @AuraEnabled
    public static String getUrlPrefix(){
        String urlPrefix;
        for(Network n :[SELECT Id, UrlPathPrefix FROM Network Where Id = :Network.getNetworkId()]){
            urlPrefix = n.UrlPathPrefix;
        }
        return urlPrefix;
    }
    
    public class Wrap{
        @AuraEnabled public Folder__c folder;
        @AuraEnabled public List<ChildWrap> childFolders;
        @AuraEnabled public List<ContentVersion> files;
    }
    
    public class ChildWrap{
        @AuraEnabled public boolean isExpand = false;
        @AuraEnabled public Folder__c folder;
    }
}

FileStructureAction.cmp

<aura:component controller="FileStructureController">
    <aura:attribute name="refresh" type="Aura.Action" />
    <aura:attribute name="parent" type="Aura.Action" />
    <aura:attribute name="fields" type="String[]" default="Name,Parent_Folder__c"/>
    
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="parentFolderId" type="String"/>
    <aura:attribute name="isEdit" type="Boolean" default="true"/>
    
    
    <aura:attribute name="folderId" type="String"/>
    <aura:attribute name="folderName" type="String"/>
    <aura:attribute name="pFolderId" type="String"/>
    <aura:attribute name="level" type="String"/>
    
    <aura:attribute name="isFolder" type="Boolean" default="false"/>
    <aura:attribute name="isFileUpload" type="Boolean" default="false"/>
    
    
    <!-- body -->
    <aura:if isTrue="{!v.isEdit}">
        <lightning:buttonIcon  variant="brand"
                              iconName = "utility:upload"
                              title="Upload File" onclick="{!c.uploadFileHanlder}"
                              alternativeText="file" size="small"/>
        <lightning:buttonIcon  variant="brand" size="small"
                              iconName = "utility:add"
                              title="Create Folder" onclick="{!c.newFolderHandler}"
                              alternativeText="add"/>
        <aura:if isTrue="{!!empty(v.parentFolderId)}">
            <lightning:buttonIcon  variant="brand" size="small"
                                  iconName = "utility:edit"
                                  title="Edit Folder" onclick="{!c.onEditHandler}"
                                  alternativeText="edit"/>
        </aura:if>
        
        <aura:if isTrue="{!v.isFileUpload}">
            <!-- Modal/Popup Box starts here-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-02" aria-modal="true" aria-describedby="modal-content-id-2" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.onCloseHandler }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">File Upload</h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium modal-content-css" id="modal-content-id-2">
                        <lightning:fileUpload name="fileUploader"
                                              label="Upload File"
                                              multiple="false"
                                              onuploadfinished="{!c.handleUploadFinished}"
                                              recordId="{!v.recordId}"
                                              alternativeText="file upload"
                                              required="true"
                                              /> 
                    </div>
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.onCloseHandler}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
        
        <aura:if isTrue="{!v.isFolder}">
            
            <!-- Modal/Popup Box starts here-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <lightning:recordEditForm aura:id="folderRecordEditForm"
                                              objectApiName="Folder__c" 
                                              recordId="{!v.folderId}" 
                                              onsubmit="{!c.handleSubmit}"
                                              onsuccess="{!c.handleSuccess}">
                        
                        <!-- Modal/Popup Box Header Starts here-->
                        <header class="slds-modal__header">
                            <lightning:buttonIcon iconName="utility:close"
                                                  onclick="{! c.onCloseHandler }"
                                                  alternativeText="close"
                                                  variant="bare-inverse"
                                                  class="slds-modal__close"/>
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Folder</h2>
                        </header>
                        <!--Modal/Popup Box Body Starts here-->
                        <div class="slds-modal__content slds-p-around_medium modal-content-css" id="modal-content-id-1">
                            <lightning:messages> </lightning:messages>
                            <aura:if isTrue="{!empty(v.folderId)}">
                                <lightning:inputField fieldName="Name" value="{!v.folderName}" />
                                <lightning:inputField fieldName="Level__c"/>
                                <lightning:inputField fieldName="Parent_Folder__c" value="{!v.pFolderId}" disabled="true"/>
                                <aura:set attribute="else">                             
                                    <lightning:inputField fieldName="Name"/>
                                    <lightning:inputField fieldName="Parent_Folder__c"/>
                                    <lightning:inputField fieldName="Level__c"/>
                                </aura:set>
                            </aura:if> 
                        </div>
                        <!--Modal/Popup Box Footer Starts here-->
                        <footer class="slds-modal__footer">
                            <lightning:button variant="neutral"
                                              label="Cancel"
                                              title="Cancel"
                                              onclick="{! c.onCloseHandler}"/>
                            <lightning:button type="submit" variant="brand"
                                              label="{!IF(empty(v.folderId),'Create','Update')}"
                                              title="{!IF(empty(v.folderId),'Create','Update')}"/>
                        </footer>
                    </lightning:recordEditForm>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
        
    </aura:if>  
</aura:component>

FileStructureActionController.js

({
    uploadFileHanlder : function(component, event, helper){
        component.set("v.isFileUpload", true);
    },
    
    onRefreshHandler : function(component, event, helper){
        helper.refreshHelper(component, event, helper);
    },
    
    handleUploadFinished : function(component, event, helper){
        var uploadedFiles = event.getParam("files");
        // Attach uploaded file to the record
        var action = component.get("c.saveFile");
        action.setParams({
            "fileId": uploadedFiles[0].contentVersionId,
            "folderId" : component.get('v.parentFolderId')
        });
        action.setCallback(this, function(response) {
            component.set("v.isFileUpload", false);
            helper.refreshHelper(component, event, helper);
            var action =  component.get("v.parent");
            if(!$A.util.isEmpty(action)){
                $A.enqueueAction(action);
            }
        });
        $A.enqueueAction(action);
    },
    
    newFolderHandler : function(component, event, helper) {
        component.set("v.pFolderId", component.get("v.parentFolderId"));
        component.set("v.folderName", null);
        component.set('v.folderId', null);
        component.set("v.isFolder", true);
    },
    
    onEditHandler : function(component, event, helper) {
        component.set("v.pFolderId", null);
        component.set("v.folderName", null);
        component.set('v.folderId', component.get("v.parentFolderId"));
        component.set("v.isFolder", true);
    },
    
    onCloseHandler : function(component, event, helper){
        component.set("v.isFolder", false);
        component.set("v.isFileUpload", false);
    },
    
    handleSubmit : function(component, event, helper){
        event.preventDefault(); // Stop the form from submitting
        var fields = event.getParam("fields");
        var parentId = null;
        if(['Object','Record'].includes(fields.Level__c)){
            parentId = component.get("v.recordId");
        }
        fields.Parent_ID__c = parentId;
        component.find("folderRecordEditForm").submit(fields);
    },
    
    handleSuccess : function(component, event, helper){
        helper.refreshHelper(component, event, helper);
    }
})

FileStructureActionHelper.js

({    
    refreshHelper : function(component, event, helper){
        component.set("v.isFolder", false);
        component.set("v.isFileUpload", false);
        var action =  component.get("v.refresh");
        $A.enqueueAction(action);
    }
})

FileStructureAction.css

.THIS{
    font-size: normal;
}

.THIS .modal-content-css{
    text-align: left;
}

FileStructureActionItem.cmp

<aura:component controller="FileStructureController">
    <!-- handlers -->
    <aura:attribute name="parent" type="Aura.Action" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:method name="refresh" action="{!c.doInit}">
    </aura:method>
    
    <!-- attributes -->
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="parentFolderId" type="String"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="urlPrefix" type="String"/>
    <aura:attribute name="isEdit" type="Boolean" default="true"/>
    
    <aura:attribute name="index" type="Integer" default="0"/>
     
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="isExpand" type="Boolean" default="false"/>
    
    <!-- body -->
    
    <aura:if isTrue="{!!empty(v.data)}">
        <aura:if isTrue="{!!empty(v.data.folder)}">
            <div style="{!IF(!v.isExpand,'box-shadow: inset 0px -5px 5px -5px rgba(0,0,0,0.75);','')}"
                 class="folderSection slds-p-vertical_small slds-border_bottom slds-border_top slds-border_left slds-border_right">
                <aura:if isTrue="{!v.isEdit}">
                    <div class="folderLevel" onclick="{!c.handleExpandOrCollpase}">
                        <aura:if isTrue="{!OR(v.data.folder.Level__c == 'Global', empty(v.data.folder.Level__c))}">G</aura:if>
                        <aura:if isTrue="{!(v.data.folder.Level__c == 'Object')}">O</aura:if>
                        <aura:if isTrue="{!(v.data.folder.Level__c == 'Record')}">R</aura:if>
                    </div>
                </aura:if>
                <lightning:icon class="folderIcon slds-p-left_small" iconName="{!if(v.isExpand, 'utility:opened_folder', 'utility:open_folder')}" size="small" onclick="{!c.handleExpandOrCollpase}"/>
                <div class="folderName folderIcon" onclick="{!c.handleExpandOrCollpase}">{!v.data.folder.Name}</div>
                <div style="flex: auto; padding-right: 15px;text-align:right;" class="slds-float_right">
                    
                    <c:FileStructureAction parentFolderId="{!v.parentFolderId}" 
                                           recordId="{!v.recordId}"
                                           isEdit = "{!v.isEdit}"
                                           refresh="{!c.doInit}"
                                           parent="{!c.refreshParent}"/>
                </div>
            </div>
        </aura:if>
        
        
        <aura:if isTrue="{!OR(v.isExpand, empty(v.parentFolderId))}">
            <div class="files">
                <aura:if isTrue="{!!empty(v.data.files)}">
                    <div style="border:1px solid lightgray;">
                            <lightning:dataTable data="{!v.data.files}"
                                             columns="{!v.columns}"
                                             hideCheckboxColumn = "true"
                                             keyField="Id"
                                             class="table-css" 
                                             onrowaction="{!c.handleRowAction}"
                                             />
                    </div>
                </aura:if>
                
                <aura:if isTrue="{!!empty(v.data.childFolders)}">
                    <aura:iteration items="{!v.data.childFolders}" var="child">
                        <div>
                            <c:FileStructureItem 
                                                 parentFolderId="{!child.folder.Id}" 
                                                 recordId="{!v.recordId}" 
                                                 columns = "{!v.columns}"
                                                 urlPrefix = "{!v.urlPrefix}"
                                                 index="{!v.index + 1}"
                                                 isExpand="true"
                                                 isEdit="{!v.isEdit}"
                                                 parent="{!c.refreshParent}"/>
                        </div>
                    </aura:iteration>
                </aura:if>
            </div>
        </aura:if>
    </aura:if>
    
        <lightning:navigation aura:id="navService"/>

</aura:component>

FileStructureActionItemController.js

({
    doInit : function(component, event, helper) {
        helper.loadData(component, event, helper);
    },
    
    refreshParent : function(component, event, helper){
        var action =  component.get("v.parent");
        $A.enqueueAction(action);
    },
    
    handleExpandOrCollpase : function(component, event, helper){
        component.set("v.isExpand", !component.get("v.isExpand"));
    },
    
    handleRowAction : function(component, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        switch (action.name) {
            case 'preview':
                $A.get('e.lightning:openFiles').fire({
                    recordIds: [row.ContentDocumentId]
                });
                break;
            case 'download':
                var urlPrefix = component.get('v.urlPrefix');
                var url =  ($A.util.isEmpty(urlPrefix) ? '' : '/' + urlPrefix)+'/sfc/servlet.shepherd/document/download/' + row.ContentDocumentId;
                var downloadWindow = window.open(url, "_blank");
                downloadWindow.focus();
                break;
        }
        
    }
})

FileStructureActionItemHelper.js

({
    loadData : function(component, event, helper) {
        var action = component.get("c.getFiles");
        action.setParams({
            "recordId" : component.get("v.recordId"),
            "parentFolderId" : component.get("v.parentFolderId")
        });
        action.setCallback(this, function(res){
            var state = res.getState();
            if(state == 'SUCCESS'){
                var data = res.getReturnValue();
                component.set("v.data", data);
            }
        });
        $A.enqueueAction(action);
    },
})

FileStructureActionItem.css

.THIS .folderIcon{
    cursor: pointer;
}

.THIS .table-css lightning-primitive-header-actions{
    display : none;
}

.THIS .folderLevel{
    position: absolute;
    padding: 7px 0 0 20px;
    font-size: 10px;
    color: white;
}

FileStructure.cmp

<aura:component controller="FileStructureController" implements="flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
    
    <!-- aura handler -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:method name="refresh" action="{!c.doInit}"></aura:method>
    
    <!-- aura attribute -->
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="data" type="List"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="urlPrefix" type="String"/>
    <aura:attribute name="totalFiles" type="Integer" default="0"/>
    <aura:attribute name="isEdit" type="Boolean" default="true"/>
    
    <aura:attribute name="refreshLoad" type="Boolean" default="false"/>
    <aura:attribute name="loading" type="Boolean" default="false"/>
    
    
    
    <!-- body -->
    <div>
        <div class="slds-theme_default">
            <div class="main-section">
                <div class="title">
                    <lightning:icon iconName="standard:file" size="small"/>
                    <div class="title-text">Files <strong>({!v.totalFiles})</strong></div>
                    <div style="flex:auto;" class="slds-text-align_right">
                        <c:FileStructureAction isEdit="{!v.isEdit}"
                                               recordId="{!v.recordId}"
                                               refresh="{!c.refresh}"/>
                    </div>
                </div>
                <div>
                    <aura:if isTrue="{!!v.refreshLoad}">
                        <c:FileStructureItem recordId="{!v.recordId}" 
                                             columns = "{!v.columns}"
                                             urlPrefix = "{!v.urlPrefix}"
                                             isExpand = "true"
                                             isEdit = "{!v.isEdit}"
                                             parent="{!c.handleFileCount}"/>
                    </aura:if>
                </div>
            </div>
        </div>
        
    </div>
    
    <aura:if isTrue="{!v.loading }"> 
        <div aura:id="spinnerId" class="slds-spinner_container" style="position:fixed;">
            <div class="slds-spinner--brand  slds-spinner slds-spinner--large" role="alert">
                <span class="slds-assistive-text">Loading...</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div> 
    </aura:if>
</aura:component>

FileStructureController.js

({
    doInit : function(component, event, helper) {
            helper.loadUrlPrefix(component, event, helper);
            helper.loadTableColumns(component, event, helper);
            helper.loadFileCount(component, event, helper);
        
    },
    
    handleSearch : function(component, event, helper){
        helper.loadFileCount(component, event, helper);
    },
    
    handleFileCount : function(component, event, helper){
        helper.loadFileCount(component, event, helper);
    },
    
    refresh : function(component, event, helper){
        component.set("v.refreshLoad", true);
        window.setTimeout(
            $A.getCallback(function() {
                component.set("v.refreshLoad", false);
            }), 
            500
        );
    }
})

FileStructureHelper.js

({
    loadFileCount : function(component, event, helper){
        var action = component.get("c.getFileCount");
        action.setParams({
            recordId : component.get("v.recordId")
        })
        action.setCallback(this, function(res){
            var state = res.getState();
            if(state == 'SUCCESS'){
                var rslt = res.getReturnValue();
                if(!$A.util.isEmpty(rslt)){
                    component.set("v.totalFiles", rslt);
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    loadUrlPrefix : function(component, event, helper) {
         
        var action = component.get("c.getUrlPrefix");
        action.setCallback(this, function(res){
            var state = res.getState();
            if(state == 'SUCCESS'){
                var urlPrefix = res.getReturnValue();
                component.set("v.urlPrefix", urlPrefix);
            }
        });
        $A.enqueueAction(action);
    },
    
    loadTableColumns : function(component, event, helper){
         component.set("v.columns", [ 
            {
                label: '',
                type: 'button-icon',
                initialWidth: 20,
                typeAttributes: {
                    iconName: 'utility:preview',
                    name: 'preview',
                    variant: 'bare',
                    title: 'Preview'
                }
            },
            {label: 'Title', fieldName: 'Title', type: 'text'},
            {
                label: '',
                type: 'button-icon',
                initialWidth: 20,
                typeAttributes: {
                    iconName: 'utility:download',
                    name: 'download',
                    variant: 'bare',
                    title: 'Download'
                }
            },
        ]);
    }
})

FileStructure.css

.THIS{
    padding: 5px;
}

.THIS .main-section{
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
}

/*title css start*/

.THIS .title {
    display: flex;
    align-items: center;
    color: #444;
    padding: 10px;
    background: lightgray;
    border-radius: 5px;
}

.THIS .title .slds-icon_container {
    margin-right: 0.5rem;
}

.THIS .title .title-text {
    font-weight: bold;
    font-size: 1.2rem;
}


/*title css end*/

.THIS .folderSection {
    display: flex;
    align-items: center;
    /*margin-bottom: 0.5rem;*/
}

.THIS .folderSection:hover{
    background: #eee;
}

.THIS .folderName {
    padding-left: 0.5rem;
    font-size: 0.8rem;
    font-weight: bold;
}

.THIS .files{
    padding-left: 1rem;
}

.THIS .slds-resizable__divider{
    display: none;
}

.THIS .slds-th__action{
    padding-right: 0px;
}

FileStructure.design

<design:component>
    <design:attribute name="recordId" description="{!recordId}"/>
    <design:attribute name="isEdit" description="mode"/>
</design:component>

Note

Use FileStructure.cmp in record page to see the preview.

Talk is cheap. Show me the code.
Divyesh Dudhat

Blogs

File Structure (Aura)