So my requirements are simple:
- To be able to upload files into a central file repository
- To be able to select uploaded files and attach them to a post
- If it's an image, show a preview
- To be able to add metadata related to the file as we upload them
- To be able to validate the said metadata before uploading
- To be able to plug it into any page without too much configuration
- To be able to extensively configure the module/plugin (whatever you wanna call it)
- To be able to use more than one module at the same page without conflicts
- To be able to do the usual CRUD operation on the files
- Head.js - script/css loading
- Fine Uploader.js - File uploading without the hassle
- knockout.js - data binding
- underscore.js - lots of helpers
- Select2 - nice searchable dropdowns
- Bootstrap 3 - layout/css
@FileUploader.SetupHere(config)but I felt like its' just too much work for something simple. May be later I can put this into a nice little library and set it up that way. So until then, something like
@await Html.PartialAsync("Widgets/FileUploader/FileManager", FileSelectorSettings.ImagesOnlySettings)would get the job done.
I have a file manager module, which contains file select module and upload module. Right now, my file select UI looks like below. And file upload UI looks like the first image of this post. (Yeah!)
|file selector ui|
File select view will load its own scripts/css and knockout view model to handle file selection.
File upload view will load its own scripts and css. So we have a nice separation of concerns here. And head.js will load our files after the document is ready, therefore we have nothing to worry about having missing scripts.
First , lets start with the settings class. Code is pretty straightforward. I've defined most of the configurable aspects of the module. There are many more and this class can be cleaned up and organized neatly, which I will do at a later date.
Thanks. and stay tuned.