Copied to clipboard

Flag this post as spam?

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


  • Ben 6 posts 97 karma points
    Jan 11, 2019 @ 02:06
    Ben
    0

    Get the width and height of an image in a file upload property?

    I am building a new website on Umbraco 7.12.3 which will be used to showcase a collection of photos. Each photo will have its own page.

    I would prefer not to use the media section for these photos as they don't need to be reused elsewhere on the site. Therefore, I have used a file upload field on the doctype instead of using a media picker.

    However, in my razor template, I need access to the width and height of the image. This would usually be done with the umbracoWidth and umbracoHeight properties on a media item but since I am using a file upload property and not a media picker, these values are not available.

    Is there any way to get the width and height of an image uploaded via the file upload property?

  • Allan 35 posts 182 karma points
    Jan 11, 2019 @ 09:10
    Allan
    0

    Fairly sure there is no data stored other than the location of the image if you use an upload field because it does not know what you are uploading (pdf, image, word doc, etc.).

    Using a media picker in Umbraco 7 you can still upload the file on the fly (just like an upload field) but have a lot more scope to work with the image dimensions once the image is added. You can also tailor that specific media picker with any constraints if required (e.g. only allow one item selected/uploaded from one specific section).

    Other than the images not being re-used what are your other reasons for not using the media section for media items?

  • Ben 6 posts 97 karma points
    Jan 11, 2019 @ 10:01
    Ben
    0

    There will likely be a few thousand images uploaded so I thought it would be easier to keep the images organised if they were uploaded directly to the page node. Then the media section would just be used for images that will be reused e.g. banner images.

    It's not too hard for the user to upload images via the media picker and this is the method I would use normally. However, since each image needs its own page there would be a need to organise both the page nodes and image files separately which is what I was hoping to avoid.

    I have read a post that suggested that in older versions of Umbraco (4 I think) it was possible to add a file upload to a page node as well as the umbracoWidth and umbracoHeight properties. These properties would then be updated when an image was uploaded, just like it currently does on a media item. I have tried this but it doesn't work sadly. Is there any way to get this functionality in v7?

  • Ben 6 posts 97 karma points
    Feb 05, 2019 @ 22:48
    Ben
    100

    Here is the code I ended up using to solve the problem, just in case anyone else has a similar requirement. :)

    Code goes in the App_Code directory. I ended up using "image cropper" for the field property.

    enter image description here

  • Carlos Casalicchio 104 posts 444 karma points
    May 09, 2019 @ 02:22
    Carlos Casalicchio
    0

    I find that using System.Drawing.Image is better:

    public static int CreateMedia(Stream stream, string name, MediaTypes mediaType, int? parentId = -1)
            {
                MediaService mediaService = (MediaService)ApplicationContext.Current.Services.MediaService;
                var media = mediaService.CreateMedia(name, parentId.Value, mediaType.MediaTypeName());
    
                var folderData = GetLatestMediaFolder(name);
    
                using (var fileStream = File.Create(folderData.FileFullPath))
                {
                    stream.Seek(0, SeekOrigin.Begin);
                    stream.CopyTo(fileStream);
                }
    
                System.Drawing.Image img = System.Drawing.Image.FromFile(folderData.FileFullPath);
    
                media.SetValue("umbracoFile", folderData.Url);
                media.SetValue("umbracoWidth", img.Width);
                media.SetValue("umbracoHeight", img.Height);
                media.SetValue("umbracoBytes", new FileInfo(folderData.FileFullPath).Length);
                media.SetValue("umbracoExtension", Path.GetExtension(folderData.FileFullPath).Substring(1));
                mediaService.Save(media);
    
                return media.Id;
            }
    
        private static FolderData GetLatestMediaFolder(string fileName)
        {
            var root = System.Web.Hosting.HostingEnvironment.MapPath("~/");
            var mediaFolder = Path.Combine(root, "Media");
            var directories = Directory.GetDirectories(mediaFolder);
            int max = 0;
            int folderNumber = 1000;
            var latestDir = string.Empty;
    
            foreach (var dir in directories)
            {
                var d = new DirectoryInfo(dir).Name;
    
                if (int.TryParse(d, out int number))
                {
                    folderNumber = number;
                    if (folderNumber > max)
                    {
                        max = folderNumber;
                    }
                }
            }
            latestDir = (folderNumber + 1).ToString();
    
            var folderData = new FolderData()
            {
                FileFullPath = Path.Combine(mediaFolder, latestDir, fileName),
                DirectoryFullPath = Path.Combine(mediaFolder, latestDir),
                Url = $"/Media/{latestDir}/{fileName}"
            };
    
            Directory.CreateDirectory(folderData.DirectoryFullPath);
            return folderData;
        }
    
    internal class FolderData
        {
            public string FileFullPath { get; set; }
            public string DirectoryFullPath { get; set; }
            public string Url { get; set; }
        }
    
Please Sign in or register to post replies

Write your reply to:

Draft