Implement a file chooser
This code case describes how to manually implement a file and image chooser.
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.
| $(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.
| <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.