Copied to clipboard

Flag this post as spam?

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


  • Claushingebjerg 925 posts 2527 karma points
    Jan 09, 2018 @ 09:18
    Claushingebjerg
    0

    Member upload file frontend

    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?

  • Dave Woestenborghs 3431 posts 11702 karma points MVP 7x admin c-trib
    Jan 09, 2018 @ 09:24
    Dave Woestenborghs
    0

    Hi Claus,

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

    Dave

  • Claushingebjerg 925 posts 2527 karma points
    Jan 09, 2018 @ 09:29
    Claushingebjerg
    0

    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>
                }       
            }
    
  • Dave Woestenborghs 3431 posts 11702 karma points MVP 7x admin c-trib
    Jan 09, 2018 @ 09:41
    Dave Woestenborghs
    0

    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

  • Claushingebjerg 925 posts 2527 karma points
    Jan 09, 2018 @ 11:59
    Claushingebjerg
    0

    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.

  • John Bergman 481 posts 1120 karma points
    Jan 09, 2018 @ 17:18
    John Bergman
    0

    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.

  • Claushingebjerg 925 posts 2527 karma points
    Jan 10, 2018 @ 07:44
    Claushingebjerg
    0

    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.

  • Claushingebjerg 925 posts 2527 karma points
    Jan 17, 2018 @ 12:58
    Claushingebjerg
    101
    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" /> 
            }
        }
    
  • Amir Khan 1275 posts 2708 karma points
    Jun 27, 2022 @ 17:28
    Amir Khan
    0

    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?

  • Claushingebjerg 925 posts 2527 karma points
    Jun 28, 2022 @ 06:41
    Claushingebjerg
    1

    Hi

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

    newFileName = Guid.NewGuid().ToString() + "_" +
    Path.GetFileName(photo.FileName);
    
Please Sign in or register to post replies

Write your reply to:

Draft