// Register for drag-n-drop only if supported by the browser.
if( window.FileReader ) {
    
    // Connect to Sample Vault using M-Files Client.
    var mfilesClient = new ActiveXObject( "MFilesAPI.MFilesClientApplication" );
    var vault = mfilesClient.BindToVault( "Sample Vault", 0, true, false );    
    
    // Add event handler which registers for listening the drag-n-drop events after the window has loaded.
    addEventHandler( window, "load", function() {
    
        // Get the drop target.
        var dropTarget = document.getElementById( "drop" );        
        
        // Tells the browser that we *can* drop on this target
        addEventHandler( dropTarget, "dragover", cancel );
        addEventHandler( dropTarget, "dragenter", cancel );        

        // Register handler for the actual drop event.
        addEventHandler( dropTarget, "drop", function( evt ) {
            
            // Get the window.event if the argument missing (in IE).
            evt = evt || window.event; 
            
            // Prevent the browser from invoking the default action such as opening the file.
            cancel( evt );
            
            // Accept only one file.
            var dt = evt.dataTransfer;
            var inputFiles = dt.files;
            if( inputFiles.length != 1 ) {
                alert( "Only individual files are accepted." );
                return false;
            }

            // Prepare properties for the new document.
            var properties = new ActiveXObject( "MFilesAPI.PropertyValues" );
            var classProperty = new ActiveXObject( "MFilesAPI.PropertyValue" );
            classProperty.PropertyDef = 100;
            classProperty.TypedValue.SetValue( 9, 0 );
            properties.Add( -1, classProperty );
            
            // Create a new empty single-file document.
            var inputFile = inputFiles[ 0 ];
            var defaultAcl = new ActiveXObject( "MFilesAPI.AccessControlList" );
            var title = getTitle( inputFile );
            var extension = getExtension( inputFile );
            var targetObject = vault.ObjectOperations.CreateNewEmptySingleFileDocument( properties, title, extension, defaultAcl );
            
            // Read the file from the drag-n-drop source.
            var reader = new FileReader();
            reader.readAsDataURL( inputFile );
            addEventHandler( reader, "loadend", function( evt, loadedFile ) {
                            
                // Upload the file received via drag-n-drop to the created document.
                var targetFile = targetObject.VersionData.Files.Item( 1 );
                vault.ObjectFileOperations.UploadFromDataURI( targetObject.ObjVer, targetFile.ID, targetFile.Version, this.result );
                
                // Check in the document.
                vault.ObjectOperations.CheckIn( targetObject.ObjVer );
                alert( "Upload complete." );
            } );            
            return false;
        } );
    } );
} else { 
    alert( "Your browser does not support the HTML5 FileReader." );
}

/**
* Adds specified event handler to the element.
*/
function addEventHandler( element, evt, handler ) {
    if( element.addEventListener) {
        // W3C method
        element.addEventListener( evt, handler, false );
    } else if( element.attachEvent) {
        // Old IE method.
        element.attachEvent( "on"+evt, handler );
    } else {
        // Legacy method.
        element["on"+evt] = handler;
    }
}

/**
* Extracts the title from the given file.
*/
function getTitle( file ) {    
    var fileName = file.name;
    var title = fileName.slice( 0, fileName.lastIndexOf( "." ) );
    return title;
}

/**
* Extracts the file extension from the given file.
*/
function getExtension( file ) {
    var fileName = file.name;
    var extension = fileName.slice( fileName.lastIndexOf( "." ) + 1, fileName.length );
    return extension;
}

/**
* Function for canceling the default operation for an event.
*/
function cancel( evt ) {
    if( evt.preventDefault ) { evt.preventDefault(); }
    return false;
}