HttpPostedFileBase in Asp.Net MVC 4 with Jasny Bootstrap with existing image saved to S3

Question

I need to know if an image has been removed in Jasny Bootstrap. My saving and removing code works great. The problem is knowing when the image isn't set bc the file upload image only translated to an HttpPostedFileBase when one exists.

Class:

    [NotMapped]
    public HttpPostedFileBase Image { get; set; }

Edit View:

@using (Html.BeginForm("Edit", "MyObject", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    <div class="field">
        <div class="fileinput @imageClass" data-provides="fileinput" data-name="Image">
        <div class="fileinput-new thumbnail" style="width: 150px; height: 150px;">
        <img src="@MyNamespace.Components.S3Utility.DefaultImageUrl">
     </div>
     <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 350px; max-height: 350px;">
         <img src="@imageUrl">
     </div>
     <div>
         <span class="btn btn-default btn-file">
             <span class="fileinput-new">Select image</span>
             <span class="fileinput-exists">Change</span>
             <input type="file" name="Image">
         </span>
         <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
}

Save Code:

if (data.Image == null) {
    S3Utility.Delete(myObject.Id);
} else {
    S3Utility.Upload(data.Image, myObject.Id);
}

All of that works fine. It even loads up the image if there is one properly (@imageUrl, which I'm setting).

The problem is that 'Image' HttpPostedFileBase is always null on update.

Is there some way I can know if an image has been removed or is set? And have that value be updated on setting/removing the image in Jasny?

I saw this post

http://www.jasny.net/articles/jasny-bootstrap-file-upload-with-existing-file/

but it didn't translate to Asp.Net MVC 4 and HttpPostedFileBase.

score 0 · Answer 1 · answered Apr 17 '14 at 00:12

Ok, so the answer was fairly simple. In the object I added another property

[NotMapped]
public bool ExistingImage { get; set; }

In my edit view I added a hidden field for ExistingImage only if the image does exist

Edit View:

@using (Html.BeginForm("Edit", "MyObject", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    <div class="field">
        <div class="fileinput @imageClass" data-provides="fileinput" data-name="Image">
        <div class="fileinput-new thumbnail" style="width: 150px; height: 150px;">
        <img src="@MyNamespace.Components.S3Utility.DefaultImageUrl">
     </div>
     <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 350px; max-height: 350px;">
         <img src="@imageUrl">
         // THIS IS THE NEW CODE FOR CHECKING EXISTING IMAGE
         @if (existingImage) {
             <input type="hidden" name="ExistingImage" value="true" />
         }
         // END NEW CODE
     </div>
     <div>
         <span class="btn btn-default btn-file">
             <span class="fileinput-new">Select image</span>
             <span class="fileinput-exists">Change</span>
             <input type="file" name="Image">
         </span>
         <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
}

And then in the save I just check to see if it is an existing image or not:

if (!data.ExistingImage) {
    if (data.Image == null) {
        S3Utility.Delete(myObject.Id);
    } else {
        S3Utility.Upload(data.Image, myObject.Id);
    }
}

My problem was not understanding how the .fileinput-exists section works. When you remove or update an image, it actually removes everything in that section. So if remove or update get's called in Jasny, ExistingImage will default to false. At that point I just check to see if Image is null (removed or nonexistent) or if it exists (been updated). If the Image doesn't exist, this does call an extra delete to S3, but that isn't a big deal (for my purposes).

HttpPostedFileBase in Asp.Net MVC 4 with Jasny Bootstrap with existing image saved to S3

1 Answers1