M-Files API 22.6.11519.0
UploadFromDataURI Method
VaultObjectFileOperations Object : UploadFromDataURI Method
The object version.
The file ID.
The file version.
Data URI from which the file content is uploaded.
Uploads new content for the specified document file from the specified data URI.
Visual Basic
Public Sub UploadFromDataURI( _
   ByVal ObjVer As ObjVer, _
   ByVal File As Long, _
   ByVal FileVersion As Long, _
   ByVal DataURI As String _
The object version.
The file ID.
The file version.
Data URI from which the file content is uploaded.

The data URI scheme is a URI scheme that encodes content within the URI itself. This is especially useful within the M-Files UI Extensibility Framework. In this context, the data URIs allow content received via HTML5 drag and drop to be uploaded to the vault.

Only base64-encoded data URIs are supported and MIME-type is not optional. Uploading files larger than 64MB is not supported because the whole data is be kept in the memory of the calling process.

For more information, search MSDN for "data uri".

This example is directly applicable in Internet Explorer browsers only. The sample vault needs to have the name Sample Vault in M-Files Client Settings. The Javascript file needs to be named upload.js.
// 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;
<!DOCTYPE html>
    <script type="text/javascript" src="upload.js"></script>
        #drop {
          height: 250px;
          width: 250px;
          border: 1px solid blue;
          margin: 10px;
          padding: 10px;
    <h1 align=center>File Upload Demo</h1>    
    <div id="drop">
      Drop files here to upload them to the vault.
See Also

VaultObjectFileOperations Object  | VaultObjectFileOperations Members