EF7 MVC ASP.NET文件上传形式

Question

I'm trying to upload a file alongside with some model information. In my table I already have a field 'image' (string) to save the relative URL to the image.

But I don't really know how to do the uploading itself. I've already read a lot off tutorials, but they all use HttpPostedFileBase, which isn't supported anymore?

This is what I have thus far:

Upload page:

@using (Html.BeginForm("Lets", "Create", FormMethod.Post, new { @enctype = "multipart/form-data" }))
            {
                @Html.AntiForgeryToken()
                <fieldset>
                    <div class="form-group">
                        <div class="mdl-cell col-md-10 mdl-textfield mdl-js-textfield">
                            @Html.LabelFor(m => m.Lets.Name, new { @class="mdl-textfield__label" })
                            @Html.TextBoxFor(m => m.Lets.Name, new { @class= "form-control mdl-textfield__input" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="mdl-cell col-md-10 mdl-textfield mdl-js-textfield">
                            @Html.LabelFor(m => m.Lets.Images)
                            <input type="file" name="LetsImages" id="m.Lets.Images" /> <br />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="mdl-cell col-md-10 mdl-textfield mdl-js-textfield">
                            @Html.LabelFor(m => m.Lets.Description, new { @class="mdl-textfield__label" })
                            @Html.TextBoxFor(m => m.Lets.Description, new { @class= "form-control mdl-textfield__input" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="mdl-cell col-md-10 mdl-textfield mdl-js-textfield">
                            @Html.LabelFor(m => m.Lets.Credits, new { @class="mdl-textfield__label" })
                            @Html.TextBoxFor(m => m.Lets.Credits, new { @class= "form-control mdl-textfield__input" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="mdl-cell col-md-10">
                            @Html.LabelFor(m => m.Lets.Group)
                            @Html.DropDownListFor(m => m.Lets.GroupId, new SelectList(Model.Groups, "Id", "Name"), "-- Selecteer een Groep --", new { @class= "form-control" })
                        </div>
                    </div>
                    @Html.ActionLink("Terug naar het overzicht", "Index", new { }, new { @class= "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" })
                    <input type="submit" value="Save" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" />
                </fieldset>
            }

Controller:

 [HttpGet]
    public IActionResult Create()
    {
        var model = new LetsViewModel
        {
            Lets = new Lets(),
            Groups = _kletsContext.Groups.AsEnumerable(),
            Letses = _kletsContext.Lets.AsEnumerable().OrderBy(m => m.Name)
        };

        return View(model);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Create(LetsViewModel model)
    {
        LetsViewModel viewModel = null;
        try
        {
            if(!ModelState.IsValid)
                throw new Exception("The Lets model is not valid!");

                var letsImage = "INSERT LOGIC FOR IMAGEUPLOAD HERE?";
                model.Lets.UserId = User.GetUserId();
                model.Lets.StatusId = 1;
                model.Lets.Images = letsImage;


            _kletsContext.Lets.Add(model.Lets);
            if (_kletsContext.SaveChanges() == 0)
            {
               throw new Exception("The Lets model could not be saved!");
            }   

            //Success(CreateMessage(ControllerActionType.Create, "klets", model.Name), true);

        return RedirectToAction("Index", "Home");

        }
        catch(Exception ex)
        {
            ModelState.AddModelError(string.Empty, "Unable to save changes.");

            viewModel = new LetsViewModel
            {
                Lets = model.Lets,
                Letses = _kletsContext.Lets.AsEnumerable().OrderBy(m => m.Name)
            };
        }
        return View(viewModel);
    }

I've added the place where I think the logic should come?

So what I want to do is:

Upload the Image to a folder Rename it Store the relative path as a string to the db.

Thank you

Answer 1

There is no HttpPostedFileBase in MVC6, you have to use IFormFile like this:

public FileDetails UploadSingle(IFormFile file)
{
    FileDetails fileDetails;
    using (var reader = new StreamReader(file.OpenReadStream()))
    {
        var fileContent = reader.ReadToEnd();
        var parsedContentDisposition = ContentDispositionHeaderValue.Parse(file.ContentDisposition);
        fileDetails = new FileDetails
        {
            Filename = parsedContentDisposition.FileName,
            Content = fileContent
        };
    }

    return fileDetails;
}

Answer 2

You can upload images using handlers , link to tutorials are

http://www.c-sharpcorner.com/blogs/uploading-files-using-jquery-ajax-in-asp-net1

http://www.binaryintellect.net/articles/f2a2f1ee-e18a-416b-893e-883c800f83f4.aspx

http://www.dotnetjalps.com/2011/12/async-file-upload-with-jquery-and.html?m=1

These tutorials are using jquery to pass the image to the handler and then handler saving the image in the folder. You can rename the image before uploading to the folder and get back the saved image name in response and then save image name along with other model properties.

Answer 3

I eventually got it working by:

1. include using Microsoft.AspNet.Hosting; and using System.IO; using System.Net.Http.Headers; using System.IO; using System.Net.Http.Headers;
2. Add public IHostingEnvironment _environment { get; set;} public IHostingEnvironment _environment { get; set;} to your controller (I added it to my commoncontroller, and then it's available to me on my controller)

3. Then in my create:

    [HttpPost] [ValidateAntiForgeryToken] public IActionResult Create(LetsViewModel model, IFormFile LetsImages) { LetsViewModel viewModel = null; try { if(!ModelState.IsValid) throw new Exception("The Lets model is not valid!"); if(LetsImages != null) { var targetDirectory = Path.Combine(_environment.WebRootPath, string.Format("images/uploads")); var fileName = ContentDispositionHeaderValue .Parse(LetsImages.ContentDisposition) .FileName .Trim('"'); var savePath = Path.Combine(targetDirectory, fileName); var relPath = "/images/uploads/" + fileName; try { LetsImages.SaveAs(savePath); model.Lets.Images = relPath; } catch { throw new Exception("There was a problem with saving the file!"); } } else { model.Lets.Images = null; } model.Lets.UserId = User.GetUserId(); model.Lets.StatusId = 1; _kletsContext.Lets.Add(model.Lets); if (_kletsContext.SaveChanges() == 0) { throw new Exception("The Lets model could not be saved!"); } //Success(CreateMessage(ControllerActionType.Create, "klets", model.Name), true); return RedirectToAction("Index", "Home"); } catch(Exception ex) { ModelState.AddModelError(string.Empty, "Unable to save changes."); viewModel = new LetsViewModel { Lets = model.Lets, Groups = _kletsContext.Groups.AsEnumerable(), Letses = _kletsContext.Lets.AsEnumerable().OrderBy(m => m.Name) }; } return View(viewModel); } 

Just make sure you've created the folder where the images should belong, else it's not going to work without any error!

Thanks everybody for your help!