I’ve been working on a simple CRUD website using MVC 5 (w/ Razor) and EF 6, and when creating or editing a specific item I needed to upload a picture along with the EF object. I looked around and found a few options, but most were more complicated than I needed or they uploaded the picture/file separately from the create/edit views. So I wanted to document the simple hybrid I was able to use.

You start off with a database, EF model of that DB and an MVC 5 Controller with views, using Entity Framework (template from Visual Studio). The concept is virtually the same for Edit or Create, so I’ll only show the code related to Create.

In the .cshtml file I did 2 things.

1. I updated the Html.BeginForm call to include the Action, Controller, method AND the enctype = “multipart/form-data”
2. I added an input element that specified its type as a file, and it provided a button to choose a file, and showed the filename after the file was chosen.

<input type="file" name="file" id="file" style="width: 100%;" />

With that finished, I went to the backing controller, to the Create method, and added an additional parameter of HttpPostedFileBase. Now when the user clicks the save/create button the file parameter will be non-null if a file is chosen, and you can handle it however you like. Below is an example:

public async Task<ActionResult> Create( [Bind( Include = "Properties" )] EntityFrameWorkModel model, HttpPostedFileBase file )
{
	if ( file == null )
	{
		ModelState.AddModelError( string.Empty, "An image file must be chosen." );
	}
	else if ( ModelState.IsValid )
	{
		string fileName = Path.GetFileName( file.FileName );
		// Upload the file to Azure Blob Storage
		string savedFilePath =
			await Task.Run(
				() =>
				{
					var storageCredsAndAccountKey = new StorageCredentialsAccountAndKey( "{Storage Account Here}", "{Credentials Here}" );
					var storageAccount = new CloudStorageAccount( storageCredsAndAccountKey, true ); // true says to use HTTPS
					var blobClient = storageAccount.CreateCloudBlobClient();
					var container = blobClient.GetContainerReference( "{Container Name Here}" );

					var blockBlob = container.GetBlockBlobReference( fileName );
					blockBlob.UploadFromStream( file.InputStream );

					return blockBlob.Uri.ToString();
				} );
		model.FilePath = savedFilePath;
		
		db.EntityFrameworkObjects.Add( model );
		await db.SaveChangesAsync();
		return RedirectToAction( "Index" );
	}
	
	return View( model);
}

As I said, it’s a simple solution, but it’s quick to implement.