versioning of files

[Aanchal Gupta]

How can I implement versioning of files in the file manager and display all versions of that file in the sidebar section? 

[Sivakumar ShunmugaSundaram]

Hi Aanchal,

Greetings from Syncfusion support.

We understand that you want to implement versioning in the React FileManager component and show the version details in the UI. As per the shared details, we have prepared a simple React FileManager sample to show version details in the FileManager navigation setting. To meet your requirement, you just need to add the additional version details in the file service provider, then retrieve and add them in the navigation pane using the below code details.

Refer to the below code snippet.

[index.js]

 

export class Overview extends SampleBase {

    hostUrl = 'http://localhost:62870/';

    onfileLoad(args) {

      if (args.module == 'DetailsView') {

        var container = document.createElement('DIV');

        container.setAttribute('id', 'count');

        container.innerText = 'version-' + args.fileDetails.version;

        var list = document.querySelectorAll(

          '.e-navigation .e-level-2 .e-text-content'

        );

        for (var i = 0; i < list.length; i++) {

          if (args.fileDetails.name == list[i].innerText)

            list[i].appendChild(container);

        }

      }

    }

...

    render() {

      return (

        <div>

          <div className="control-section">

            <FileManagerComponent

              id="overview_file"

...

              }}

              view={'Details'}

              fileLoad={this.onfileLoad}

              success={this.onsuccess}

            >

...

  }

 

[FileManagerController.cs]

 

namespace EJ2APIServices.Controllers

{

   

    public class FileManagerDirectoryContent1 : FileManagerDirectoryContent

    {

        public int fileCount { get; set; }

        public int version { get; set; }

    }

 

    [Route("api/[controller]")]

    [EnableCors("AllowAllOrigins")]

    public class FileManagerController : Controller

    {

...

 

        public object getFiles(FileManagerDirectoryContent1 args)

        {

            FileResponse readResponse = new FileResponse();

            try

            {

...

                var i = 10;

                //Add the additional parameter for each files in File Manager component.

                foreach (FileManagerDirectoryContent1 file in readResponse.Files)

                {

                    //Add the file count as additional parameter.

                    string rootPath = this.basePath + "\\" + this.root + file.FilterPath + file.Name;

                    List<FileInfo> files = new List<FileInfo>();

                    IEnumerable<FileInfo> filteredFileList = this.operation.GetDirectoryFiles(new DirectoryInfo(rootPath), files);

                    file.fileCount = filteredFileList.Count();

                    file.version = i;

                    i++;

                }

                readResponse.Details = value.Details;

                readResponse.Error = value.Error;

                return readResponse;

            }

            catch

            {

                ErrorDetails er = new ErrorDetails();

 

            }

            return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems, args.Data));

        }

Sample: https://stackblitz.com/edit/react-zyvhi7?file=index.js,index.html

Service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-aspcore-file-provider-560015763_(2)-778040754.zip

Check out the attached sample for your reference and confirm whether the shared sample will meet your requirements. Based on your confirmation, we will continue to validate your requirements.