Computer Magic Logo
Media Picker

Wednesday, October 26, 2016

Published by Aristotelis Pitaridis

The Media Picker allows the administrator to upload and select a file. Below we can see an example of creating a Media Picker property: 

The My Media Picker property has the following appearance when we edit the document:

In order to upload a file or choose an already uploaded file we should click within the dotted square. On the screen a file selection panel will appear on the screen. 

A good practice is to organize files into folders so that we will be able to find easier a file later. To create a folder you have to click the icon with a plus icon which is located next to the name of the home folder with the name Media. The icon will be replaced by a textbox where we have to type the name of the folder we want to create. 

We press the Enter key to complete the creation of the folder. The system will create the folder and the new folder will be opened and we will be able to select a file or upload new files. 

To upload a file we have to click the Upload button. The Open dialog box will appear on the screen and we can select one or more files from our computer that we want to upload on our site. Once we have selected all files we want we press the Open button and the Umbraco will begin uploading the selected files.

When all the files have been uploaded we will see thumbnails of the files that we uploaded.

To choose one of the files that we upload we have to click on the file. The file selection panel will disappear and our property contains a thumbnail of the file we selected.

The property has saved an integer which defines which Umbraco media contains the selected file. In order to read the value as a strongly typed object we use the following code:

@{
    if (Model.Content.HasValue("myMediaPicker"))
    {
        var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("myMediaPicker"));
        <img src="@mediaItem.GetPropertyValue("umbracoFile")" alt="@mediaItem.GetPropertyValue("Name")" width="@mediaItem.GetPropertyValue("umbracoWidth")" height="@mediaItem.GetPropertyValue("umbracoHeight")" />
    }
}

In order to read the value using dynamic properties we use the following code:

@{
    if (CurrentPage.HasValue("myMediaPicker"))
    {
        var dynamicMediaItem = Umbraco.Media(CurrentPage.myMediaPicker);
        <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" width="@dynamicMediaItem.umbracoWidth" height="@dynamicMediaItem.umbracoHeight" />
    }
}