Dropping media files onto dizmoViewer

You can drag and drop any media file into dizmoViewer: The file is then copied to an internal cache. If the file’s type can been associated with an installed dizmo, a dizmo that is compatible with the file-type is instantiated.

The following example illustrates how to capture, store and load files being dropped onto a dizmo. This example assumes that you have an <img> element in your document and the target element has a class of no-dizmo-drag.

var image = document.querySelector('img');
var front = document.querySelector('#front');

front.addEventListener("dragover",function(e){
    e.preventDefault();
});

front.addEventListener("drop",function(e){
    e.preventDefault();
    storeData(e.dataTransfer.files)
});

function storeData(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        // make sure that your internal property name is unique
        var path = 'images/img'+i;
        // the file is saved to the private storage
        dizmo.privateStorage.setProperty(path, file, {file:true, timeout:1000});
        loadData(path);
    }
}
function loadData(path) {
    // get the internal path to the private storage
    // which can be used to display the file inside the dizmo
    setTimeout(function () {
        var fileURL = dizmo.privateStorage.getProperty(path);
        image.src = fileURL;
    }, 1000)
}

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, like in the example above, we can listen to changes and store the data.

var fileSelector = document.querySelector('#file_selector');

fileSelector.addEventListener("change", function(e) {
    e.preventDefault();
    storeData(e.target.files);
});

Once the image has been copied to the storage, it is possible to access it at any time from the storage. The following example shows how all the stored images can be retrieved and loaded to the DOM:

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

The names variable contains a list of images that can be used to retrieve the actual URL from the storage:

["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 attribute 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