How to create a .NET Core MVC File Uploader Module - Part 1

Fine UploaderEver since I started developing websites, file/image uploading really gave me a hard time because I just couldn't figure out how to make the upload more generic and pluggable. After seeing Google/Facebook/500px♥ does it, I figured, it must be possible and should be simple. I always tend to over-complicate stuff. A prime example is this SO question (Adjusting dates in an array based on a start date) I asked a few days back. After a few tries, I came up with a solution. This is done using .NET Core MVC6 and You are free to steal this and modify according to your needs. (Give credits where necessary, be human)

Uploader

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
many instances

There are many file uploader scrips readily available on the internet but my above needs required me to make many of those plugins to work together. None of this would be possible if it's not for the infamous Head.js library. So, the plugins I've used are:
  1. Head.js - script/css loading
  2. Fine Uploader.js - File uploading without the hassle
  3. knockout.js - data binding
  4. underscore.js - lots of helpers
  5. Select2 - nice searchable dropdowns
  6. Bootstrap 3 - layout/css
Apart from these, my dev environment is MVC6, .NET Core, VS2015 & C#

So, lets begin:

Step 1: Planning

If we jump right into code when we have a task at hand, we have to get ready to do a lot of iterations to get things right. That, is a hard earned lesson. So, lets plan first. In its most simplest form, I need to be able to do something like @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.

layout

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.

Code:

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.

I will show you the javascript on the next post since this one is too long already.

Thanks. and stay tuned.

Popular posts from this blog

Print a receipt using a Thermal Printer with C#.NET

Automatic redirect upon session timeout using ASP.NET MVC and Javascript

Complex Master-Detail Form using Knockout.js and ASP.NET MVC