Way to map drag and drop uploads to a configured media type

[enkelmedia]

We're using some custom media types, most of the time a video-media type.

When someone drags and drops ie a .mov or .mp4-file it gets the "umbracoAutoSelect" document type and are sent to the PostAddFile()-file method on the MediaController.

Inside this method we're comparing the extension against known image types and otherwise we're using the "File" media type as a fallback.

It would be useful to be able to hook in here and setup a mapping between file extensions and media types, something that could be configured during startup, maybe using a collection builder or something.

  public class MyComposer : IUserComposer
    {
        public void Compose(Composition composition)
        {            
            composition.MediaMappings().Append<VideoFilesMappings>();
        }
    }

Is this something that you would consider?

[nul800sebastiaan]

Hi @enkelmedia, I will admit, I read this 3 times and I'm not understanding what you're trying to achieve. 🙈 What is your use case, what is currently impossible that this change would allow you/others to do?

[enkelmedia]

hehe sorry! I'll try to make it more clear =D

There is a feature where one can just drag and drop files to upload them to the media-section, implemented in the "umb-file-dropzone"-directive.

This feature posts the file to /umbraco/backoffice/UmbracoApi/Media/PostAddFile

The request body looks something like this

currentFolder: -1
contentTypeAlias: umbracoAutoSelect
propertyAlias: umbracoFile
file: (binary)

Inside the MediaControllers PostAddFile-method:

Umbraco-CMS/src/Umbraco.Web/Editors/MediaController.cs

Line 617 in 34e80d8

public async Task<HttpResponseMessage> PostAddFile()

The contentTypeAlias "umbracoAutoSelect" means that Umbraco will use "File" as the default media type alias for the uploaded file. If the extension is any of the known image-extensions Umbraco will use "Image" as media type. Otherwise it will use the media type "File" (all which are hardcoded).

Umbraco-CMS/src/Umbraco.Web/Editors/MediaController.cs

Line 707 in 34e80d8

if (Current.Configs.Settings().Content.ImageFileTypes.Contains(ext))

In our case we have created a custom media type for videos, what I'm proposing is a way to map ie a ".mp4"-file to this custom type when it's uploaded.

Is in the MediaController around L707 I'm thinking that we could add a collection of "mappings" between file extensions and media types.

So that the code would look both in the known image types and in this collection of configured mappings, so when a editor drags in a .mp4 file it would be created as a "video" and not as a "file". I just proposed a collection builder to be able to append/change the mappings.

So I'm thinking that we could:

• Create a class and interface that represents the map, ie

public class VideoMediaMap : IMediaMap {
   public string[] Extensions => new string[]{"mp4","mov"};
   public string ContentTypeAlias => "video";
}

• Create a collection builder (like in the example in the first post)
• Use this collection in the MediaController to map a uploaded file to a media type.
• We could also move the current hardcoded logic for images in to a implementation of this IMediaMap-interface.

Hope this makes it more clear =D

[Matthew-Wise]

It would also be great if this took into account restrictions on the parent folder. There are cases where you need multiple "pdf" definitions due to different CMS data linked to a file.

[Zeegaan]

Sounds like a great feature request, moving this to discussions 👍

[hfloyd]

I think being able to map extensions to MediaTypes for the drag-n-drop is a GREAT idea. +💯

It would also give us an easy way to customize the types which are considered "Image" (rather than relying on the hard-coded Configuration)

Umbraco-CMS/src/Umbraco.Core/Configuration/Models/ContentImagingSettings.cs

Line 31 in 5457521

public string[] ImageFileTypes { get; set; } = StaticImageFileTypes.Split(',');

Umbraco-CMS/src/Umbraco.Core/Configuration/Models/ContentImagingSettings.cs

Line 13 in 5457521

internal const string StaticImageFileTypes = "jpeg,jpg,gif,bmp,png,tiff,tif,webp";

[iOvergaard]

Hi @hfloyd

Is there a case in particular you would like to cover, that isn't already covered by setting the extension on the upload field?

Set the file extensions:

Drag and drop:

2025-02-13.at.9.46.53.-.Indigo.Wasp.mp4

[hfloyd]

Hi @iOvergaard - I actually came upon this discussion while working on an upgrade project for a client. Reviewing their Media section (which has been growing since v7, I admit) I came across some media which were added as Files, whereas they should be Images. I know that new file formats sometimes arise, and I think the few "webp" images in the Media section were likely added prior to that being widely recognized - and thus they were not recognized as Images.

I was curious to know which extensions would be considered images, (specifically for the drag-n-drop - which I know is a popular way to add files quickly to the Media section) and whether that was configurable for handling new formats as they arise (or perhaps more obscure formats), additionally, it's possible that a developer would want to encourage the use of certain formats for on-site images (or discourage other formats), and thus it isn't crazy to think this should be somehow configurable, rather than hard-coded in source.

For my purposes, even a simple AppSettings config option would be fine.

As your video demonstrates, the "Upload" property type allows defining the extensions accepted, but this is not the case with the "Image Cropper" type.