MVC C# Upload einer Datei

Question

Hallo Forum,

ich versuche gerade ein Datei über die View in eine Tabelle in der Datenbank zu speichern.

Bin ander View und möchte die Datei auswählen. Dabei möchte ich auch die Ansicht wie sie automatisch erzeugt wurde weiter beibehalten.

Der Code in der View sieht gerade so aus. ( Bin am Probieren )

   <div class="form-group">
        @*<form method="post" enctype="multipart/form-data" asp-controller="UploadFiles" asp-action="Index">*@
        @*<div class="form-group">*@
        <div class="col-md-10">
            <p>Upload one or more files using this form:</p>
            <input type="file" name="files" multiple />
        </div>
        @*</div>*@
        @*<div class="form-group">
                <div class="col-md-10">
                    <input type="submit" value="Upload" />
                </div>
            </div>*@
        @*</form>*@
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.InputFileName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.InputFileName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.InputFileName, "", new { @class = "text-danger" })
        </div>
    </div>

Möchten den InputFileName nutzen um den Dateinamen an den Controller zu übergeben.

So sieht es jetzt in der View aus. Alles in dem roten Kasten möchte ich eigentlich in der Zeile InputFileName haben.

Wie kann man das machen ?

---

Gruß Roland

Answer 1

Sorry das Bild fehlte noch wie es ist und wie es sein soll

---

Gruß Roland

Answer 2

Hallo Roland,

ich verstehe das Problem an für sich nicht. Wie man in ASP.NET MVC einen Dateiupload durchführt und den Dateinamen sowie die Dateiinhalte dann serverseitig wieder auslesen kann, findet man doch zuhauf im Netz. Bspw. hier eine (IMHO) recht gute Erklärung inkl. Codebeispielen:

  ASP.NET MVC 5 - Working With Files

Falls Du den Dateinamen des input type="file" Felds vorbelegen willst: Das geht nicht, die Browser verhindern das aus Sicherheitsgründen.

---

Gruß, Stefan
Microsoft MVP - Visual Developer ASP/ASP.NET (2001-2018)
https://www.asp-solutions.de/ - IT Beratung, Softwareentwicklung, Remotesupport

Answer 3

Hallo Stefan,

hab es hinbekommen. Danke für Deine Antwort.

---

Gruß Roland

Answer 4

Hallo Roland,

es freut mich, dass Du "es" geschafft hast.

Aber es wäre trotzdem prima, wenn Du uns sagen könntest, was Du hinbekommen hast und wie.

---

Gruß, Stefan
Microsoft MVP - Visual Developer ASP/ASP.NET (2001-2018)
https://www.asp-solutions.de/ - IT Beratung, Softwareentwicklung, Remotesupport

Answer 5

Hallo Stefan,

ja gerne vielleicht hilft das auch noch jemand  der auf der Suche ist.

Anbei der Code für das Speichern der Datei als Stream in der DB.

Controller

using System.Data.SqlClient;
using System.Text;

[HttpPost]
        public ActionResult AddImage(Dokumente model,HttpPostedFileBase File)
        {
            if(File.ContentLength > 0)
            {
                // Tut was    
            }

            String FileName = Path.GetFileName(File.FileName);
            String FileExt = Path.GetExtension(File.FileName).ToUpper();

            byte[] uploadedFile = new byte[model.File.InputStream.Length];
            model.File.InputStream.Read(uploadedFile, 0, uploadedFile.Length);

            string ConString = "data source = ....";
            
            SqlConnection conbasis = new SqlConnection(ConString);
            conbasis.Open();

            StringBuilder isbx = new StringBuilder();
            string isqlSatz = "INSERT INTO [dbo].[Dokumente] ([DOK_DEB_ID], [DOK_NameFile], [DOK_File])";
            isqlSatz += " VALUES (@DOK_DEB_ID, @DOK_NameFile, @DOK_File)";
            isbx.AppendLine(isqlSatz);
            SqlParameter prm = new SqlParameter("@DOK_File", uploadedFile);
            using (SqlCommand cmdx = new SqlCommand(isbx.ToString(), conbasis))
            {
                cmdx.Parameters.Add(prm);
                cmdx.CommandTimeout = 600;
                cmdx.Parameters.AddWithValue("DOK_NameFile", FileName);
                cmdx.Parameters.AddWithValue("DOK_DEB_ID", "1");
                cmdx.ExecuteNonQuery();
            }
            conbasis.Close();
            return View("ListImage");
        }

in der View sieht es so aus.

@model UpLoadTest01.Models.Dokumente

@{
    ViewBag.Title = "AddImage";
}

<h2>AddImage</h2>

@using(Html.BeginForm("AddImage","Home",FormMethod.Post, new { enctype = "multipart/form-data" }))
{

<div class="form-horizontal">


    <div class="form-group">

        <div class="col-md-10">

            <input type="file" id="File" name="File"/>

        </div>


    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Submit" class="btn btn-default" />
        </div>

    </div>


 </div>

---

Gruß Roland

Answer 6

Hi Roland,
Dein Beispiel zeigt das Hochladen und Ablegen nur der Datei als separaten Prozess mit direktem Zugriff auf den SQL Server. Üblich ist aber das gleichzeitige Erfassen von weiteren Daten und die Ablage der Datei mit dem EF.

---

--
Viele Grüsse
Peter Fleischer (ehem. MVP für Developer Technologies)
Meine Homepage mit Tipps und Tricks

Answer 7

Hallo Peter,

das habe ich so nicht gemacht. Ich lade die Datei einzeln.

Wie man das machen kann wenn noch weitere Info Felder dabei sind wie zB. Name, Vorname, TelNummer,...

gespeichert werden und ohne direkt Zugriff auf den SQL Server hab ich nicht gemacht.

Wenn Du da eine Lösung hast, wäre interessant zu sehen.

Danke.

---

Gruß Roland

Answer 8

Hi Roland,
die Lösung ist recht simpel:

1. Es wird mit einem eigenen Objekt für Neuerfassung gearbeitet, welches HttpPostedFileBase enthält:

using System.ComponentModel.DataAnnotations;
using System.Web;

namespace WebApplication1.Models
{
  public class Document
  {
    [Key, Display(Name = "ID")] public int ID { get; set; }
    [Display(Name = "Info")] public string Info { get; set; }
    [Display(Name = "Datei")] public HttpPostedFileBase File { get; set; }
  }
}

Die Sicht wird mit einem "leeren" Objekt aufgerufen:

    public ActionResult Create()
    {
      ViewBag.Message = "Neues Dokument laden";
      return View(new Document());
    }

In der Sicht werden alle Daten incl. Dokumentpfad ausgefüllt:

@model WebApplication1.Models.Document

<div class="form-group">
  <h2>Dokument hochladen</h2>
  @using (Html.BeginForm("Create",
                          "Home",
                          FormMethod.Post,
                          new { enctype = "multipart/form-data" }))
  {
    <div>
      @Html.DisplayNameFor(model => model.Info)
    </div>
    <div>
      @Html.TextBoxFor(model => model.Info)
    </div>
    <br />
    <label for="file">Upload Image:</label>
    <input type="file" name="file" id="file" /><br /><br />
    <input type="submit" value="Upload Dokument" />
  }
  <br />
  @ViewBag.Message
</div>

Nach dem Submit wird ein neues Datenobjekt für die Datenbank erzeugt und gespeichert:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication4.Controllers
{
  public class HomeController : Controller
  {
    private DemoDBEntities ctx;
    public HomeController() => ctx = new DemoDBEntities();

….
    [HttpPost()]
    public ActionResult Create(Document k)
    {
      if (k.File != null && k.File.ContentLength > 0)
        try
        {
          TabBild tb = new TabBild();
          tb.Info = k.Info;
          tb.Dateiname = k.File.FileName;
          tb.Datei = new byte[k.File.ContentLength];
          k.File.InputStream.Read(tb.Datei, 0, tb.Datei.Length);
          ctx.TabBild.Add(tb);
          ctx.SaveChanges();

          ViewBag.Message = "File uploaded successfully";
        }
        catch (Exception ex)
        {
          ViewBag.Message = "ERROR:" + ex.Message.ToString();
        }
      else
      {
        ViewBag.Message = "You have not specified a file.";
      }
      return View();
    }
  }
}

Das EF-Datenobjekt ist in meinem Beispiel ist der Context "DemoDbEntities" mit dem Datenobjekt vom Typ "TabBild" mit der Eigenschaft (Datenspalte) "Datei" vom Typ image. Der Vollständigkeit halber wären noch die Datenfelder "Info" und "Dateiname" zu erwähnen, in den die weiteren erfassten Angaben abgelegt werden. Auch fehlt in der Demo ein in der Praxis üblicherweise erforderliche Eingabeprüfung.

---

--
Viele Grüsse
Peter Fleischer (ehem. MVP für Developer Technologies)
Meine Homepage mit Tipps und Tricks