Search code examples
microsoft-graph-apimicrosoft-graph-toolkit

How do I add complete functionality to Microsoft Graph Toolkit's templating?

I'm using the mgt-file-list component from the Microsoft Graph Toolkit and this code works just fine within my application after authentication. It displays a file upload button, and I can upload files into the specified folder. The files are then displayed in a list:

     <mgt-file-list id="mgtList" enable-file-upload="true" file-extensions="doc, DOC, docx, DOCX, pdf, png, PNG" max-file-size="10000" max-upload-file="5" insight-type="trending">
     </mgt-file-list>

However, when I add in a template to display the files in a custom layout, the file upload button does not work anymore even though I add it back in and it triggers a file selection:

     <mgt-file-list id="mgtList" enable-file-upload="true" file-extensions="doc, DOC, docx, DOCX, pdf, png, PNG" max-file-size="10000" max-upload-file="5" insight-type="trending">
      <template>  
        <mgt-file-upload></mgt-file-upload>
        <div class="files">
          <div data-for="file in files" data-props="{{@click: openFile}}" data-type="file" style="width:100%;display:block;border-bottom:1px solid grey;margin-bottom:15px;">
            <h2 alt="{{file.id}}">{{file.name}}</h2>
            <h3>{{file.createdDateTime}}</h3>
            <h3><a href="{{file.webUrl}}" target="_blank">View File</a></h3>
          </div>
        </div>
      </template>
     </mgt-file-list>

My template works fine and properly displays all values, and the link works fine and opens in SharePoint. But I have to recreate now all the functionality of all the elements, and adding back in just "mgt-file-upload" component is not good enough to get the file upload to work. Are there additional attributes I need to add to this component?

Couldn't find any documentation that mentions needing to add in that new file upload component inside the template, I just saw one example that used it somewhere else and guessed I needed it. That element makes the file upload button appear, it asks for a file, you can select, but it then does not upload it. I know it is not an issue with my ability to upload files or authentication because the default no-template works just fine.

Thanks!

Solution

  • At present you're not going to be able to get this working how you want.

    The setup for the <mgt-file-upload> component uses a the fileUploadList property which is not exposed as an attribute as it's an object and passes a nested object that is not exposed for creation externally.

    I would suggest that you open an issue on the repo https://aka.ms/mgt to track this as there are a couple of options for fixes here. The first and simplest to implement would be to change the section of the component that the template controls to only target the list of files and exclude the file upload section.