File Upload into MySQL DB + ASP.NET MVC4

Question

I have a question about uploading files into an SQL Database with ASP.NET MVC.
This is my table where I want to store the image:

Table "deliverables"
- item_id
- deliverable_image

item_id is from another table where I store the name, description, tags, ... of the image!

This is my Create View of the DeliverableController:

@model GDMfrontEnd.Models.DeliverableViewModel

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EventViewModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Thumbnail)
        </div>
        <div class="editor-field">
            <!--
            @Html.EditorFor(model => model.Thumbnail)
            @Html.ValidationMessageFor(model => model.Thumbnail)
            -->
            <form action="/profile/upload"  method="post" enctype="multipart/form-data">
              <label for="photo">Photo:</label>
              <input type="file" name="photo" id="photo" />

              <input type="submit" value="Upload" />
            </form>
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Image)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Image)
            @Html.ValidationMessageFor(model => model.Image)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.VideoUrl)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.VideoUrl)
            @Html.ValidationMessageFor(model => model.VideoUrl)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")
    </script>
}

My DeliverableViewModel looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace GDMfrontEnd.Models
{
    public class DeliverableViewModel
    {
        [Required]
        [Display(Name = "Title")]
        public string Title { get; set; }

        [Required]
        [Display(Name = "Description")]
        public string Description { get; set; }

        [Required]
        [Display(Name = "Thumbnail")]
        public byte[] Thumbnail { get; set; }

        [Required]
        [Display(Name = "Image")]
        public byte[] Image { get; set; }

        [Required]
        [Display(Name = "VideoUrl")]
        public string VideoUrl { get; set; }

        public long UsernameID { get; set; }
    }
}

This is my connectionstring:

  <connectionStrings>
    <add name="gdmwebsiteEntities" connectionString="metadata=res://*/Models.DBModel.csdl|res://*/Models.DBModel.ssdl|res://*/Models.DBModel.msl;provider=MySql.Data.MySqlClient;provider connection string=&quot;server=localhost;User Id=root;database=gdmwebsite&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>

But how can I upload files instead of just text?
I've done some tutorials but none of them are very clear and none of them work with MySQL Database.

Niels

Answer 1

To accomplish what you want, regardless that I don't like to save byte arrays in the DB

First change the add the following parameters in your form this allows you send the images

@using (Html.BeginForm(null,null ,new { @enctype= "multipart/form-data"}))

Modified your change the two properties mapped in your model from byte array to type HttpPostedFileBase

public HttpPostedFileBase Image { get; set; }
public HttpPostedFileBase Thumbnail  { get; set; }

Add the properties in your view like

@Html.TextboxFor(model => model.Thumbnail, new {type="file"})
@Html.TextboxFor(model => model.Image , new {type="file"})

Remove the internal form you shouldn't have two nested forms,

Now when you receive the values you can save using SaveAs Method or convert into byte array

model.Image.SaveAs();

For more information here's the doc

Answer 2

This did it for me:

MemoryStream target = new MemoryStream();
model.Image.InputStream.CopyTo(target);
byte[] data = target.ToArray();