Rendering Flat JSON Data in the EJ2 TypeScript File Manager Control
22 Jun 202424 minutes to read
The File Manager uses a flat data object as an array of JavaScript objects for rendering, eliminating the need to define ajaxSettings url. To load a folder data as an array of JavaScript objects, use the File Manager component’s fileSystemData property with a type of fileData interface. This means you no longer need to use a separate service provider, as you can integrate services like Google, Amazon, Azure, and others directly into your JavaScript code using the FileManager’s action events. For example, you can integrate Google Drive by following the Google Drive API Quickstart guide for JavaScript.
Event Information
| Event Name | Description | ||
|---|---|---|---|
| beforeDelete | This event is triggered before the deletion of a file or folder occurs. It can be utilized to prevent the deletion of specific files or folders. Any actions, such as displaying a spinner for deletion, can be implemented here. | ||
| delete | DeleteEventArgs | path, itemData, cancel. | This event is triggered after the file or folder is deleted successfully. The deleted file or folder details can be retrieved here. Additionally, custom elements’ visibility can be managed here based on the application’s use case. |
| beforeFolderCreate | This event is triggered before a folder is created. It allows for the restriction of folder creation based on the application’s use case. | ||
| folderCreate | This event is triggered when a folder is successfully created. It provides an opportunity to retrieve details about the newly created folder. | ||
| search | This event is triggered when a search action occurs in the search bar of the File Manager component. It triggers each character entered in the input during the search process. | ||
| beforeRename | This event is triggered when a file or folder is about to be renamed. It allows for the restriction of the rename action for specific folders or files by utilizing the cancel option. | ||
| rename | This event is triggered when a file or folder is successfully renamed. It provides an opportunity to fetch details about the renamed file. | ||
| beforeMove | This event is triggered when a file or folder begins to move from its current path through a copy/cut and paste action. | ||
| move | This event is triggered when a file or folder is pasted into the destination path. |
Local data
The FileManager can be populated with local data that contains the array of fileData interface objects with parentId mapping.
To render the root-level folder, specify the parentId as null, or there is no need to specify the parentId in the array of fileData interface objects.
import { FileManager, Toolbar, NavigationPane, DetailsView, ContextMenu, Permission, FileData} from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu);
/**
* File Manager flat data sample
*/
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: "Archives",
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: "Audio",
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: false,
id: "3",
isFile: false,
name: "Video",
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: "\\Archives\\",
hasChild: false,
id: "4",
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: "\\Archives\\",
hasChild: false,
id: "5",
isFile: true,
name: "EJ2_File_Manager",
parentId: "1",
size: 90099,
type: ".pdf"
},
{
dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
filterPath: "\\Archives\\",
hasChild: false,
id: "6",
isFile: true,
name: "File_Manager_PPT",
parentId: "1",
size: 578010,
type: ".pptx"
},
{
dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
filterPath: "\\Archives\\",
hasChild: false,
id: "7",
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: "\\Audio\\",
hasChild: false,
id: "8",
isFile: true,
name: "Music",
parentId: "2",
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: "\\Audio\\",
hasChild: false,
id: "9",
isFile: true,
name: "Sample_Music",
parentId: "2",
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: "\\Video\\",
hasChild: false,
id: "10",
isFile: true,
name: "Demo_Video",
parentId: "3",
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: "\\Video\\",
hasChild: false,
id: "11",
isFile: true,
name: "Sample_Video",
parentId: "3",
size: 10,
type: ".mp4"
}
];
let fileObject: FileManager = new FileManager({
fileSystemData: [].slice.call(resultData) as { [key: string]: Object }[],
toolbarSettings: { items: ['NewFolder', 'Cut', 'Copy', 'Paste', 'Delete', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'], visible: true },
contextMenuSettings: { file: ["Cut", "Copy", "Paste", "Delete", "Rename", "|", "Details"], folder: ["Open", "|", "Cut", "Copy", "Paste", "|", "Delete", "Rename", "|", "Details"], layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], visible: true }
});
fileObject.appendTo('#filemanager');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 File Manager</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 File Manager Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="filemanager"></div>
</div>
</body>
</html>Rendering Flat JSON Data from Google service
In the following topic, we can learn about reading files from Google API using the File Manager’s action events. This eliminates the need to define ajaxSettings url.
These events enable you to access essential item details from the event argument. To perform file operation corresponding to your service, use the cancel property in File Manager’s action event and customize the fileSystemData based on your current service data.
The example retrieves the google drive file details as Flat data object and handle the read response from source by updating fileSystemData property with retrieved data.
To set up File Manager component with google service, create a client ID and API key for your google account. To learn more about generating the client credentials from the from Google API Console, refer to this link.
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 for File Manager fileSystemData property
window.fileSystemData = await createFlatData(files);
}
async function createFlatData(files) {
...
await Promise.all(files.map(async file => {
isFileOrFolder = file.mimeType == 'application/vnd.google-apps.folder' ? false : true;
if (!isFileOrFolder) {
hasSubitems = file.name == 'Files'? true : doesFolderHaveSubfolders(fileList, file.id);
}
var fileType = getFileTypeFromName(file.name);
var imageUrl = file.thumbnailLink;
//Frame File Manager response data by retrieveing the folder details from 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
};
}
if (file.parents) {
file.parents.forEach(async parentId => {
parentDetails = {
id: fileDetails.id,
name: fileDetails.name,
parentId: fileDetails.name == "Files" ? null : parentId,
isFile: fileDetails.isFile,
type: fileDetails.isFile ? fileType : "",
hasChild: fileDetails.hasChild,
size: fileDetails.size,
filterPath: fileDetails.name == "Files" ? "" : fileDetails.filterPath,
imageUrl: fileDetails.imageUrl,
originalID: fileDetails.originalID
};
await flatData.push(parentDetails);
flatData.sort((a, b) => a.name.localeCompare(b.name));
});
} else {
// If a file has no parents, it is a root-level item
await flatData.push(fileDetails);
}
}));
...
// Return flat array representing parent-child relationships from Google Drive
return await(newData);
}Delete action
To enable the delete operation in the File Manager component with Google services, you can use the beforeDelete event. By setting the cancel property to true in the beforeDelete event, you can prevent the default delete action of the File Manager component. Then, you can make a Google API request with the help of event argument to delete the file from Google Drive. Additionally, to update the fileSystemData property with the current Google Drive data, you can call the fetchData method in the gapi success callback. This ensures that the File Manager component remains synchronized with the Google Drive data during the delete operation.
Here is an example of how you can handle the delete operation using the beforeDelete event:
beforeDelete: function deleting(args) {
// Cancel the default delete action
args.cancel = true;
// Create a new Drive API request to delete the file or folder
args.itemData.forEach(function(item) {
gapi.client.drive.files.delete({
fileId: item.originalID,
}).then(function(response) {
// Success: load the updated Google Drive data within File Manager component.
fetchData();
}, function(error) {
console.error('Error deleting folder:', error);
});
});
},Copy action
To enable the copy operation in the File Manager component with Google services, you can use the beforeMove event. The isCopy property in the event argument in true for copy operation. By setting the cancel property to true in the beforeMove event, you can prevent the default copy action of the File Manager component. Then, you can make a Google API request with the help of event argument to copy the file from Google Drive. Additionally, to update the fileSystemData property with the current Google Drive data, you can call the fetchData method in the gapi success callback. This ensures that the File Manager component remains synchronized with the Google Drive data during the copy operation.
Here is an example of how you can handle the copy operation using the beforeMove event:
beforeMove: function moving(args) {
// Cancel the default move action
args.cancel = true;
// Check if the operation is a copy or a cut
if(args.isCopy) {
// Update the parents property to move the file to the new folder
var newParentFolderId = args.targetData.originalID;
// Perform copy operation.
args.itemData.forEach(async function(item) {
var originalFolderId = item.originalID;
// Check if the item is a folder or a file
if(item.type == "") {
// Get information about the original folder
gapi.client.drive.files.get({
fileId: originalFolderId,
fields: 'id,name,parents,kind,mimeType'
}).then(function(response) {
var folderMetadata = response.result;
// Create a new folder in the destination
gapi.client.drive.files.create({
resource: {
name: folderMetadata.name,
mimeType: folderMetadata.mimeType,
parents: [newParentFolderId]
}
}).then(function(newFolder) {
// Get the contents of the original folder
gapi.client.drive.files.list({
q: "'" + originalFolderId + "' in parents",
fields: 'files(id,name,kind,mimeType)',
pageSize: 1000
}).then(function(contentsResponse) {
var contents = contentsResponse.result.files;
// Iterate through the contents and copy each file or subfolder
contents.forEach(function(item) {
if (item.kind === 'drive#folder') {
// Recursively copy subfolders
copyFolder(item.id, newFolder.result.id);
} else {
// Copy files
gapi.client.drive.files.copy({
fileId: item.id,
resource: {
name: item.name,
parents: [newFolder.result.id]
}
}).then(function(copiedFile) {
// Update the copied file's properties if needed
var updatedProperties = {
// Add any additional properties you want to update
};
gapi.client.drive.files.update({
fileId: copiedFile.result.id,
resource: updatedProperties
}).then(function(updatedFile) {
// Success: load the copied Google Drive folder data within File Manager component.
fetchData();
...
return;
}
...
// Function to copy a folder and its contents
async function copyFolder(originalFolderId, newParentFolderId) {
// Get information about the original folder
await gapi.client.drive.files.get({
fileId: originalFolderId,
fields: 'id,name,parents,kind,mimeType'
}).then(async function(response) {
var folderMetadata = response.result;
// Create a new folder in the destination
await gapi.client.drive.files.create({
resource: {
name: folderMetadata.name,
mimeType: folderMetadata.mimeType,
parents: [newParentFolderId]
}
}).then(async function(newFolder) {
// Get the contents of the original folder
await gapi.client.drive.files.list({
q: "'" + originalFolderId + "' in parents",
fields: 'files(id,name,kind,mimeType)',
pageSize: 1000
}).then(async function(contentsResponse) {
var contents = contentsResponse.result.files;
// Iterate through the contents and copy each file or subfolder
contents.forEach(async function(item) {
if (item.kind === 'drive#folder') {
// Recursively copy subfolders
copyFolder(item.id, newFolder.result.id);
} else {
// Copy files
await gapi.client.drive.files.copy({
fileId: item.id,
resource: {
name: item.name,
parents: [newFolder.result.id]
}
}).then(async function(copiedFile) {
// Update the copied file's properties if needed
var updatedProperties = {
// Add any additional properties you want to update
};
await gapi.client.drive.files.update({
fileId: copiedFile.result.id,
resource: updatedProperties
}).then(function(updatedFile) {
}).catch(function(error) {
console.error('Error updating copied file:', error);
});
}).catch(function(error) {
console.error('Error copying file:', error);
});
}
});
...Move action
To enable the move operation in the File Manager component with Google services, you can use the beforeMove event. The isCopy property in the event argument in false for move operation. By setting the cancel property to true in the beforeMove event, you can prevent the default move action of the File Manager component. Then, you can make a Google API request with the help of event argument to move the file from Google Drive. Additionally, to update the fileSystemData property with the current Google Drive data, you can call the fetchData method in the gapi success callback. This ensures that the File Manager component remains synchronized with the Google Drive data during the move operation.
Here is an example of how you can handle the move operation using the beforeMove event:
beforeMove: function moving(args) {
// Cancel the default move action
args.cancel = true;
...
//Perform cut operation.
args.itemData.forEach(function(item) {
// Get information about the original file
gapi.client.drive.files.get({
fileId: item.originalID,
fields: 'id,parents', // Add any other fields you might need
}).then(function(response) {
var fileMetadata = response.result;
// Update the parents property to move the file to the new folder
var newParentFolderId = [args.targetData.originalID];
// Send the update request
gapi.client.drive.files.update({
fileId: item.originalID,
addParents: newParentFolderId,
removeParents: fileMetadata.parents[0],
}).then(function(updatedFile) {
// Success: load the Google Drive moved file data within File Manager component.
fetchData();
}, function(error) {
console.error('Error moving file:', error);
});
}, function(error) {
console.error('Error retrieving file metadata:', error);
});
});
},Folder create action
To enable the folder create operation in the File Manager component with Google services, you can use the beforeFolderCreate event. By setting the cancel property to true in the beforeFolderCreate event, you can prevent the default folder create action of the File Manager component. Then, you can make a Google API request with the help of event argument to create folder to Google Drive. Additionally, to update the fileSystemData property with the current Google Drive data, you can call the fetchData method in the gapi success callback. This ensures that the File Manager component remains synchronized with the Google Drive data during the folder creation operation.
Here is an example of how you can handle the folder creation operation using the beforeFolderCreate event:
beforeFolderCreate: function onCreate(args) {
// Cancel the default folder creation action
args.cancel = true;
// Create a new Drive API request to create a folder
var body = {
'name': args.folderName,
'mimeType': "application/vnd.google-apps.folder",
'parents': [args.parentFolder[0].originalID]
};
var request = gapi.client.drive.files.create({
'resource': body
});
request.execute(function(resp) {
if (resp.error) {
console.error('Error:', resp.error.message);
} else {
// success: load the newly created Google Drive data within File Manager component.
fetchData();
}
});
},Rename action
To enable the rename operation in the File Manager component with Google services, you can use the beforeRename event. By setting the cancel property to true in the beforeRename event, you can prevent the default rename action of the File Manager component. Then, you can make a Google API request with the help of event argument to rename the file from Google Drive. Additionally, to update the fileSystemData property with the current Google Drive data, you can call the fetchData method in the gapi success callback. This ensures that the File Manager component remains synchronized with the Google Drive data during the rename operation.
Here is an example of how you can handle the rename operation using the beforeRename event:
beforeRename: function rename(args) {
// Cancel the default rename action
args.cancel = true;
// Create a new Drive API request to find the file or folder name
gapi.client.drive.files.list({
q: "name = '" + args.itemData[0].name + "'",
fields: 'files(id,name,parents)', // Add any other fields you might need
}).then(function(response) {
var files = response.result.files;
if (files && files.length > 0) {
// The first file in the list is the one you're looking for
var foundFile = files[0];
var metadata = {
name: args.newName,
};
// Create a new Drive API request to rename the file or folder name
gapi.client.drive.files.update({
fileId: foundFile.id,
resource: metadata,
}).then(function(updatedFile) {
// Success: load the renamed Google Drive data within File Manager component.
fetchData();
}, function(error) {
console.error('Error updating file:', error);
});
}
}, function(error) {
console.error('Error retrieving file metadata:', error);
});
},Upload action
To enable the upload operation in the File Manager component with Google services, you can use the uploadListCreate event. This event provides access to details of the file selected in the browser, including metadata such as the file name, size, and content type. Using the event argument, you can make a Google API request to upload the file to Google Drive. Additionally, to update the fileSystemData property with the current Google Drive data, you can call the fetchData method in the gapi success callback. This ensures that the File Manager component remains synchronized with the Google Drive data during the upload operation.
Here is an example of how you can handle the upload operation using the uploadListCreate event:
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 > 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) {
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 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");
// Success: load the updated Google Drive data within File Manager component.
fetchData();
}
});
},Download action
To enable the Download operatipon in the File Manager component with Google services, you can use the beforeDownload event. This event provides access to details of the file selected in the File Manager. By setting the cancel property to true in the beforeDownload event, you can prevent the default delete action of the File Manager component. Then, you can make a Google API request with the help of event argument to Download the raw file from Google Drive.
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 zip folder.
if(fileData.length > 1 || !fileData[0].isFile) {
downloadFiles(fileData);
}
//To download 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 action
To enable the image preview in the File Manager component with Google services, you can use the File Manager fileSystemData property response with imageUrl field.
In the example, the File Manager retrieves the Google Drive file details as flat data and update the imageUrl field with Google Drive’s file thumbnailLink at initial render.
async function createFlatData(files) {
...
await Promise.all(files.map(async file => {
...
var imageUrl = file.thumbnailLink;
//Frame File Manager response data by retrieveing the folder details from 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 a complete example on handling Google Drive file details as flat data in the File Manager component, view the example on GitHub.