Given a list of strings in a flat folder structure of: “root/directory/directory/file.ext” write a tree-style file picker component using the angular material library.

• Main page has an input dialog which will display the selected file name from the file browser
• The browse button will launch the file browser modal
• Files are represented as a tree
• Single selection on file leaf nodes
• Upload button is enabled after a file is selected
• On click of the upload button an indeterminate progress bar will appear and fade after 5 seconds ** No actual file upload needs to occur in this prototype
• After simulated progress is complete a message “Upload complete!” should appear
• Progress and message will reset to invisible when a new file is selected

• Single select files
• Could have empty directories in file browser
• Disable upload button if file is not selected; disable ok button within file browser if file is not selected
• Your implementation can use the Sample file list below ** It should be easy to replace that list with another
• File input field is read only (cannot type)

• Responsiveness - when mobile device screen size is detected
  • Top nav should collapse into a side nav
• Routing – include routes for upload page and history page
• History page
  • History page keeps a log of previously uploaded files
  • Ability to clear history from clear button

You can submit the solution in anyway you are comfortable with (GitHub, Zipped file, Google drive, etc)

root/dir1/diry/file3.ext
root/dir2/dirx/file.ext
root/dir2/dirx/file1.ext
root/dir2/file2.ext
root/dir3/dirz/file4.ext
root/dir4/dira/file5.ext
root/dir5/dirb/file6.ext
root/dir6/dir0/file7.ext
root/dir6/dir0/file8.ext
root/dir6/dir0/file9.ext
root/dir7/dirc/dire/
root/dir7/dirc/dirv/file11.ext
root/dir7/dirc/file12.ext
root/file10.ext

The images are for guidance. You need not make write CSS to force your UI to match, and the appearance is up to you.

Design images