Invoking a directory browse for file(s) download - Browse for Folder - Browse for File - input type=file - Upload File Control - using Javascript

Title:       Custom File Upload - .NET Software Development - Javascript and Scripting.FileSystemObject
Author:      Greg Dubinovskiy 
Email:       [email protected]
Environment: Javascript, .NET
Keywords:    Browse for Folder - Browse for File - Upload File Control - using Javascript - using Scripting.FileSystemObject
Level:       Intermediate
Description: Browse for Folder - Browse for File - Upload File Control - using Javascript - using Scripting.FileSystemObject -
		How to access the directory path string (which will be used to download the files) - How to set any available default values for the directory bvrowser -
		Ability to allow a user to browse for a file on the desktop to be written/uploaded to the directory on the server - 
		Programmatically invoke the file browse dialog with JavaScript - Load file into javascript variable - Browse for file html button done with javascript - 
		Reading file contents using javascript - Browse local file with Web Browser - Replacing input type=file with JavaScript - 
		JavaScript based File Manager - Uploading image files with a Javascript - How to browse a Folder in a Web application developed using JavaScript.
		

Section      Miscellaneous
SubSection   General

Siccolo Development Articles - Javascript Application Development - .NET Software Development - Browse for Folder - Browse for File - Upload File Control - using Javascript

1. Using Scripting.FileSystemObject to display Drives, Folders and Files:

In client-side browser script, you can use Scripting.FileSystemObject to "explore" drives, folders and files presented on the client machine.

For example, to get list of drives and display them in a list box:

function show_drives_list()
{
	try
	{
		//list <select> element:
		var list = document.getElementById("selectDriveList");
		//clear list:
		list.options.length=0
		list.options[list.options.length]=new Option("<select drive>", "", false, false);

		var fso = new ActiveXObject("Scripting.FileSystemObject");

		var enumDrives = new Enumerator(fso.Drives);

		for (; !enumDrives.atEnd(); enumDrives.moveNext())
		{
			var driveItem = enumDrives.item();
			var driveLetter = driveItem.DriveLetter;
			//alert (driveItem.DriveLetter);
			list.options[list.options.length]=new Option(driveLetter + ":", driveLetter+ ":", false, false);
		}
	}
	catch (_err)
	{
		alert ("Failed to Populate Drive List:\n" + _err.description );	
	}
}

Once Drives list is populated, then Folders can be shown for a selected drive:

function show_folders( parent_folder_path )
{
	try
	{
		//list  <select> element:
		var list = document.getElementById("selectFolderList");
		//clear list:
		list.options.length=0
		list.options[list.options.length]=new Option("<select folder>", "", false, false);

		var fso = new ActiveXObject("Scripting.FileSystemObject");

		var parentFolder = fso.GetFolder(parent_folder_path);

		var enumFolders = new Enumerator(parentFolder.SubFolders);

		for (; !enumFolders.atEnd(); enumFolders.moveNext())
		{
			var folderItem = enumFolders.item();
			list.options[list.options.length]=new Option(folderItem, folderItem, false, false);
		}
		return true;

	}
	catch (_err)
	{
		alert ("Failed to Populate Folder List:\n" + _err.description );	
		return false;
	}
}

Once Folder is selected, then Files are in corresponding list:

function show_files( parent_folder_path )
{
	try
	{
		//list <select> element:
		var list = document.getElementById("selectFileList");
		//clear list:
		list.options.length=0

		var fso = new ActiveXObject("Scripting.FileSystemObject");

		var parentFolder = fso.GetFolder(parent_folder_path);

		var enumFiles = new Enumerator(parentFolder.files);

		for (; !enumFiles.atEnd(); enumFiles.moveNext())
		{
			var fileItem = enumFiles.item();
			list.options[list.options.length]=new Option(fileItem.name, fileItem, false, false);
		}

		return true;
	}
	catch (_err)
	{
		alert ("Failed to Populate File List:\n" + _err.description );	
		return false;
	}
}

And once File is selected - put it in text box on the page:

function select_file ( file_path)
{
	document.getElementById("textSelectedFile").value = file_path;
}

2. Build Web Service to allow file uploading (ASP.NET/C#):

On you server-side, we will need a web service that would accept file content as byte array and file name:


using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;


[WebService(Namespace = "http://www.siccolo.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
	...
	...
	[WebMethod(Description = "Test File Upload")]
    	public bool DoTestUpload(   string FileName,
                                byte[] FileIn,
                                out string ErrorInfo)
    	{

        	bool ToDebug = UploadSettings.ToDebug();
        	FileUpload fu = new FileUpload();

	        try
        	{
            		if (ToDebug)
            		{
                		fu.SaveToLog("Request from [" +
                                    this.Context.Request.UserHostAddress +
                                    "]"                                    );
            		}

	            	string FilePath = UploadSettings.FilePath();
        	    	if (FilePath == "")
            		{
                		throw (new System.Exception("Settings.File Path is not set"));
	            	}
	
        	    	if (ToDebug) { fu.SaveToLog("FilePath [" + FilePath + "]"); }


		       if (!fu.SaveUploadToFile(FileName, FileIn, out ErrorInfo))
        	    	{
                		return false;
	            	}

	            	ErrorInfo = "";
        	    	return true;
	        }

	        catch (Exception ex)
        	{
	            ErrorInfo = ex.Message;
	            if (ToDebug) { fu.SaveToLog(ex.ToString()); }
        	    return true;
	        }
	}
	...
	...
}

Where SaveUploadToFile() method in FileUpload class:

...
...
public bool SaveUploadToFile(string FileName,
                               byte[] FileIn,
                               out string ErrorInfo)
    {
        try
        {
            string FullFileName = UploadSettings.FilePath();
            FullFileName = Path.Combine(FullFileName, FileName);

            System.IO.FileStream fs = File.OpenWrite(FullFileName);

            this.SaveToLog("SaveUploadToFile().FileIn.Length=" + FileIn.Length.ToString());

            fs.Write(FileIn, 0, FileIn.Length);
            fs.Close();
            
            ErrorInfo = "";
            return true;
        }
        catch (Exception ex_save_file)
        {
            ErrorInfo = ex_save_file.Message;
            this.SaveToLog(ex_save_file.ToString());
            return false;
        }
    }
...
...

3. Call Web Service from Javascript

And to call our just created Web Service from JavaScript: 1) add an element <div id="serviceUploadFile" style="BEHAVIOR:url(webservice.htc)" onresult="on_upload_done();">
2) call web service:

var service_url = "http://www.microsoft.com/service.asmx?WSDL"; 
var serviceDiv = document.getElementById("serviceUploadFile");

function do_file_upload ( file_name, file_bytes)
{
	try
	{
		var errorInfo;
		alert ("Sending:" + file_name + " Size:" + file_bytes.length);
		var result = serviceDiv.Service.callService("DoTestUpload",file_name,file_bytes, errorInfo); 

		alert ("result:" + result + " error:" + errorInfo);
	 	
		return true;
	}
	catch (_err)
	{
		alert ("Failed to upload a File List:\n" + _err.description );	
		return false;
	}
}

And that's it. Click to see JavaScript source code for this article

//var service_url = "http://<your web>/<your web service>?WSDL"; 
//for example http://www.microsoft.com/do_something.asmx?WSDL
var service_url = "http://www.microsoft.com/fileupload/service.asmx?WSDL"; 
var serviceDiv = document.getElementById("serviceUploadFile");

function init ()
{
	
	serviceUploadFile.useService(service_url, "Service");
}

function init_service()
{
	
	serviceDiv.useService(service_url, "Service");
}

function do_file_upload ( file_name, file_bytes)
{
	try
	{
		var errorInfo;
		alert ("Sending:" + file_name + " Size:" + file_bytes.length);
		var result = serviceDiv.Service.callService("DoTestUpload",file_name,file_bytes, errorInfo);

alert ("result:" + result + " error:" + errorInfo);
	 	
		return true;
	}
	catch (_err)
	{
		alert ("Failed to upload a File List:\n" + _err.description );	
		return false;
	}
}

function on_upload_done()
{
	if ( event.result.error )
	{
	 	alert ( "Upload failed:\n" + 
			"Error Code:" + event.result.errorDetail.code + 
			"\n Description:" + event.result.errorDetail.string);
	}
	else
	{
		alert ( "Upload done:" + event.result.value);
	}
}

function read_file ( file_path)
{
	try
	{
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		var ForReading = 1

var fileStream = fso.OpenTextFile(file_path, ForReading, false);
		var byteArray = fileStream.ReadAll();

fileStream.Close();
	 	
		return byteArray;
	}
	catch (_err)
	{
		alert ("Failed to read a File List:\n" + _err.description );	
		return null;
	}
}

function get_file_size ( file_path)
{
	try
	{
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		
		var selectedFile = fso.GetFile(file_path);

return selectedFile.Size;
	}
	catch (_err)
	{
		alert ("Failed to size a File List:\n" + _err.description );	
		return -1;
	}
}

function get_file_name ( file_path)
{
	try
	{
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		
		var selectedFile = fso.GetFile(file_path);

return selectedFile.Name;
	}
	catch (_err)
	{
		alert ("Failed to name a File List:\n" + _err.description );	
		return -1;
	}
}

function send_file()
{
	//init_service();

var file_path = document.getElementById("textSelectedFile").value;
	if ( file_path =="")
	{
		alert ("Select a file!");
		return;
	}

alert ("File size:" + get_file_size ( file_path));
	alert ("File Name:" + get_file_name ( file_path));
	do_file_upload ( get_file_name ( file_path), read_file ( file_path) );
}

</script>

function select_file ( file_path)
{
	document.getElementById("rowFile").style.display="";
	document.getElementById("textSelectedFile").value = file_path;
}

function change_folder( folder_path )
{
	document.getElementById("rowFileList").style.display="none";
	document.getElementById("rowFile").style.display="none";

document.getElementById("selectedFolderPath").innerText = "selected folder [" + folder_path + "]";
	if (  show_files(folder_path) ) 
	{ 
		document.getElementById("rowFileList").style.display="";
		document.getElementById("rowFile").style.display="";
	}

//also - see if there are subfolders under selected folder:
	if ( folder_has_subfolders ( folder_path ) >0 )
	{
		change_drive(  folder_path );
	}

}

function show_files( parent_folder_path )
{
	try
	{
		//list <select> element:
		var list = document.getElementById("selectFileList");
		//clear list:
		list.options.length=0

var fso = new ActiveXObject("Scripting.FileSystemObject");
		var parentFolder = fso.GetFolder(parent_folder_path);

var enumFiles = new Enumerator(parentFolder.files);

for (; !enumFiles.atEnd(); enumFiles.moveNext())
		{
			var fileItem = enumFiles.item();
			list.options[list.options.length]=new Option(fileItem.name, fileItem, false, false);
		}

return true;
	}
	catch (_err)
	{
		alert ("Failed to Populate File List:\n" + _err.description );	
		return false;
	}
}
</SCRIPT>

function change_drive( drive_letter )
{
	//alert ("selected:" + drive_letter);
	document.getElementById("rowFolderList").style.display="none";
	document.getElementById("selectedDriveLetter").innerText = "selected drive [" + drive_letter + "]";
	if (  show_folders(drive_letter) ) 
	{ document.getElementById("rowFolderList").style.display="";}

//also - show files under root:
	document.getElementById("rowFileList").style.display="none";
	document.getElementById("selectedFolderPath").innerText = "selected folder [" + drive_letter + "]";
	if (  show_files( drive_letter ) ) 
	{ document.getElementById("rowFileList").style.display="";}
	
}

function folder_has_subfolders ( folder_path )
{
	try
	{
		
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		var parentFolder = fso.GetFolder( folder_path );
		
		return parentFolder.SubFolders.Count;

}
	catch (_err)
	{
		alert ("Failed to check a folder:\n" + _err.description );	
		return 0;
	}
}

function show_folders( parent_folder_path )
{
	try
	{
		//list <select> element:
		var list = document.getElementById("selectFolderList");
		//clear list:
		list.options.length=0
		list.options[list.options.length]=new Option("<select folder>", "", false, false);

var fso = new ActiveXObject("Scripting.FileSystemObject");
		var parentFolder = fso.GetFolder(parent_folder_path);

var enumFolders = new Enumerator(parentFolder.SubFolders);

for (; !enumFolders.atEnd(); enumFolders.moveNext())
		{
			var folderItem = enumFolders.item();
			list.options[list.options.length]=new Option(folderItem, folderItem, false, false);
		}
		return true;

}
	catch (_err)
	{
		alert ("Failed to Populate Folder List:\n" + _err.description );	
		return false;
	}
}
</SCRIPT>

var fso = new ActiveXObject("Scripting.FileSystemObject");

var enumDrives = new Enumerator(fso.Drives);

for (; !enumDrives.atEnd(); enumDrives.moveNext())
		{
			var driveItem = enumDrives.item();
			var driveLetter = driveItem.DriveLetter;
			//alert (driveItem.DriveLetter);
			list.options[list.options.length]=new Option(driveLetter + ":", driveLetter+ ":", false, false);
		}
	}
	catch (_err)
	{
		alert ("Failed to Populate Drive List:\n" + _err.description );	
	}
}
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
try
{
	//try to use Scripting.FileSystemObject...
	var fso = new ActiveXObject("Scripting.FileSystemObject");

document.getElementById("rowFolderList").style.display="none";
	document.getElementById("rowFileList").style.display="none";
	document.getElementById("rowFile").style.display="none";

show_drives_list();
}
catch (_err)
{
	alert ("Failed to show:\n" + _err.description );	
}
</SCRIPT>

Article keywords: .NET, C#, Javascript, File upload, Scripting.FileSystemObject, Drive, Folder, File, Drives, Folders, Files, GetFolder, Subfolders, getElementById, options, new Option(), new Enumerator(),

Back To Articles Page

Free Mobile Management For SQL Server(s!) - Siccolo - SQL Management Tool

Questions? Suggestions? Concerns? - email me to [email protected] Greg Dubinovsky © 2008
or share your thoughts at Siccolo Blog

Web being sponsor - Mid-Atlantic Processing. Well being sponsor - Clarity MediSpa. Hairless sponsor - Clarity MediSpa Laser Hair Removal.

Siccolo - SQL Server Management Tool For Mobile Devices is packed with built-in functionality and tools. Siccolo delivers a rich set of management tools for both DBAs and sys admins. SQL Server management has always been an area of DBA concern. The new Management Tool For Mobile Devices - Siccolo - has simple "Enterprise Manager" and the "Query Analyzer". Siccolo is a management tool for the MS SQL Server with administration capabilities and a database query tool. The administration features provide users the ability to browse database structures. An integrated query tool allows users to quickly create, edit and execute SQL queries and scripts. Siccolo also provides an export tool to allow users to easily save and email execution results. Siccolo helps database professionals save time and increase their productivity by utilizing a more efficient approach to database management - use their Windows Mobile empowered device while sipping margarita on the beach For increased security, Siccolo is configured to run under SSL with IIS authentication.

Siccolo

Run SQL Query window (with semi-automated Insert/Update/Delete/Select Statements) Open/Save SQL Scripts in multiple tabs Save/Email results
Explore SQL Server Browse databases and database objects (tables/views/stored procedures) Browse/Manage SQL Server jobs Browse/Manage windows services (start/stop) View event logs (Application, System)
Manage SQL Server - restart MS SQL Server service and SQL Agent

Select a drive:

select a folder:

select a file:

selected file:

Upload Service -->