Giter VIP home page Giter VIP logo

filemanager's Introduction

File Manager

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.

Demo

https://dherenj84.azurewebsites.net/filemanager
Username: sample
Password: sample

Tech Stack

  1. Angular for the UIX (https://angular.io/)
  2. Spring Boot for the service backend (https://spring.io/projects/spring-boot)
  3. Bootstrap for styling (https://getbootstrap.com/)
  4. Font Awesone for Icons (https://fontawesome.com/)
  5. CKEditor (https://ckeditor.com/ckeditor-4/)
  6. Maven for buliding, packaging and running the app (https://maven.apache.org/)

Configuration

There are 3 simple configuration changes that would be required to configure the app based on what storage mode you want to use,

  1. 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) .
  2. If storage.mode is set as native in step 1 above, specifiy file.directory and file.root properties otherwise skip this step.
  3. 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.

Sources

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.

Build & Run the app

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.