Feature: Media Picker drag and drop upload directly on property editor

src/Umbraco.Core/DependencyInjection/UmbracoBuilder.cs

@@ -326,6 +326,7 @@ private void AddCoreServices()
 
             Services.AddUnique<ICultureImpactFactory>(provider => new CultureImpactFactory(provider.GetRequiredService<IOptionsMonitor<ContentSettings>>()));
             Services.AddUnique<IDictionaryService, DictionaryService>();
+            Services.AddUnique<ITemporaryMediaService, TemporaryMediaService>();
         }
     }
 }

src/Umbraco.Core/Services/ITemporaryMediaService.cs

@@ -0,0 +1,8 @@
+using Umbraco.Cms.Core.Models;
+
+namespace Umbraco.Cms.Core.Services;
+
+public interface ITemporaryMediaService
+{
+    public IMedia Save(string temporaryLocation, Guid? startNode, string? mediaTypeAlias);
+}

src/Umbraco.Core/Services/TemporaryMediaService.cs

@@ -0,0 +1,94 @@
+using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Logging;
+using Umbraco.Cms.Core.Extensions;
+using Umbraco.Cms.Core.IO;
+using Umbraco.Cms.Core.Models;
+using Umbraco.Cms.Core.PropertyEditors;
+using Umbraco.Cms.Core.Security;
+using Umbraco.Cms.Core.Strings;
+using Umbraco.Extensions;
+
+namespace Umbraco.Cms.Core.Services;
+
+public class TemporaryMediaService : ITemporaryMediaService
+{
+    private readonly IShortStringHelper _shortStringHelper;
+    private readonly MediaFileManager _mediaFileManager;
+    private readonly IMediaService _mediaService;
+    private readonly MediaUrlGeneratorCollection _mediaUrlGenerators;
+    private readonly IContentTypeBaseServiceProvider _contentTypeBaseServiceProvider;
+    private readonly IHostEnvironment _hostingEnvironment;
+    private readonly ILogger<TemporaryMediaService> _logger;
+    private readonly IBackOfficeSecurityAccessor _backOfficeSecurityAccessor;
+
+    public TemporaryMediaService(
+        IShortStringHelper shortStringHelper,
+        MediaFileManager mediaFileManager,
+        IMediaService mediaService,
+        MediaUrlGeneratorCollection mediaUrlGenerators,
+        IContentTypeBaseServiceProvider contentTypeBaseServiceProvider,
+        IHostEnvironment hostingEnvironment,
+        ILogger<TemporaryMediaService> logger,
+        IBackOfficeSecurityAccessor backOfficeSecurityAccessor)
+    {
+        _shortStringHelper = shortStringHelper;
+        _mediaFileManager = mediaFileManager;
+        _mediaService = mediaService;
+        _mediaUrlGenerators = mediaUrlGenerators;
+        _contentTypeBaseServiceProvider = contentTypeBaseServiceProvider;
+        _hostingEnvironment = hostingEnvironment;
+        _logger = logger;
+        _backOfficeSecurityAccessor = backOfficeSecurityAccessor;
+    }
+
+    public IMedia Save(string temporaryLocation, Guid? startNode, string? mediaTypeAlias)
+    {
+        var userId = _backOfficeSecurityAccessor.BackOfficeSecurity?.CurrentUser?.Id ?? Constants.Security.SuperUserId;
+        var absoluteTempImagePath = _hostingEnvironment.MapPathContentRoot(temporaryLocation);
+        var fileName = Path.GetFileName(absoluteTempImagePath);
+        var safeFileName = fileName.ToSafeFileName(_shortStringHelper);
+
+        var mediaItemName = safeFileName.ToFriendlyName();
+
+        IMedia mediaFile;
+        if (startNode is null)
+        {
+            mediaFile = _mediaService.CreateMedia(mediaItemName, Constants.System.Root, mediaTypeAlias ?? Constants.Conventions.MediaTypes.File, userId);
+        }
+        else
+        {
+            mediaFile = _mediaService.CreateMedia(mediaItemName, startNode.Value, mediaTypeAlias ?? Constants.Conventions.MediaTypes.File, userId);
+        }
+
+        var fileInfo = new FileInfo(absoluteTempImagePath);
+
+        FileStream? fileStream = fileInfo.OpenReadWithRetry();
+        if (fileStream is null)
+        {
+            throw new InvalidOperationException("Could not acquire file stream");
+        }
+
+        using (fileStream)
+        {
+            mediaFile.SetValue(_mediaFileManager, _mediaUrlGenerators, _shortStringHelper, _contentTypeBaseServiceProvider, Constants.Conventions.Media.File, safeFileName, fileStream);
+        }
+
+        _mediaService.Save(mediaFile, userId);
+
+        // Delete temp file now that we have persisted it
+        var folderName = Path.GetDirectoryName(absoluteTempImagePath);
+        try
+        {
+            if (folderName is not null)
+            {
+                Directory.Delete(folderName, true);
+            }
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "Could not delete temp file or folder {FileName}", absoluteTempImagePath);
+        }
+
+        return mediaFile;
+    }
+}

src/Umbraco.Infrastructure/PropertyEditors/MediaPicker3PropertyEditor.cs

@@ -1,7 +1,9 @@
 using System.Runtime.Serialization;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Linq;
+using Umbraco.Cms.Core.Hosting;
 using Umbraco.Cms.Core.IO;
 using Umbraco.Cms.Core.Models;
 using Umbraco.Cms.Core.Models.Editors;
@@ -37,7 +39,8 @@ public MediaPicker3PropertyEditor(
         IDataValueEditorFactory dataValueEditorFactory,
         IIOHelper ioHelper,
         EditorType type = EditorType.PropertyValue)
-        : this(dataValueEditorFactory, ioHelper, StaticServiceProvider.Instance.GetRequiredService<IEditorConfigurationParser>(), type)
+        : this(dataValueEditorFactory, ioHelper,
+            StaticServiceProvider.Instance.GetRequiredService<IEditorConfigurationParser>(), type)
     {
     }
 
@@ -68,18 +71,22 @@ internal class MediaPicker3PropertyValueEditor : DataValueEditor, IDataValueRefe
     {
         private readonly IDataTypeService _dataTypeService;
         private readonly IJsonSerializer _jsonSerializer;
+        private readonly ITemporaryMediaService _temporaryMediaService;
+
 
         public MediaPicker3PropertyValueEditor(
             ILocalizedTextService localizedTextService,
             IShortStringHelper shortStringHelper,
             IJsonSerializer jsonSerializer,
             IIOHelper ioHelper,
             DataEditorAttribute attribute,
-            IDataTypeService dataTypeService)
+            IDataTypeService dataTypeService,
+            ITemporaryMediaService temporaryMediaService)
             : base(localizedTextService, shortStringHelper, jsonSerializer, ioHelper, attribute)
         {
             _jsonSerializer = jsonSerializer;
             _dataTypeService = dataTypeService;
+            _temporaryMediaService = temporaryMediaService;
         }
 
         /// <remarks>
@@ -118,6 +125,11 @@ public override object ToEditor(IProperty property, string? culture = null, stri
         {
             if (editorValue.Value is JArray dtos)
             {
+                if (editorValue.DataTypeConfiguration is MediaPicker3Configuration configuration)
+                {
+                    dtos = PersistTempMedia(dtos, configuration);
+                }
+
                 // Clean up redundant/default data
                 foreach (JObject? dto in dtos.Values<JObject>())
                 {
@@ -150,7 +162,7 @@ internal static IEnumerable<MediaWithCropsDto> Deserialize(IJsonSerializer jsonS
                             Key = Guid.NewGuid(),
                             MediaKey = guidUdi.Guid,
                             Crops = Enumerable.Empty<ImageCropperValue.ImageCropperCrop>(),
-                            FocalPoint = new ImageCropperValue.ImageCropperFocalPoint { Left = 0.5m, Top = 0.5m },
+                            FocalPoint = new ImageCropperValue.ImageCropperFocalPoint {Left = 0.5m, Top = 0.5m},
                         };
                     }
                 }
@@ -170,6 +182,49 @@ internal static IEnumerable<MediaWithCropsDto> Deserialize(IJsonSerializer jsonS
             }
         }
 
+        private JArray PersistTempMedia(JArray jArray, MediaPicker3Configuration mediaPicker3Configuration)
+        {
+            var result = new JArray();
+            foreach (JObject? dto in jArray.Values<JObject>())
+            {
+                if (dto is null)
+                {
+                    continue;
+                }
+
+                if (!dto.TryGetValue("tmpLocation", out JToken? temporaryLocation))
+                {
+                    // If it does not have a temporary path, it can be an already saved image or not-yet uploaded temp-image, check for media-key
+                    if (dto.TryGetValue("mediaKey", out _))
+                    {
+                        result.Add(dto);
+                    }
+
+                    continue;
+                }
+
+                var temporaryLocationString = temporaryLocation.Value<string>();
+                if (temporaryLocationString is null)
+                {
+                    continue;
+                }
+
+                GuidUdi? startNodeGuid = mediaPicker3Configuration.StartNodeId as GuidUdi ?? null;
+                JToken? mediaTypeAlias = dto.GetValue("mediaTypeAlias");
+                IMedia mediaFile = _temporaryMediaService.Save(temporaryLocationString, startNodeGuid?.Guid, mediaTypeAlias?.Value<string>());
+                MediaWithCropsDto? mediaDto = _jsonSerializer.Deserialize<MediaWithCropsDto>(dto.ToString());
+                if (mediaDto is null)
+                {
+                    continue;
+                }
+
+                mediaDto.MediaKey = mediaFile.GetUdi().Guid;
+                result.Add(JObject.Parse(_jsonSerializer.Serialize(mediaDto)));
+            }
+
+            return result;
+        }
+
         /// <summary>
         ///     Model/DTO that represents the JSON that the MediaPicker3 stores.
         /// </summary>

src/Umbraco.Web.BackOffice/Controllers/BackOfficeServerVariables.cs

@@ -529,6 +529,10 @@ internal async Task<Dictionary<string, object>> GetServerVariablesAsync()
                           "propertyTypeApiBaseUrl", _linkGenerator.GetUmbracoApiServiceBaseUrl<PropertyTypeController>(
                               controller => controller.HasValues(string.Empty))
                         },
+                        {
+                            "mediaPickerThreeBaseUrl", _linkGenerator.GetUmbracoApiServiceBaseUrl<MediaPickerThreeController>(
+                                controller => controller.UploadMedia(null!))
+                        },
                     }
                 },
                 {

src/Umbraco.Web.BackOffice/Controllers/MediaPickerThreeController.cs

@@ -0,0 +1,113 @@
+using System.Net;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.Options;
+using Umbraco.Cms.Core;
+using Umbraco.Cms.Core.Configuration.Models;
+using Umbraco.Cms.Core.Dictionary;
+using Umbraco.Cms.Core.Events;
+using Umbraco.Cms.Core.Hosting;
+using Umbraco.Cms.Core.IO;
+using Umbraco.Cms.Core.Media;
+using Umbraco.Cms.Core.Serialization;
+using Umbraco.Cms.Core.Services;
+using Umbraco.Cms.Core.Strings;
+using Umbraco.Cms.Web.Common.ActionsResults;
+using Umbraco.Cms.Web.Common.Attributes;
+using Umbraco.Cms.Web.Common.Authorization;
+using Umbraco.Extensions;
+
+namespace Umbraco.Cms.Web.BackOffice.Controllers;
+
+[PluginController(Constants.Web.Mvc.BackOfficeApiArea)]
+[Authorize(Policy = AuthorizationPolicies.SectionAccessMedia)]
+public class MediaPickerThreeController : ContentControllerBase
+{
+    private readonly IHostingEnvironment _hostingEnvironment;
+    private readonly ContentSettings _contentSettings;
+    private readonly IImageUrlGenerator _imageUrlGenerator;
+    private readonly IIOHelper _ioHelper;
+
+    public MediaPickerThreeController(
+        ICultureDictionary cultureDictionary,
+        ILoggerFactory loggerFactory,
+        IShortStringHelper shortStringHelper,
+        IEventMessagesFactory eventMessages,
+        ILocalizedTextService localizedTextService,
+        IJsonSerializer serializer,
+        IHostingEnvironment hostingEnvironment,
+        IOptionsSnapshot<ContentSettings> contentSettings,
+        IImageUrlGenerator imageUrlGenerator,
+        IIOHelper ioHelper)
+        : base(cultureDictionary, loggerFactory, shortStringHelper, eventMessages, localizedTextService, serializer)
+    {
+        _hostingEnvironment = hostingEnvironment;
+        _contentSettings = contentSettings.Value;
+        _imageUrlGenerator = imageUrlGenerator;
+        _ioHelper = ioHelper;
+    }
+
+    [HttpPost]
+    public async Task<IActionResult> UploadMedia(List<IFormFile> file)
+    {
+        // Create an unique folder path to help with concurrent users to avoid filename clash
+        var imageTempPath =
+            _hostingEnvironment.MapPathContentRoot(Constants.SystemDirectories.TempFileUploads + "/" + Guid.NewGuid());
+
+        // Ensure image temp path exists
+        if (Directory.Exists(imageTempPath) == false)
+        {
+            Directory.CreateDirectory(imageTempPath);
+        }
+
+        // Must have a file
+        if (file.Count == 0)
+        {
+            return NotFound();
+        }
+
+        // Should only have one file
+        if (file.Count > 1)
+        {
+            return new UmbracoProblemResult("Only one file can be uploaded at a time", HttpStatusCode.BadRequest);
+        }
+
+        // Really we should only have one file per request to this endpoint
+        IFormFile formFile = file.First();
+
+        var fileName = formFile.FileName.Trim(new[] { '\"' }).TrimEnd();
+        var safeFileName = fileName.ToSafeFileName(ShortStringHelper);
+        var ext = safeFileName.Substring(safeFileName.LastIndexOf('.') + 1).ToLowerInvariant();
+
+        if (_contentSettings.IsFileAllowedForUpload(ext) == false)
+        {
+            // Throw some error - to say can't upload this IMG type
+            return new UmbracoProblemResult("This is not an image filetype extension that is approved", HttpStatusCode.BadRequest);
+        }
+
+        var newFilePath = imageTempPath + Path.DirectorySeparatorChar + safeFileName;
+        var relativeNewFilePath = GetRelativePath(newFilePath);
+
+        await using (FileStream stream = System.IO.File.Create(newFilePath))
+        {
+            await formFile.CopyToAsync(stream);
+        }
+
+        return Ok(new { tmpLocation = relativeNewFilePath });
+    }
+
+    // Use private method istead of _ioHelper.GetRelativePath as that is relative for the webroot and not the content root.
+    private string GetRelativePath(string path)
+    {
+        if (path.IsFullPath())
+        {
+            var rootDirectory = _hostingEnvironment.MapPathContentRoot("~");
+            var relativePath = _ioHelper.PathStartsWith(path, rootDirectory) ? path[rootDirectory.Length..] : path;
+            path = relativePath;
+        }
+
+        return PathUtility.EnsurePathIsApplicationRootPrefixed(path);
+    }
+}

src/Umbraco.Web.BackOffice/Controllers/MediaTypeController.cs

@@ -132,6 +132,35 @@ public MediaTypeController(
         return dto;
     }
 
+    /// <summary>
+    ///     Returns a media type by alias
+    /// </summary>
+    /// /// <param name="alias">Alias of the media type</param>
+    /// <returns></returns>
+    public IEnumerable<MediaTypeDisplay> GetAllFiltered([FromQuery] string[] aliases)
+    {
+        if (aliases.Length < 1)
+        {
+            return _mediaTypeService.GetAll().Select(_umbracoMapper.Map<IMediaType, MediaTypeDisplay>).WhereNotNull();
+        }
+
+        var mediaTypeDisplays = new List<MediaTypeDisplay>();
+
+        foreach (var alias in aliases)
+        {
+            IMediaType? mediaType = _mediaTypeService.Get(alias);
+
+            MediaTypeDisplay? mediaTypeDisplay = _umbracoMapper.Map<IMediaType, MediaTypeDisplay>(mediaType);
+
+            if (mediaTypeDisplay is not null)
+            {
+                mediaTypeDisplays.Add(mediaTypeDisplay);
+            }
+        }
+
+        return mediaTypeDisplays;
+    }
+
     /// <summary>
     ///     Deletes a media type with a given ID
     /// </summary>

src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js

@@ -129,7 +129,8 @@ Use this directive to render a button with a dropdown of alternative actions.
                 size: "@?",
                 icon: "@?",
                 label: "@?",
-                labelKey: "@?"
+                labelKey: "@?",
+                disabled: "<?"
             },
             link: link
         };