Dropping media files onto dizmoViewer

You can drag and drop any media file into dizmoViewer. The file is then copied to an internal cache. A dizmo that is compatible with the file-type is instantiated if the file-type is associated with an installed dizmo.

The following example illustrates how to capture, store, and load files that are dropped onto a dizmo. This example assumes that you have an <img> element in your document and that 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, as 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 loads the corresponding image when the src attribute of the img element points to this URL.

The example also works with video files. The video is 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