Umbraco-cms: MediaPicker treats file as folder

[roeermose]

It is not possible to select the media in the mediapicker when using belowconfiguration.
The media is treated as a folder eventhough it is a file.

Specifics

Version 7.15.3
Chrome 76.0.3809.132
Checked in Firefox 67.0.4

Have been tested on a clean 7.15.3 by support with same results.

Steps to reproduce

Create a doc-type, create property with MediaPicker editor, set "Pick multiple items" = true, "Pick only images" = false, "Disable folder select" = true
Create a media where you do not upload a file.
Create a node using the new doc-type and try to select the media.

Expected result

I expected to be able to select the media.

Actual result

The media was not selectable, and when you tried to select it, then you would be presented with an empty folder.

---

_This item has been added to our backlog AB#7087_

[nul800sebastiaan]

Hey @roeermose - apart from the selected file not really having a file extension, this all works for me, not sure what I'm doing differently?

[roeermose]

Hey @nul800sebastiaan - have you set the specfic configuration for the MediaPicker (default works fine, but the specific configuration does not)

[nul800sebastiaan]

Aha! Yeah, I did misread the configuration necessary, after updating it, I can't pick the empty item either.

We'll have a look!

[stevemegson]

In 7.15, the media picker's definition of "is a folder" is effectively just "has no umbracoFile value". The current test can't tell the difference between an item which has no umbracoFile property and one where the umbracoFile property has no file selected. Both will behave as folders.

I'd need to check, but my PR #6195 to support thumbnails from other properties may also handle having no file selected. I think it will make mediaPath null when there's no property and an empty string when the property has no selected file.

There may also be a javascript tweak needed make sure that an empty string as mediaPath is enough to make the item "not a folder".

[andersbrohall]

Is this related?
#7317
:)

[banarualexandru]

Prerequisites: I'm using BlobStorage from Azure for storing the media files.

My findings regarding this issue.
Problem 1
After update from 7.12 to 7.15.3 The cmsMedia table is missing all the files. Just some were migrated after the normal migration.
Solution

• Removed all data from cmsMedia table

DELETE FROM cmsMedia

• Used part of this script, from Issue-5848, adapted to fill the mediaPath column as well. Final script:

DECLARE @i int
DECLARE @nodeId int
DECLARE @numrows int
DECLARE @versionId varchar(50)
DECLARE @mediaPath varchar(1000)
DECLARE @rootNodes TABLE (
    idx smallint Primary Key IDENTITY(1,1)
    , NodeId int
)

declare @mediaPaths Table(
    ids int Primary Key Identity(1,1)
    ,mediaPath nvarchar(1000)
    ,nodeId int
)

INSERT @mediaPaths 
SELECT cmsPropertyData.dataNvarchar as mediaPath, umbracoNode.id as nodeId
                            FROM cmsPropertyData
                            INNER JOIN cmsPropertyType ON cmsPropertyType.id = cmsPropertyData.propertytypeid
                            INNER JOIN umbracoNode ON umbracoNode.id = cmsPropertyData.contentNodeId
                            WHERE cmsPropertyType.Alias = ('umbracoFile')
                                AND umbracoNode.id IN (SELECT umbracoNode.id
                                    FROM umbracoNode 
                                    INNER JOIN cmsContent ON cmsContent.nodeId = umbracoNode.id
                                    INNER JOIN cmsContentType ON cmsContentType.nodeId = cmsContent.contentType
                                    INNER JOIN cmsPropertyType ON cmsPropertyType.contentTypeId = cmsContentType.nodeId
                                    WHERE cmsPropertyType.Alias = ('umbracoFile') AND umbracoNode.nodeObjectType = ('B796F64C-1F99-4FFB-B886-4BF4BC011A9C'))
                                AND (cmsPropertyData.dataNvarchar IS NOT NULL OR cmsPropertyData.dataNtext IS NOT NULL) 

INSERT @rootNodes
SELECT id FROM umbracoNode WHERE nodeObjectType = 'B796F64C-1F99-4FFB-B886-4BF4BC011A9C' AND id NOT IN (SELECT nodeId FROM cmsMedia)

SET @i = 1
SET @numrows = (SELECT COUNT(*) FROM @rootNodes)
IF @numrows > 0
    WHILE (@i <= (SELECT MAX(idx) FROM @rootNodes))
    BEGIN

        SET @nodeId = (SELECT NodeId FROM @rootNodes WHERE idx = @i)
        SET @mediaPath = (SELECT mediaPath FROM @mediaPaths WHERE nodeId = @nodeId)
        --Do something with Id here
        SET @versionId = (SELECT TOP 1 VersionId FROM cmsContentVersion WHERE ContentId = @nodeId ORDER BY VersionDate DESC)
        PRINT(@versionId)
        PRINT(@nodeId)
        INSERT INTO cmsMedia(nodeId, versionId, mediaPath) VALUES(@nodeId, @versionId, @mediaPath)

        SET @i = @i + 1
    END

When this PR made by Stevemegson will be merged, this will be done automatically by Umbraco migrator.
@nul800sebastiaan are there any reasons why this PR wasn't merged to v7/dev branch?
This workaround fixes the existing media files, but the thumbnail is still not shown, as is analyzed issue-5847
Problem 2
When uploading a new image in Media / Media picker it saves NULL on mediaPath column of cmsMedia.
I didn't find a solution for this.
@nul800sebastiaan , @stevemegson Any Ideas of some workarounds for this?
I was thinking to listen to MediaService.Saved event and save 'manually' that Azure URL to cmsMedia table.
EDIT
Solution
I found the solution for this:
on public void OnApplicationStarted( UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
I've added an event listener:
MediaService.Saved += new FixMediaFiles(applicationContext).OnMediaFilesSaved;
Inside FixMediaFiles I've done this:

 public class FixMediaFiles
    {
        private readonly ApplicationContext _applicationContext;

        public FixMediaFiles(ApplicationContext applicationContext)
        {
            _applicationContext = applicationContext;
        }

        public void OnMediaFilesSaved(IMediaService sender, Umbraco.Core.Events.SaveEventArgs<IMedia> e)
        {
            foreach (var eSavedEntity in e.SavedEntities)
            {
                UpdateMedia(eSavedEntity);
            }
        }

        private void UpdateMedia(IMedia eSavedEntity)
        {
            const int umbracoFilePropertyTypeId = 6;
            var query =
                "SELECT dataNvarchar FROM cmsPropertyData where propertytypeid=@propertyType AND contentNodeId=@nodeId";
            var args = new
            {
                propertyType = umbracoFilePropertyTypeId,
                nodeId = eSavedEntity.Id
            };
            var cmsPropertyData = _applicationContext.DatabaseContext.Database.Query<CmsPropertyData>(query, args)
                .FirstOrDefault();
            if (cmsPropertyData == null)
            {
                return;
            }

            var updateQuery = "SET [mediaPath]=@mediaPath WHERE nodeId=@nodeId";
            _applicationContext.DatabaseContext.Database.Update<CmsMedia>(updateQuery,
                new {mediaPath = cmsPropertyData.dataNvarchar, nodeId = eSavedEntity.Id});
        }

        [TableName("cmsMedia")]
        class CmsMedia
        {
            public int nodeId { get; set; }
            public Guid versionId { get; set; }
            public string mediaPath { get; set; }
        }
        class CmsPropertyData
        {
            public string dataNvarchar { get; set; }
        }
    }

It's dirty I don't like it, but at least it works.

Problem 3
The thumbnails are not shown on the media edit image page.
Solution
In umbraco.controllers.js

 _.each($scope.persistedFiles, function (file) {
                var thumbnailUrl = umbRequestHelper.getApiUrl('imagesApiBaseUrl', 'GetBigThumbnail', [{ originalImagePath: file.file }]);
                var extension = file.file.substring(file.file.lastIndexOf('.') + 1, file.file.length);
                file.thumbnail = file.file;
                file.extension = extension.toLowerCase();
            });

Set the thumbnail blob url directly.

Problem 4
The thumbnails are not shown in 'Select Media' dialog.
Solution

 * @param {string} imagePath Image path, ex: /media/1234/my-image.jpg
         */
            getThumbnailFromPath: function (imagePath) {
                //If the path is not an image we cannot get a thumb

                if (!this.detectIfImageByExtension(imagePath)) {
                    return null;
                }
                // HOTFIX 7.15.3 for not showing the thumbnail
                return imagePath;
                //get the proxy url for big thumbnails (this ensures one is always generated)
                var thumbnailUrl = umbRequestHelper.getApiUrl('imagesApiBaseUrl', 'GetBigThumbnail', [{ originalImagePath: imagePath }]);
                //var ext = imagePath.substr(imagePath.lastIndexOf('.'));
                //return imagePath.substr(0, imagePath.lastIndexOf('.')) + "_big-thumb" + ".jpg";
                return thumbnailUrl;
            },
            /**
         * @ngdoc function
         * @name umbraco.services.mediaHelper#detectIfImageByExtension

I've returned the blob URL directly.

I hope this will help somebody until the team will release a new version with all the right fixes.

Thanks

[mjbarlow]

I'm going to crosslink this issue with Courier https://github.com/umbraco/Umbraco.Courier.Issues/issues/14 as it is the same problem when couriering images.

"The media was not selectable, and when you tried to select it, then you would be presented with an empty folder."

[wakeup2k5]

I noticed this issue (thumbnails not showing, unable to pick media) after upgrading from 7.14.0 to 7.15.4.

For us, I was able to narrow it down to an alternate media folder being configured.

I replicated the issue using a stock Umbraco 7.15.4 install (Visual Studio, NuGet install, Default Starter Kit). Everything worked fine by default. I was able to upload imagery, select it using a Media picker, etc.

Then I created a '/testmedia/' folder and modified the FileSystemProviders.config, as follows...

<Provider alias="media" type="Umbraco.Core.IO.PhysicalFileSystem, Umbraco.Core">
    <Parameters>
      <add key="virtualRoot" value="~/testmedia/" />
    </Parameters>
</Provider>

Immediately after this, I was still able to upload imagery, but I was not able to select it. It seemed to treat the newly uploaded imagery as a folder.

Would a fix for this (accounting for FileSystemProviders.config changes) be within scope of this existing issue, or should I create a new issue?

[stewartellis]

When is 7.15.5 coming? Would really like a fix from HQ instead of rolling our own. Thanks

[deMD]

I noticed this issue (thumbnails not showing, unable to pick media) after upgrading from 7.14.0 to 7.15.4.

For us, I was able to narrow it down to an alternate media folder being configured.

I replicated the issue using a stock Umbraco 7.15.4 install (Visual Studio, NuGet install, Default Starter Kit). Everything worked fine by default. I was able to upload imagery, select it using a Media picker, etc.

Then I created a '/testmedia/' folder and modified the FileSystemProviders.config, as follows...

<Provider alias="media" type="Umbraco.Core.IO.PhysicalFileSystem, Umbraco.Core">
    <Parameters>
      <add key="virtualRoot" value="~/testmedia/" />
    </Parameters>
</Provider>

Immediately after this, I was still able to upload imagery, but I was not able to select it. It seemed to treat the newly uploaded imagery as a folder.

Would a fix for this (accounting for FileSystemProviders.config changes) be within scope of this existing issue, or should I create a new issue?

This issue also seems to be present in Umbraco 8.5.5

[hfloyd]

I'm disappointed to see that this fix didn't make it into 7.15.5 as originally planned....

[stewartellis]

HQ - a hotfix or quick turn around would be most welcome. This is a major issue.
Thank you

[RLuhse]

This particular issue is affecting a large number of people, so a quick fix would be very much appreciated. It looks as though it was first reported almost a year ago...

[ItagMichael]

Any confirmed hotfix for timeframe for 7.15.6 with this fix? This is affecting us significantly.

[jattwood]

I was waiting and waiting for this fix in 7.15.5, really wish it was a hot fix. This is impacting multiple clients and I don't have answers for them. Please make this a priority with thanks!

[GingerSquirrel]

If anyone is struggling with this error I put in a temporary fix of adding a file upload property to to my media item and giving it the alias 'umbracoFile' and making it required. The user just has to upload an empty bugfix.txt file to make it work.

It is definitely not a pretty fix but it is better than me hard-coding media into the site. You will also have to re-save all your current media for it to be effective on them.

[vipervf1]

Yes, we are still waiting on this bug fix as well.

[stewartellis]

A polite reminder to HQ - this bug affects a paid product - namely courier. A timely fix seems like it should be a done deal.

Thanks

[jrguay]

Hello!

I know @Shazwazza worked on this and mentioned needing further discussion. Is there an ETA for releasing?

Thank you!

[nul800sebastiaan]

Just as a note, we're working on it in this sprint (ending the 28th). To set expectations: I am not sure when exactly we can do a release but it should hopefully be quite soon after the fix is made.

[Shazwazza]

Ready for review https://github.com/umbraco/Umbraco-CMS/pull/8520

The build output with artifacts will be here (once successfully built) https://dev.azure.com/umbraco/Umbraco%20Cms/_build/results?buildId=46124&view=results , we'll need people to test this out before it can be shipped so please let us know on the PR https://github.com/umbraco/Umbraco-CMS/pull/8520 what your results are. Thanks!

[hfloyd]

@Shazwazza - It wasn't exactly clear on that page where to get a copy of the updated files for testing. The "Artifacts" option only shows 8.7 items.

[nul800sebastiaan]

@hfloyd Are you sure? Clicking on the files gives me

Specifically the link would be:
https://dev.azure.com/umbraco/Umbraco%20Cms/_build/results?buildId=46124&view=artifacts&type=publishedArtifacts

[hfloyd]

huh. Your direct link works. The original page I was looking at shows:

and it wasn't clear where to click for the downloads.

Thanks

[nul800sebastiaan]

Ah yeah, they changed it recently from "artifacts" (which is a word that has a meaning) to an icon of a box saying "4 published" 🤷

[nul800sebastiaan]

Aha I never even saw the artifacts on the left hand side either haha! I understand the confusion.

They get bundled here now

[hfloyd]

@nul800sebastiaan I wasn't able to get to this before, and now the Build seems to have disappeared. Can you direct me to the build and I will do a community review this week? Thanks!