Computer Magic Logo
Multiple Media Picker

Wednesday, October 26, 2016

Published by Aristotelis Pitaridis

The Multiple Media Picker allows the administrator to upload and select multiple files. 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 files or choose already uploaded files 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 files or upload new files. 

To upload files 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 the files we have to click on each of the files that we want to select. Over each selected file a gray mark will appear and in the Select button will appear with a number in brackets which indicates how many files we have selected.

In order to store the selected files in the property we have to click the Select button. The panel for selecting files will disappear and next to the property will appear the thumbnails of the selected files.

The property is saved as a string that contains comma separated numbers that define the selected media of Umbraco. In order to read the value as a strongly typed object we use the following code:

@{
    if (Model.Content.HasValue("myMultipleMediaPicker"))
    {
        foreach (var item in Model.Content.GetPropertyValue<string>("myMultipleMediaPicker").Split(','))
        {
            var mediaItem = Umbraco.TypedMedia(item);
            <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("myMultipleMediaPicker"))
    {
        foreach (var item in CurrentPage.myMultipleMediaPicker.Split(','))
        {
            var dynamicMediaItem = Umbraco.Media(item);
            <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" width="@dynamicMediaItem.umbracoWidth" height="@dynamicMediaItem.umbracoHeight" />
        }
    }
}