Dropping media files onto dizmoViewer

You can drag and drop media into dizmoViewer: An image is then copied to an internal cache. If the content type has been associated with a dizmo, then a corresponding dizmo is instantiated.

React to files being dropped to the front of the dizmo:

document.getElementById('front').addEventListener('drop',   function(e) {
    e.preventDefault();
    var files = e.dataTransfer.files;
    // process all File objects
    for (var i = 0; i < files.length; i++) {
        file = files[i];
        // make sure that your internal property name is unique
        path = 'images/img'+i;
        // the file is saved to the private storage
        dizmo.privateStorage.setProperty(path, file, {file:true, timeout:1000});
        // get the internal path to the private storage
        // which can be used to display the file inside the dizmo
        src = dizmo.privateStorage.getProperty(path);
    }
});

We also support the file input type which displays the familiar “Browse” button. You can attach a change event handler to the field in index.html:

<input id="file_selector" type="file">

Then add the following code to your JavaScript file:

document.getElementById("file_selector").addEventListener("change",     function(e) {
    e.preventDefault();
    var files = e.target.files;
    // process all File objects
    for (var i = 0 ; i < files.length; i++) {
       file = files[i];
        // make sure that your internal property name is unique
        path = 'images/img'+i;
        // the file is saved to the private storage
        dizmo.privateStorage.setProperty(path, file, {file:true, timeout:1000});
        // get the internal path to the private storage
        // which can be used to display the file inside the dizmo
        src = dizmo.privateStorage.getProperty(path);
    }
});

Once the image has been copied to the cache and the dizmo has been instantiated, it is possible to access it using for example the following code:

var names = dizmo.privateStorage.getProperty('images', {nodes:true});
for (var i = 0; i < names.length; i++) {
    var src = dizmo.privateStorage.getProperty('images/' + names[i]);
    jQuery('#front').append('img', {src: src});
}

The names variable contains a list of images names such as:

["img1", "img2", "img3"]

The corresponding property of each image is stored in the src variable which has a special URL, for example:

https://localhost:42613/storage/he73e4b17c9d75801912eb4bc28259e80/faba31b6e4434390a6485b787b9fd507.png

Dizmo will load the corresponding image when the src of the img element points to this URL.

This also works with a video file: The video will be copied to a cache and a video dizmo instantiated. The corresponding property of such a video is also stored in src with its URL:

http://localhost:42612/storage/h33d6245103e144eb78d42a2cc29f5515/02a5c014d15d4e7362cfcb0f842105ce.mp4