member upload file frontend

Claushingebjerg 936 posts 2571 karma points

Jan 09, 2018 @ 09:18

Extending Umbraco and using the API

Umbraco 7

I'm trying to enable a member to upload a profile pic on an "Update profile" page, based on the built in partial.

Based on the example loop, where properties are rendered in text boxes

@Html.LabelFor(m => profileModel.MemberProperties[i].Value, profileModel.MemberProperties[i].Name)
@Html.EditorFor(m => profileModel.MemberProperties[i].Value)
@Html.HiddenFor(m => profileModel.MemberProperties[i].Alias)

I move on to specific nodes to be able to define specific data types:

@Html.LabelFor(m => profileModel.MemberProperties[0].Value, profileModel.MemberProperties[0].Name)
@Html.TextAreaFor(m => profileModel.MemberProperties[0].Value)
@Html.HiddenFor(m => profileModel.MemberProperties[0].Alias)

But there is no htmlHelper for the upload datatype as far as i can find. So i move on to using input type file, like this:

@Html.LabelFor(m => profileModel.MemberProperties[0].Value, profileModel.MemberProperties[0].Name)
<input type="file" id="@profileModel.MemberProperties[0].Value" name="profileModel.MemberProperties[0].Value" />
@Html.HiddenFor(m => profileModel.MemberProperties[0].Alias)

But this doesnt save anything... Any pointer on how to get this working?

Copy Link

Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib

Jan 09, 2018 @ 09:24

Hi Claus,

can you post the full code of the from and the controller code where you process the submit ?

Dave

Copy Link

Claushingebjerg 936 posts 2571 karma points

Jan 09, 2018 @ 09:29

Its just a partial

        @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
        @using System.Web.Mvc.Html
        @using ClientDependency.Core.Mvc
        @using Umbraco.Web
        @using Umbraco.Web.Controllers

        @{
            var profileModel = Members.GetCurrentMemberProfileModel();

            Html.EnableClientValidation();
            Html.EnableUnobtrusiveJavaScript();
            Html.RequiresJs("/umbraco_client/ui/jquery.js");
            Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.min.js");
            Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.unobtrusive.min.js");

            var success = TempData["ProfileUpdateSuccess"] != null;
        }

        @Html.RenderJsHere()  
        @if (Members.IsLoggedIn() && profileModel != null)
        {   
            if (success)
            {
                @* This message will show if RedirectOnSucces is set to false (default) *@
                <p>Profile updated</p>
            }

            using (Html.BeginUmbracoForm<UmbProfileController>("HandleUpdateProfile"))
            {
                <fieldset>
                    <legend>Edit profile</legend>

                    @Html.ValidationSummary("profileModel", true)

                    @Html.LabelFor(m => profileModel.Name)
                    @Html.TextBoxFor(m => profileModel.Name)
                    @Html.ValidationMessageFor(m => profileModel.Name)
                    <br />

                    @Html.LabelFor(m => profileModel.Email)
                    @Html.TextBoxFor(m => profileModel.Email)
                    @Html.ValidationMessageFor(m => profileModel.Email)
                    <br />

    @Html.LabelFor(m => profileModel.MemberProperties[0].Value, profileModel.MemberProperties[0].Name)
    @Html.TextAreaFor(m => profileModel.MemberProperties[0].Value)
    @Html.HiddenFor(m => profileModel.MemberProperties[0].Alias)

    @Html.LabelFor(m => profileModel.MemberProperties[1].Value, profileModel.MemberProperties[1].Name)
    <input type="file" id="@profileModel.MemberProperties[1].Value" name="profileModel.MemberProperties[1].Value" />
    @Html.HiddenFor(m => profileModel.MemberProperties[1].Alias)

<button>Save</button>
                </fieldset>
            }       
        }

Copy Link

Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib

Jan 09, 2018 @ 09:41

Hi Claus,

It seems a UmbProfileController is a built in controller in the core. It probably won't handel uploaded files.

The best way is to handle the saving your self with a custom controller. A good starting point is the source code of the built in controller : https://github.com/umbraco/Umbraco-CMS/blob/5397f2c53acbdeb0805e1fe39fda938f571d295a/src/Umbraco.Web/Controllers/UmbProfileController.cs

For uploading the profile pictures you have 2 options.

Store the file your self on disk. This is probably the easiest to implement. Just search for an MVC example on uploading files. The downside of this approach is that it will not be manageable from the members section
The second option is to store the uploaded file in the media section and store the id new media item in the member profile. This is more work, but makes it manageable from the members section using a media picker. If you search this forum you will find examples for storing a file in the media section

Dave

Copy Link

Claushingebjerg 936 posts 2571 karma points

Jan 09, 2018 @ 11:59

Hmmm, frontender here :( . Im not really into all the custom controller stuff.

Really strange there isn't native support for the upload datatype in the members section. One would think most member implementations would need at least a profile image.

Copy Link

John Bergman 483 posts 1132 karma points

Jan 09, 2018 @ 17:18

We decided to not use the uploaded file but rather use blueimp's jquery control and the I believe they have an MVC controller example that would get you further down the road.

I didn't like the upload control because the location was stored as a url and if you move the file In the back end you would get disconnected from it.

Copy Link

Claushingebjerg 936 posts 2571 karma points

Jan 10, 2018 @ 07:44

I ended up with a simple razor upload to a folder, and then parsing the url to a text field property on the member. Does the job in this case.

Copy Link

Claushingebjerg 936 posts 2571 karma points

Jan 17, 2018 @ 12:58

WebImage photo = null;
    var newFileName = "";
    var imagePath = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
            newFileName = Guid.NewGuid().ToString() + "_" +
            Path.GetFileName(photo.FileName);
            imagePath = @"\images\" + newFileName;
            photo.Save(@"~\" + imagePath);
        }
    }

...

<form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Upload Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Upload" />
    </fieldset>
  </form>
  <h1>Uploaded Image</h1>
    if(imagePath != ""){
    <div class="result">
        <img src="@imagePath" alt="image" />
    </div>
    }

    if(@profileModel.MemberProperties[1].Value!=""){
        if(String.IsNullOrEmpty(imagePath)){
        <img src="@profileModel.MemberProperties[1].Value?width=300" /> 
        }
    }

Copy Link

Amir Khan 1282 posts 2739 karma points

Jun 27, 2022 @ 17:28

Trying to do something similar here, how did you handle it so that if two members upload files with the same name they don't overwrite eachother?

Copy Link

Claushingebjerg 936 posts 2571 karma points

Jun 28, 2022 @ 06:41

Hi

I add a guid in front of the filename to make it uniquie

newFileName = Guid.NewGuid().ToString() + "_" +
Path.GetFileName(photo.FileName);

Copy Link

is working on a reply...

Flag this post as spam?

Member upload file frontend