Easily Render Flat JSON Data in JavaScript File Manager
Tags: javascript, development, filemanager, web
Published: 2024-07-11 16:57:50

---
title: Easily Render Flat JSON Data in JavaScript File Manager
published: true
date: 2024-07-09 13:03:46 UTC
tags: javascript, development, filemanager, web
canonical_url: https://www.syncfusion.com/blogs/post/render-flat-json-data-js-file-manager
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmw8tgbosx3n4y75zs3r.png
---
**TL;DR:** Explore the power of flat JSON data rendering in #JavaScript File Manager. This feature allows you to manage your file system and perform common file operations without the need for HTTP client requests and backend URL configuration. Learn how to leverage this feature with your required services and enhance your file management experience.

The Syncfusion [JavaScript File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager "JavaScript File Manager") component is a graphical user interface that manages the file system. This component provides easy navigation for browsing and selecting files and folders from the file system. You can perform the most common file and folder operations, such as read, write, delete, create, rename, upload, edit, select, and sort.

From the [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") onward, the File Manager supports rendering an array of flat JSON data.

Let’s explore this new feature in detail!

## What is flat data?

Flat JSON data is a collection of files and folders stored with a defined structure. These objects can also be defined locally or retrieved from any file service provider through File Manager events.

## Why flat data?

The Syncfusion JavaScript File Manager can be populated with flat JSON data, eliminating the need for HTTP client requests and backend URL configuration. This allows you to utilize your required services, such as physical, Amazon, Azure, etc., through the File Manager’s action events. This supports all file operations like delete, cut, copy, paste, new folder creation, upload, download, and more.

Cloud service providers such as Google Drive have facilitated the option to fetch the data using client-side JavaScript; refer to the [documentation](https://developers.google.com/drive/api/quickstart/js "Getting started with JavaScript on Google Drive") for more details. So, the JavaScript File Manager now enables rendering the component with complete JavaScript code without maintaining a separate service provider.

## Render flat JSON data in JavaScript File Manager

Let’s see how to render flat JSON data in the JavaScript File Manager component by following these steps!

### Step 1: Setting up the TypeScript app

First, create a TypeScript app. This can be done by referring to the instructions in the [getting started with JavaScript File Manager](https://ej2.syncfusion.com/documentation/file-manager/getting-started "Getting started with JavaScript File Manager component") documentation.

### Step 2: Initialize the JavaScript File Manager

Now, initialize the JavaScript File Manager in the app using the following code.

```js
<div class="sample-container">
 <!-- Initialize FileManager --> 
 <div id="filemanager"></div> 
</div>
```

### Step 3: Rendering JSON data in JavaScript File Manager

Then, map the necessary JSON data to the [fileSystemData](https://ej2.syncfusion.com/documentation/api/file-manager/#filesystemdata "fileSystemData property in JavaScript File Manager") property of the File Manager using the [FileData](https://ej2.syncfusion.com/documentation/api/file-manager/fileData/ "FileData API in JavaScript File Manager") type.

Refer to the following code example.

```js
import{FileManager, Toolbar, NavigationPane, DetailsView, ContextMenu, FileData} from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu);
let resultData : FileData[] = [
{
    dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"),
    dateModified : new Date("2024-01-08T18:16:38.4384894+05:30"),
    filterPath : "",
    hasChild : true,
    id : '0',
    isFile : false,
    name : "Files",
    parentId : null,
    size : 1779448,
    type : "folder",
},
{
    dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"),
    dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"),
    filterPath : "\\",
    hasChild : false,
    id : '1',
    isFile : false,
    name : "Documents",
    parentId : '0',
    size : 680786,
    type : "folder",
},
{
dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\", hasChild : false, id : "2", isFile : false, name : "Downloads", parentId : "0", size : 6172, type : "folder"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\", hasChild : false, id : "3", isFile : false, name : "Music", parentId : "0", size : 20, type : "folder"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\", hasChild : true, id : "4", isFile : false, name : "Pictures", parentId : "0", size : 228465, type : "folder"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\", hasChild : false, id : "5", isFile : false, name : "Videos", parentId : "0", size : 20, type : "folder"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\Documents\\", hasChild : false, id : "6", isFile : true, name : "EJ2_File_Manager", parentId : "1", size : 12403, type : ".docx"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\Documents\\", hasChild : false, id : "9", isFile : true, name : "File_Manager", parentId : "1", size : 274, type : ".txt"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\Music\\", hasChild : false, id : "11", isFile : true, name : "Music", parentId : "3", size : 10, type : ".mp3"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\Videos\\", hasChild : false, id : "14", isFile : true, name : "Sample_Video", parentId : "5", size : 10, type : ".mp4"}, {
    dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"),
    dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"),
    filterPath : "\\Pictures\\",
    hasChild : false,
    id : '15',
    isFile : false,
    name : "Employees",
    parentId : '4',
    size : 237568,
    type : "folder",
  },
  {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\Pictures\\Employees\\", hasChild : false, id : '16', isFile : true, name : "Albert", parentId : '15', size : 53248, type : ".png", imageUrl : "https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png"}, {dateCreated : new Date("2023-11-15T19:02:02.3419426+05:30"), dateModified : new Date("2024-01-08T16:55:20.9464164+05:30"), filterPath : "\\Pictures\\Employees\\", hasChild : false, id : '17', isFile : true, name : "Nancy", parentId : '15', size : 65536, type : ".png", imageUrl : "https://ej2.syncfusion.com/demos/src/avatar/images/pic02.png"}
];
let fileObject : FileManager = new FileManager({
  fileSystemData : [].slice.call(resultData) as{[key:string] : Object}[],
});
fileObject.appendTo('#filemanager');
```

### Step 4: Configuring permissions

Lastly, use the [Permission](https://ej2.syncfusion.com/documentation/api/file-manager/permission/ "Permission API in JavaScript File Manager") property to enable or restrict permission for a specific file or folder. Refer to the following code example.

```js
import {FileManager, Toolbar, NavigationPane, DetailsView, ContextMenu, Permission, FileData} from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu);

let permission: Permission = {
  "copy": false,
  "download": false,
  "write": false,
  "writeContents": false,
  "read": true,
  "upload": false,
  "message": ""
};
let resultData: FileData[] = [{
  dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
  dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
  filterPath: "\\",
  hasChild: false,
  id: '1',
  isFile: false,
  name: "Documents",
  parentId: '0',
  size: 680786,
  type: "folder",
  permission: permission
}]
```

Upon completing these steps, the File Manager will be rendered with JSON data and ready to perform file operations.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Flat-JSON-Data-in-JavaScript-File-Manager-Output.gif" alt="Rendering flat JSON data in JavaScript File Manager" style="width:100%">

  <figcaption>Rendering flat JSON data in JavaScript File Manager</figcaption>

</figure>

**Note:** For more details, refer to rendering [flat JSON data in the JavaScript File Manager demo](https://ej2.syncfusion.com/demos/#/material3/file-manager/flat-data.html "Rendering flat JSON data in the JavaScript File Manager demo") and [documentation](https://ej2.syncfusion.com/documentation/file-manager/flat-data "Rendering flat JSON data in the JavaScript File Manager documentation").

## Handling file operations with Google Drive

By default, the JavaScript File Manager component handles file operations like creating a new folder, deleting, cutting, copying, pasting, and renaming. Certain file operations like upload, download, and get image must be dealt with the services through corresponding file action events.  

### Upload

To enable the upload operation in the JavaScript File Manager component with flat data, you must handle your service through the [uploadListCreate](https://ej2.syncfusion.com/documentation/api/file-manager/#uploadlistcreate "uploadListCreate event of JavaScript File Manager") event. This event provides access to the details of the file selected in the browser, including metadata such as the file name, size, and content type.

In the following code example, the File Manager retrieves the Google Drive file details as flat data for the initial rendering and uploads a file to Google Drive with the help of the **uploadListCreate** event.

```js
uploadListCreate: async
function uploadFile(args) {
  var fileObj = document.getElementById("file").ej2_instances[0];
  var pathArray = fileObj.pathNames;
  var folderName = pathArray[pathArray.length - 1];
  var parentFolderId = fileObj.fileSystemData.filter(function(obj) {
    return obj.name == folderName;
  })[0].originalID;
  var folders = args.fileInfo.name.split('/');
  var fileName = folders.length & gt;
  1 ? folders[folders.length - 1] : args.fileInfo.name;
  const file = args.fileInfo.rawFile;
  // Create a new Drive API request to upload a file.
  var body = {
    'name': fileName,
    'mimeType': args.fileInfo.type,
    'parents': [parentFolderId]
  };
  var request = gapi.client.drive.files.create({
    'resource': body
  });
  request.execute(function(resp) {
    if (resp.error) {
      // Handle the error.
      console.error('Error:', resp.error.message);
      args.element.getElementsByClassName("e-file-status")[0].innerText = "Upload Failed";
      args.element.getElementsByClassName("e-file-status")[0].classList.add("e-upload-fails");
    } else {
      // Success: load the uploaded data within the File Manager component.
      args.element.getElementsByClassName("e-file-status")[0].innerText = "Upload successful";
      args.element.getElementsByClassName("e-file-status")[0].classList.add("e-upload-success");
      fetchData();
    }
  });
},
```

### Download

To enable the download operation in the File Manager component with flat data, you must handle your service through the [beforeDownload](https://ej2.syncfusion.com/documentation/api/file-manager/#beforedownload "beforeDownload event of JavaScript File Manager") event. This event provides access to the details of the file selected in the File Manager. 

In the following code example, the File Manager retrieves the Google Drive file details as flat data for the initial rendering. Setting the **cancel** property to **true** in the **beforeDownload** event prevents the File Manager component’s default delete action. Then, you can make a Google API request with an event argument to download the raw file from Google Drive.

```js
beforeDownload: function beforeDownload(args) {
  // Cancel the default download action.
  args.cancel = true;
  var fileData = args.data.data;
  const zip = new JSZip();
  //To download multiple files as a zip folder.
  if (fileData.length & gt; 1 || !fileData[0].isFile) {
    downloadFiles(fileData);
  }
  //To download a single file.
  else {
    // Fetch the file content using the Google Drive API.
    fetch(`https: //www.googleapis.com/drive/v3/files/${fileData[0].id}?alt=media`, {
      method: 'GET', headers: {
       'Authorization': 'Bearer ' + gapi.auth.getToken().access_token,
      },
    })
    .then(function(response) {
      if (!response.ok) {
        throw new Error('Network response was not ok: ' + response.statusText);
      }
      return response.blob();
    })
    .then(function(blob) {
       // Display image preview.
       var img = document.createElement('img');
       img.src = URL.createObjectURL(blob);
       img.alt = fileData[0].name; // Set alternative text.
       document.body.appendChild(img);

       // Create a download link.
       var downloadLink = document.createElement('a');
       downloadLink.href = URL.createObjectURL(blob);
       downloadLink.download = fileData[0].name; // Set the desired file name.
       document.body.appendChild(downloadLink);
       downloadLink.click();

       // Remove the link and image from the document.
       document.body.removeChild(downloadLink);
       document.body.removeChild(img);
    }).
    catch(function(error) {
      console.error('Error downloading file:', error);
    });
  }
},

function downloadFiles(files) {
  const zip = new JSZip();
  const totalCount = files.some(file = > file.type === "") ? getTotalFileCount(files) : files.length;
  const name = files.some(file = > file.type == "") ? 'folders': 'files';
  // Iterate through files and add them to the zip.
  files.forEach(file = > {
    if (file.type === '') {
      // If it's a folder, recursively fetch its contents.
      fetchFolderContents(file.id).then(response = > {
        downloadFiles(response.result.files);
      });
    } else {
      // If it's a file, download and add it to the zip.
      fetch(`https: //www.googleapis.com/drive/v3/files/${file.id}?alt=media`, {
      method: 'GET', headers: {
        'Authorization': 'Bearer ' + gapi.auth.getToken().access_token,
      },
    })
    .then(response = > {
      if (!response.ok) {
        throw new Error('Network response was not ok: ' + response.statusText);
      }
      return response.blob();
    })
    .then(blob = > {
      // Add file content to the zip.
      zip.file(file.name, blob);

      // Check if all files are added, then create the zip.
      if (Object.keys(zip.files).length === totalCount) {
        zip.generateAsync({ type: 'blob' }).then(zipBlob = > {
          // Trigger download
          const a = document.createElement('a');
          a.href = URL.createObjectURL(zipBlob);
          a.download = name + '.zip';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
       });
      }
    }).
    catch(error = > {
      console.error('Error downloading file:', error);
    });
   }
 });
}
```

### Get image

To enable the image preview in the File Manager component with flat data, you can use the File Manager [fileSystemData](https://ej2.syncfusion.com/documentation/api/file-manager/#filesystemdata "fileSystemData property of JavaScript File Manager") property response with the **imageUrl** field.

In the following code example, the File Manager retrieves the Google Drive file details as a flat data JSON object and updates the **imageUrl** field with the Google Drive files [thumbnailLink](https://developers.google.com/drive/api/reference/rest/v3/files#resource "Google Drive: REST Resource: files") during initial rendering.

```js
async function fetchData() {
  // Load the Drive API client library.
  await gapi.client.load('drive', 'v3');
  let nextPageToken = null;
  let allFiles = [];
  do {
    const response = await gapi.client.drive.files.list({
      pageSize: 1000,
      fields: 'nextPageToken, files(id, name, mimeType, size, parents, thumbnailLink, trashed)',
      pageToken: nextPageToken,
      q: 'trashed=false'
    });
    allFiles = allFiles.concat(response.result.files);
    nextPageToken = response.result.nextPageToken;
  } while ( nextPageToken );
  const files = allFiles;
  // Create a flat array representing parent-child relationships.
  window.fileSystemData = await createFlatData(files);
}

async function createFlatData(files) {
 ...
 await Promise.all(files.map(async file = > {
   ...
   var imageUrl = file.thumbnailLink;
   //Frame File Manager response data by retrieving the folder details from the Google service.
   if (file.name == 'Files') {
      rootId = file.id;
      fileDetails = {
        id: '0',
        name: file.name,
        parentId: null,
        isFile: file.mimeType == 'application/vnd.google-apps.folder' ? false: true,
        hasChild: hasSubitems,
        size: file.size == undefined ? '0': file.size,
        filterPath: '',
        originalID: file.id
      };
   } else {
      fileDetails = {
        id: file.id,
        name: file.name,
        isFile: file.mimeType == 'application/vnd.google-apps.folder' ? false: true,
        hasChild: hasSubitems,
        size: file.size == undefined ? '0': file.size,
        filterPath: file.filterPath,
        imageUrl: imageUrl,
        originalID: file.id
   };
}
```

**Note:** For more details, refer to [Events in JavaScript File Manager](https://ej2.syncfusion.com/documentation/api/file-manager/#events "Events in JavaScript File Manager").

## GitHub reference

Also, check out the complete example for [rendering flat JSON data in JavaScript File Manager by fetching data from the Google Drive GitHub demo](https://github.com/SyncfusionExamples/javascript-filemanager-flat-data-with-cloud-service "Rendering flat JSON data in JavaScript File Manager with cloud service GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to render flat JSON data in the Syncfusion [JavaScript File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager "JavaScript File Manager"). This feature is a part of the [2024 Volume 2 release](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") and is also introduced in our [Angular](https://ej2.syncfusion.com/angular/demos/#/material3/file-manager/flat-data "Flat data rendering in Angular File Manager"), [React](https://ej2.syncfusion.com/react/demos/#/material3/file-manager/flat-data.html "Flat JSON data rendering in React File Manager"), [Vue](https://ej2.syncfusion.com/vue/demos/#/material3/file-manager/flat-data.html "Flat data rendering in Vue File Manager"), [ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/filemanager/flatdata#/material3 "Flat data rendering in ASP.NET Core File Manager"), and [ASP.NET MVC File Manager](https://ej2.syncfusion.com/aspnetmvc/filemanager/flatdata#/material3 "Flat data rendering in ASP.NET MVC File Manager") components.

We invite you to peruse our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v26.1.35 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/essential-js2 "Essential Studio What’s New page") pages to delve deeper into the plethora of other features introduced in this release.

For our existing customers, the latest version of Essential Studio is readily accessible on the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page. If you’re new to Syncfusion, we offer a 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to experience our components’ entire range.

Should you have any questions, please contact us via our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We’re always here to help you! Happy exploring!

## Related blogs

- [Effortlessly Synchronize JavaScript Controls Using DataManager](https://www.syncfusion.com/blogs/post/sync-javascript-controls-datamanager "Blog: Effortlessly Synchronize JavaScript Controls Using DataManager")
- [Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler](https://www.syncfusion.com/blogs/post/add-salesforce-javascript-scheduler "Blog: Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler")
- [PNPM vs. NPM vs. Yarn: What Should I Choose in 2024?](https://www.syncfusion.com/blogs/post/pnpm-vs-npm-vs-yarn "Blog: PNPM vs. NPM vs. Yarn: What Should I Choose in 2024?")
- [Empower Your Data Insights: Integrating JavaScript Gantt Chart into Power BI](https://www.syncfusion.com/blogs/post/add-gantt-chart-into-power-bi "Blog: Empower Your Data Insights: Integrating JavaScript Gantt Chart into Power BI")