File Upload In MVC through GridFS of MongoDB

In this post we will be uploading a file in MVC through GridFS of MongoDB. Before going through the post it will be benefecial to have a knowledge of GridFS of MongoDB

Scenario :


 

We will be having a file uploader in our view where we will be uploading a file through GridFS MongoDB. For using MongoDB in MVC we have to set the MongoDB in our system and include the C# drivers of Mongo DB in our MVC project through NuGet package manager.

Razor Markup :


@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = “multipart/form-data” }))
{

<div class=”form-group”>
<div class=”col-lg-10 col-lg-offset-2″>
<input type=”file” id=”fileUpload” name=”file” />

</div>

</div>

<div class=”form-group”>
<div class=”col-lg-10 col-lg-offset-2″>

<input type=”submit” value=”upload” class=”btn btn-default” />
</div>
</div>
}

 

Here as you can see we have created a form where we have placed a file control with name as “file” and a submit button to post the file to the action(With same name as of the razor view) in Mvc controller .

Mongo Context Class :


Create a context Class (MongoContext ) to get the Mongo Interface references in all the actions of all the controllers. Place this file in the App_Start folder and Initialize it anywhere.

public MongoDatabase mgDatabase;
public MongoContext()
{

var client = new MongoClient(Settings.Default.MongoConnString);
var server = client.GetServer();
mgDatabase = server.GetDatabase(Settings.Default.MongoDBName);

}

Controller Action For Uploading Files :


 

In the controller create an instance of the Mongo Context class that we created earlier.

//Assembly references

using MongoDB.App_Start;
using MongoDB.Bson;
using MongoDB.Driver.Builders;
using MongoDB.Driver;
using MongoDB.Driver.GridFS;

 

 

//Creating Instance of MongoDB context

public readonly MongoContext context = new MongoContext();

 

[HttpPost]
public ActionResult AttachImage(HttpPostedFileBase file)
{
var options =new MongoGridFSCreateOptions{
//Id=imageID, If we want to link the file with a document
ContentType=file.ContentType
};
context.mgDatabase.GridFS.Upload(file.InputStream, file.FileName, options);
return RedirectToAction(“Index”);
}

In the above action method we have input param of type HttpPostedFileBase with name file which is basically the name of the file control in the razor view.

We can use the Upload method of the GridFS to save the posted file. In the above upload Api we have a field option which is very usefull to provide the configs like the content type (Mime type) and if we have to connect this file with a Bson document we can link them as done in options.

Graphical Representation :

To view the chunks and files of this uploaded file we can use the RoboMongo.

fs.files :

g2

 

fs.chunks :

g1

 

In the image above the left side object is basically the fs.files and the right side objects are the chunks (fs.chunks) of the file.

The file_id in the chunks is referring to the file to which the chunks belong. n refers to the sequential chain of the chunks referring to the same file.

File info like the file name , total file size , content type and associated chunks size can be seen the file object.

This is how we can upload a file through GridFS collection of MongoDB in MVC.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s