umbraco media picker not working with video

Tuan Nguyen 26 posts 166 karma points

Nov 23, 2016 @ 03:34

Hi Team,

I'm a newbie, i have an issue with Media Picker as below When using Umbraco version 7.2.8, i can upload a mp4 video use Media Picker. I don't know the reason why i can't upload a mp4 video use Media Picker on latest version as 7.5.4?

Thanks Tuan Nguyen.

Copy Link

John C Scott 473 posts 1183 karma points

Nov 23, 2016 @ 10:35

Hi Tuan

Is it possible you have "Pick Only Images" ticked in the Developer Settings for the "Media Picker" Data Type ? I had a similar issue to this recently and that was the cause.

You can see this in the Developer Section, under Data Types and then Media Picker. It should look like this:

Media Picker - Data Type Settings

What I did was create a new Data Type with Property Editor "Media Picker" that had this option unticked, and gave it a new name, and then used this in document types where I wanted to allow items other than images to be picked. But you can also just untick it here, and then everything can be picked from the media library anywhere this media picker is used.

Copy Link

Tuan Nguyen 26 posts 166 karma points

Nov 23, 2016 @ 11:47

Hi John,

Thanks for your suggest, but my issue occur when i use a Media Picker in Property editor alias Umbraco.TinyMCEv3, it look like enter image description here

And this is my issue enter image description here

Thanks Tuan Nguyen

Copy Link

Tuan Nguyen 26 posts 166 karma points

Nov 28, 2016 @ 06:21

Hi John,

I have just fixed this issue, We will go to umbraco.services.js file in .\Umbraco\Js\ folder and modify codes as below

createMediaPicker: function (editor) { editor.addButton('umbmediapicker', { icon: 'custom icon-picture', tooltip: 'Media Picker 123', onclick: function () { alert("DS"); var selectedElm = editor.selection.getNode(), currentTarget;

                if(selectedElm.nodeName === 'IMG'){
                    var img = $(selectedElm);
                    currentTarget = {
                        altText: img.attr("alt"),
                        url: img.attr("src"),
                        id: img.attr("rel")
                    };
                }

                userService.getCurrentUser().then(function(userData) {
                    dialogService.mediaPicker({
                        currentTarget: currentTarget,
                        onlyImages: false,
                        showDetails: true,
                        startNodeId: userData.startMediaId,
                        callback: function (img) {
                            if (!img)
                                return;

                            // Image case
                            if (img.properties != null && img.properties[4] != undefined && img.properties[4].value != null && Umbraco.Sys.ServerVariables["umbracoSettings"]["imageFileTypes"].indexOf(img.properties[4].value) >= 0) {
                                var data = {
                                    alt: img.altText || "",
                                    src: (img.url) ? img.url : "nothing.jpg",
                                    rel: img.id,
                                    id: '__mcenew'
                                };

                                editor.insertContent(editor.dom.createHTML('img', data));

                                $timeout(function () {
                                    var imgElm = editor.dom.get('__mcenew');
                                    var size = editor.dom.getSize(imgElm);

                                    if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
                                        var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);

                                        var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
                                        editor.dom.setAttrib(imgElm, 'style', s);
                                        editor.dom.setAttrib(imgElm, 'id', null);

                                        if (img.url) {
                                            var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
                                            editor.dom.setAttrib(imgElm, 'data-mce-src', src);
                                        }
                                    }
                                }, 500);

                            // Video case

                            } else {

                                var videoTag = "<video id='_mce' controls> <source src=" + img.url + " type='video/" + img.properties[1].value + "'>" + img.altText + "</video>";

                                editor.insertContent(videoTag);
                                $timeout(function () {
                                    var imgElm = editor.dom.get('__mcenew');
                                    var size = editor.dom.getSize(imgElm);

                                    if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
                                        var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);

                                        var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
                                        editor.dom.setAttrib(imgElm, 'style', s);
                                        editor.dom.setAttrib(imgElm, 'id', null);

                                        if (img.url) {
                                            var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
                                            editor.dom.setAttrib(imgElm, 'data-mce-src', src);
                                        }
                                    }
                                }, 500);
                            }
                        }
                    });
                });


            }
        });
    },

Thanks Tuan Nguyen

Copy Link

carl 12 posts 81 karma points

Sep 22, 2020 @ 15:45

Hey Tuan, I've tried using the same code you have above but it's not working for me. When I click on file within the Umbraco folder that I want to upload nothing happens. I'm using Umbraco version 7.15.3.

Copy Link

is working on a reply...

Flag this post as spam?

Umbraco Media Picker not working with video