how to retrieve image saved with httppostedfilebase - Extending Umbraco and using the API

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Tom Engan 430 posts 1173 karma points

Jun 06, 2017 @ 16:08
0

SurfaceController: How to render image frontend saved with HttpPostedFileBase?

Extending Umbraco and using the API

Umbraco 7
MODEL (Simplified)
```
public class MemberViewModel
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
    public HttpPostedFileBase Avatar { get; set; }
}
```
SURFACECONTROLLER (Simplified - ActionResult when Create).

The image (named "Avatar") is saved in media folder as two files: filename.extension and filename_thumb.extension, and the filename.extension is viewed in members backoffice section.
```
var memberService = Services.MemberService;
var member = memberService.CreateMemberWithIdentity(model.Email, model.Email, model.Name, "hiker");
member.SetValue("avatar", model.Avatar);
memberService.SavePassword(member, model.Password);
memberService.Save(member);
```
VIEW (Simplified, image uploaded with this )
```
<input type="file" name="Avatar" />
```
Other textfield than images, I get like this for wieving stored text in membership from surfacecontroller:

model.Mobile = memberService.GetValue("mobile").ToString(); , but can't of course do that with a image.

Someone who has a controller that retrieves image stored in membership, and how to get this in View (with use of something like @Html.TextBoxFor(model => model.Mobile), but for images instead of text field)?
Copy Link
Tom Engan 430 posts 1173 karma points

Jun 07, 2017 @ 14:27

0

The value I want to get in view, probebly an image tag, looks like to be a string inside memberService.GetValue("avatar").ToString(), since this is the path to the image on the drive, in the umbracos imagemap. model.Avatar is not a string, but a HttpPostedFileBase, so how do I render this in the view?

Copy Link

Craig Mayers 164 posts 508 karma points

Jun 07, 2017 @ 14:53

Hi Tom,

You need to convert the file bytes to an Image before displaying. See code example below:

public void ExampleMethod(HttpPostedFileBase file)
    {
        if (file.ContentLength > 0)
        {
            var filename = Path.GetFileName(file.FileName);

            System.Drawing.Image sourceimage =
                System.Drawing.Image.FromStream(file.InputStream);
        }
    }

Let me know how it goes...

Regards

Craig

Copy Link

Tom Engan 430 posts 1173 karma points

Jun 07, 2017 @ 15:02

0

I'm not sure how to use this. With textfield, I just do it like this in the surfacecontroller:

model.Avatar = memberService.GetValue("avatar").ToString();

The path: "/media/1058/gammeltbilde.png" are already there in the membership properties as a string (see picture), so I think maybe I could "easy" get it (if I knew how), like < img src="/media/1058/gammeltbilde.png" / > somehow from the model, in the view?

But if not, I put the ExampleMethod somewhere in the surfacecontroller, so how can this be used, in detail (in the controller / view)?

Copy Link
Craig Mayers 164 posts 508 karma points

Jun 07, 2017 @ 15:40
0
Hi Tom,

My apologies I didn't see the image you added before!

OK, so now it makes more sense..

This line
```
memberService.GetValue("avatar").ToString()
```
Will most likely return you the ID of the media node. You can then use the built in UmbracoHelpers to get the URL to the image.

Example:
```
var avatarImg = Umbraco.TypedMedia(avatarId);
```
Then use it like so:
```
<img src="@avatarImg.Url" alt="some text" />
```
Regards

Craig
Copy Link
Tom Engan 430 posts 1173 karma points

Jun 07, 2017 @ 18:07
0
Thanks. The only way I got this to work (so far), was with ViewBag:

Surfacecontroller (Avatar not required, System.NullReferenceException if avatar empty):
```
try { ViewBag.Avatar = memberService.GetValue("avatar").ToString(); } catch { }
```
View:
```
@if (ViewBag.Avatar != null) { <img src="@ViewBag.Avatar" alt="some text" /> }
```
Because of problems getting the proposed var avatarImg into view (and I didn't find any id there). Any conceivable disadvantages with this method? Would it be better if I use the same model method I've used in the rest of the view (something like model => model.Avatar)?
Copy Link
M 40 posts 273 karma points

Jun 28, 2017 @ 11:25
100
Hi Tom, I'm having a similar problem to you. My code is very similar (we must've read the same articles).

I've got around it by adding a a string "ExistingImage" in the model and then assigning the path to it in the controller. I can then check if it exists and show the image if it does:

Model:
```
public string ExistingProfilePicture { get; set; }
public HttpPostedFileBase NewProfilePicture { get; set; }
```
Controller:
```
var currentMember = memberService.GetById(Members.GetCurrentMemberId());
if (currentMember.Properties[10].Value != null)
{
    profileModel.ExistingProfilePicture = currentMember.Properties[10].Value.ToString();
}
```
View:
```
if (Model.ExistingProfilePicture != null)
{
    <img src="@Model.ExistingProfilePicture" />
}
```
Not sure if it's a better or worse way of doing it, but it's different at least.
Copy Link
Tom Engan 430 posts 1173 karma points

Jun 28, 2017 @ 21:21

0

Thank you, I prefer your method - rather expand the existing model than assign a value to ViewBag, since the method you suggest is much more cosistent.

Something similar I've just done recently - expanded the model: https://our.umbraco.org/forum/extending-umbraco-and-using-the-api/86615-how-to-add-extra-field-to-model-into-view

It was member.Properties[5].Value.ToString() same as member.GetValue("avatar").ToString() in my case (se picture above).

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

SurfaceController: How to render image frontend saved with HttpPostedFileBase?