Implement a file chooser

This code case describes how to manually implement a file and image chooser.

For an explanation on how to choose files in the DAM UI please see the Selecting files in chooser mode guide.

To implement a file chooser, we need to open DAM in a new window and listen from messages sent back. Use the following example and replace [URLTODAM] with the url of DAM and [URLTODEFAULTIMAGE] with the url to a default image that is used if no image is chosen in the DAM.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
$(document).ready(function(){
    //Note that this function is called from the DAM window
    window.receiveMessageV6 = function(event){
        //Close DAM
        window.currentMediaBank.close();
        //parse the data
        var data = $.parseJSON(event.data);
        //set the values
        var fileIdField = window.currentfileChooser.find("input.fileChooserFileId");
        if (fileIdField) {
            fileIdField.val(data.key.fileId);
        }
        var fileNameField = window.currentfileChooser.find("input.fileChooserFileName");
        if (fileNameField) {
            fileNameField.val(data.metadata.fileName);
        }
        var croppingIdField = window.currentfileChooser.find("input.fileChooserCroppingId");
        if (croppingIdField) {
            croppingIdField.val(data.key.croppingId);
        }
        var croppingNameField = window.currentfileChooser.find("input.fileChooserCroppingName");
        if (croppingNameField) {
            croppingNameField.val(data.metadata.croppingName);
        }

        var fullNameField = window.currentfileChooser.find(".fileChooserFullName");
        if (fullNameField) {
            if (data.metadata.fileName) {
                var fullname = data.metadata.fileName;

                if (data.metadata.croppingName) {
                    fullname += " (" + data.metadata.croppingName +")";
                }

                fullNameField.html(fullname);
            }
    }
        var fileChooserThumbnail = window.currentfileChooser.find("img.fileChooserThumbnail");
        if (fileChooserThumbnail) {
            fileChooserThumbnail.attr("src", data.metadata.thumbnailUrl);
        }
    }
    $(".fileChooser6 .choosefile").click(function () {
        window.currentfileChooser = $(this).closest(".fileChooser6");
        if (window.addEventListener) {
            addEventListener("message", window.receiveMessageV6, false);
        } else {
            attachEvent("onmessage", window.receiveMessageV6);
        }
        window.currentMediaBank = window.open([URLTODAM]);
    });
    $(".fileChooser6 .removefile").click(function () {
        window.currentfileChooser = $(this).closest(".fileChooser6");

        var fileIdField = window.currentfileChooser.find("input.fileChooserFileId");
        if (fileIdField) {
            fileIdField.val(null);
        }
        var fileNameField = window.currentfileChooser.find("input.fileChooserFileName");
        if (fileNameField) {
            fileNameField.val(null);
        }
        var croppingIdField = window.currentfileChooser.find("input.fileChooserCroppingId");
        if (croppingIdField) {
            croppingIdField.val(null);
        }
        var croppingNameField = window.currentfileChooser.find("input.fileChooserCroppingName");
        if (croppingNameField) {
            croppingNameField.val(null);
        }
        var fullNameField = window.currentfileChooser.find(".fileChooserFullName");
        if (fullNameField) {
            fullNameField.html("No file selected");
        }

        var fileChooserThumbnail = window.currentfileChooser.find("img.fileChooserThumbnail");
        if (fileChooserThumbnail) {
            fileChooserThumbnail.attr("src", "[URLTODEFAULTIMAGE]");
        }
    });
});

When a file chooser is needed use the following html. Replace [URLTODEFAULTIMAGE] with the url to a default image that is used if no image is chosen in DAM.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="fileChooser6" style="margin-bottom: 20px;">
    <input class="fileChooserFileId" id="ImageV6_FileId" name="ImageV6.FileId" type="hidden" value="">
    <input class="fileChooserCroppingId" id="ImageV6_CroppingId" name="ImageV6.CroppingId" type="hidden" value="">
    <input class="fileChooserFileName" id="ImageV6_FileName" name="ImageV6.FileName" type="hidden" value="">
    <input class="fileChooserCroppingName" id="ImageV6_CroppingName" name="ImageV6.CroppingName" type="hidden" value="">

    <div class="thumbnail" style="padding: 15px; text-align: center;">
        <img src="[URLTODEFAULTIMAGE]" style="text-align: center; width: 100%;  display: inline-block" class="fileChooserThumbnail">
    </div>
    <div style="margin-top: 10px;">
        <button type="button" class="btn btn choosefile">Choose image</button>
        <button type="button" class="btn btn btn-danger pull-right removefile">Remove</button>
    </div>
</div>

If needed, it's possible to restrict which filetypes can be selected when in chooser mode.