How to build a File Explorer?

Functional Requirement

  • Can be used to create folders, sub-folders, and files.
  • The files menu should be collapsible. The Icon should change based on the Menu's state.
  • Files & Folders should have iconsproper .
  • Folder state could be open or close. Icon should be based on the Folder's state.
  • A folder's content could be sub-folders/files. The contents should only be visible whenever a folder is in open state.
  • Each node (file/folder) should be properly indented based on the depth/level.
  • One should be only able to add a new file/folder to an existing folder.
  • One should be able to delete any file or folder.
  • One should be able to rename any file or folder. Show an in-place input for renaming.
  • If the newly created file name is empty then it should be deleted automatically.
  • If a rename operation is performed on an existing file and the name provided is empty then we should showcase an error.
  • Highlight the node name on hover.
  • Node controls should be only visible on hover.
  • Try to use all the best practices and organise your code into reusable components/functions.
AtlassianIntermediateJavascriptReact

Solution:

File Explorer