Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Kieron 152 posts 390 karma points
    Jan 03, 2019 @ 12:02
    Kieron
    0

    Add image to media folder from front end

    Hi looking to upload images to the media format, and then return a link to the said image when it has become available.

    Ultimately this is to generate one of those fake signatures from someone's name, probably in base64 format, then in turn upload that image, and use the link in an email.

    Thanks!

    Copy Link
  • Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib
    Jan 04, 2019 @ 10:49
    Dan Diplo
    1

    Are you trying to upload images to the Media library programmatically from the front-end of the site? If so, you'll need to use the Media Service to create the items.

    https://umbraco.tv/videos/umbraco-v7/developer/fundamentals/media-api/introduction/

    https://techiespice.com/2018/11/01/create-folders-upload-images-under-media-in-umbraco/

    Copy Link
  • Kieron 152 posts 390 karma points
    Jan 04, 2019 @ 11:13
    Kieron
    0

    Hi Dan, yes that's right, I am turning a Name + Surname into a 'fake' signature, (you know where its literally just Your Name but in squigly italics) in form of a base64 string, and in turn upload that image to the media, get the URL of the said image, embed it into an <img> tag and email it off.

    I already have the base64 part, so I do have an image ready to upload.

    Copy Link
  • Frans de Jong 548 posts 1840 karma points MVP 4x c-trib
    Jan 04, 2019 @ 11:26
    Frans de Jong
    1

    This snippet is taken from a older project and might need some cleaning up but it should get you started:

    IMediaService mediaService = Services.MediaService;

                if ((model.NewImage != null) && (model.NewImage.ContentLength != 0) && (model.NewImage.ContentType.Contains("image")))
                {
                    IMedia folder = mediaService.GetRootMedia().FirstOrDefault(m => m.Name.Equals("Agenda images"));
                    PublishedPropertyType imagesProperty = Event.GetModelPropertyType(n => n.Image);
                    int folderId = currentEvent.GetValue<int>(imagesProperty.PropertyTypeAlias);
                    if (folderId <= 0 && folder != null)
                    {
                        folderId = folder.Id;
                    }
                    else if (folderId <= 0 || folder == null)
                    {
                        folder = mediaService.CreateMedia("Agenda images", -1, Folder.ModelTypeAlias);
                        mediaService.Save(folder);
                        folderId = folder.Id;
                    }

                    IMedia mediaImage = mediaService.CreateMedia(model.NewImage.FileName, folderId, Image.ModelTypeAlias);
                    PublishedPropertyType umbracoFileProperty = Image.GetModelPropertyType(i => i.UmbracoFile);
                    mediaImage.SetValue(umbracoFileProperty.PropertyTypeAlias, model.NewImage);
                    mediaService.Save(mediaImage);
                    currentEvent.SetValue("image", mediaImage.Id);

                }
    Copy Link
  • Kieron 152 posts 390 karma points
    Jan 07, 2019 @ 16:23
    Kieron
    0

    Hi Frans, thanks for this, do you know which part of this code is the 'source' image, just trying to understand it.

    Copy Link
  • Frans de Jong 548 posts 1840 karma points MVP 4x c-trib
    Jan 08, 2019 @ 08:09
    Frans de Jong
    0

    Hi Kieron,

    New image is a property on the edit model:

        public HttpPostedFileBase NewImage { get; set; }

    Is this the part you are looking for?

    So first get the mediaService, after that I do some checks to see if there is a new image.

    After that I check if the folder I want to store the folder in exists and if not (else if) I create the folder.

    Finaly I create the new image, save it and add it to the current publishedcontentitem I am working on.

    Does that clarify the code?

    Frans

    Copy Link
  • Kieron 152 posts 390 karma points
    Jan 08, 2019 @ 11:39
    Kieron
    0

    I see thank you, it does make some sense, though I am still struggling a bit, mainly because the image I have is generated from a canvas like so;

    var sigUrl = canvas.toDataURL().toString();

    And then for this early implementation, I am injecting that into an image tag, but id like to swap it to be uploaded to Umbraco, and then the URL for the image injected instead.

    $(".js-signature-starter-embed").attr("src", sigUrl);

    I run it all on a form submit, do you think it would be possible to have the form submit, upload the image, get the URL, put the URL into the image tag, and send the email?

    Copy Link
  • Frans de Jong 548 posts 1840 karma points MVP 4x c-trib
    Jan 09, 2019 @ 08:01
    Frans de Jong
    0

    What you could do is send the image to a surfacecontroller with a variation on my code.

         IMedia mediaImage = mediaService.CreateMedia(model.NewImage.FileName, folderId, Image.ModelTypeAlias);
     PublishedPropertyType umbracoFileProperty = Image.GetModelPropertyType(i => i.UmbracoFile);
     mediaImage.SetValue(umbracoFileProperty.PropertyTypeAlias, model.NewImage);
     mediaService.Save(mediaImage);
IPublishedContent publishedMediaItem = Umbraco.TypedMedia(mediaImage.Id);
string mediaUrl = publishedMediaItem.Url;

    The Url is the part you want to return and show via a ajax call or page reload or whatever you choose.

    Is this what you were looking for?

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft