A File Manager/Browser with the ability to list/upload/delete files and add/delete directories within a root directory that you can specify either from a Native File System or one of the Cloud Storage Providers(currently configured for Microsoft Azure Storage Account using a File Share). Additionally, the app also demonstrates the integration between CKEditor which is a popular WYSIWYG editor with this file system for browsing files using the File Manager and uploading files and images.
https://dherenj84.azurewebsites.net/filemanager
Username: sample
Password: sample
- Angular for the UIX (https://angular.io/)
- Spring Boot for the service backend (https://spring.io/projects/spring-boot)
- Bootstrap for styling (https://getbootstrap.com/)
- Font Awesone for Icons (https://fontawesome.com/)
- CKEditor (https://ckeditor.com/ckeditor-4/)
- Maven for buliding, packaging and running the app (https://maven.apache.org/)
There are 3 simple configuration changes that would be required to configure the app based on what storage mode you want to use,
- Under src/main/resources/application.properties change the storage.mode to either native for Native File System or cloud for Cloud Storage Accounts(currently Microsoft Azure Storage Supported) .
- If storage.mode is set as native in step 1 above, specifiy file.directory and file.root properties otherwise skip this step.
- If storage.mode is set as cloud in step 1, specify azure.storage.connection-string property in the application.properties. This value can be generated using the Access keys feature under your Storage Account in Microsoft Azure Portal.
Please note that I am using my own Azure account's Access Key to access the File Storage Account. The Access Key that you will find under application.properties is just a placeholder for you to refer the syntax but may not be valid anymore.
The Angular App resides in the ng-app folder under project root and the Java App resides in the conventional src folder under project root.
The App runs as one single java web application and can be deployed as a war in a container of your choice. The complied Angular UI code resides in src/main/resources/static folder. Because the backend being Spring Boot, the app can be quickly run using the following command on the project root,
mvn spring-boot:run
Angular Code is built using the command ng build --prod --base-href . As you may have noted I am removing the base-href upon production build of Angular Code. This is necessary to make sure that the app runs correctly with it's current project structure.