0

I am developing a web application that allows users to upload files. One feature that would really help would be the ability to have a "Browse..." dialog that allows for directory selection rather than file selection.

Edit: This project requires compatibility with IE 10 and IE 11.

The code I have so far allows for multiple file selects the POSTS to the C# Controller which uploads each file from the Request.Files list. Is there a way to get this to do directory level uploads rather than file level?

$("body").on("click", "button#AddFile", function () {
$.ajax({
    url: "File\\Create",
    type: "POST",
    cache: false,
    async: true,
    data: {},
    success: function (result) {
        var diag = "<div class='divFileSelectPopup'></div>";
        var $dialog = $(diag).dialog({
            width: 400,
            height: 250,
            draggable: true,
            resizable: false,
            zIndex: 2,
            title: "Add File",
            modal: true,   //dims screen to bring dialog to the front
            position: [300, 200],    //[x-cord, y-cord]  
            buttons: {
                //Select == The user has clicked a row in the table and wishes to use that. The fileset is returned to the parent dialog. 
                'Browse...': function () {
                    //trigger a file upload selection... 
                    $('#newFile').click();
                }, 'OK': function () {
                    //trigger a file upload selection... 
                    var fileName = $("input:folder").val();
                    if (fileName.length > 0) {
                        $('#submitTarget').submit();
                        refreshFileList();
                        $(this).dialog('close');
                    }
                },
                'Cancel': function () {
                    $(this).dialog('close');
                },
            },
            open: function (event, ui) {
                $(this).html(result);
            }, close: function (event, ui) {
                $(this).dialog('destroy');
            }

        });
    },
    error: function (response) {
        alert("An error has occured"); //temp message
    }
});

Controller code

    /// <summary>
    /// Submits a batch of files from the client for processing into a new file set. 
    /// </summary>
    /// <param name="filesetType">The type of file being uploaded</param>
    /// <returns></returns>
    [HttpPost]
    public JsonResult FileUpload(string filesetType)
    {
        //Create a new fileset via the API
        FileServices.FileSet fs = new FileServices.FileSet(filesetType, null, DateTime.Now, "SYSTEM");
        ////Add each file
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFileBase file = Request.Files[i];
            int fileSize = file.ContentLength;
            string fileName = file.FileName;
            string mimeType = file.ContentType;
            System.IO.Stream fileContent = file.InputStream;
            string tempFileName = System.IO.Path.GetTempFileName();

            file.SaveAs(tempFileName);
            fs.AddFile(tempFileName, "", System.IO.Path.GetFileName(fileName));
        }
        fs.SetComplete(true);
        return Json("Uploaded " + Request.Files.Count + " files");
    }
  • This can be done natively in some browsers (maybe all at this time, but I'm not sure). Look the following posts: http://stackoverflow.com/questions/4008406/how-to-upload-folder-with-php (ignore the PHP part); http://sapphion.com/2011/11/21/html5-folder-upload-with-webkitdirectory/ ; http://sapphion.com/2011/11/21/html5-folder-upload-with-webkitdirectory/ – David Tansey Dec 08 '15 at 20:58
  • Thanks for the feedback. I should have noted, and will update above, that I am required to be compatible with IE 10 and IE 11. – travisco_nabisco Dec 08 '15 at 21:03
  • After much digging I decided to upload a zip archive rather than a directory. Unfortunately that doesn't answer this question. – travisco_nabisco Dec 09 '15 at 22:02

0 Answers0