Custom AsyncUploadHander multible Files

[Joe]

Is there a way to upload all files in a directory via Dropzone?

[Attila Antal]

Hello Joe,

Yes, you can upload multiple files by dropping them in the DropZone. Make sure to set the MultipleFileSelection property to Automatic as described in the DropZones Property documentation article.

You can also check out our online demo to see how it works: File Upload with Drag and Drop

I hope this will be  helpful.

Regards,
Attila Antal
Progress Telerik

[Joe]

Please excuse me, i expressed myself a little imprecisely.
The customer wants to drag a folder from the explorer into the drop zone, then all the files in the folder should be uploaded.

[Attila Antal]

Joe,

The AsyncUpload is using the built-in File browser API which does not have access to the File System on a computer. The file input (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) must be populated with files. 

To answer your question, neither the AsyncUpload nor the generic file input supports uploading folders.

[Joe]

Actually, it works with this script as long as I don't use a custom HttpHandler.

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" 
	MultipleFileSelection="Automatic" 
	DropZones=".clDropzone1" 
	OnFileUploaded="RadAsyncUpload1_FileUploaded" 
	OnClientValidationFailed="OnClientValidationFailed" 
	OnClientAdded="OnClientAdded" 
	OnClientFilesUploaded="OnClientFilesUploaded"
	OnClientFileUploading="OnClientFileUploading"
	OnClientFileSelected="OnClientFileSelected"
	OnClientFileDropped="OnClientFileDropped"
	PostbackTriggers="cmdPnlUploadAddFiles"
	DisablePlugins="true" 
	HttpHandlerUrl="~/Global_Files/UploadHandler.ashx" >
	<Localization select="Durchsuchen..." Remove="Löschen" Cancel="Abbrechen"/>
</telerik:RadAsyncUpload>
<input type="file" id="directoryUpload" webkitdirectory multiple style="display: none;" />

<script type="text/javascript">
	document.getElementById('dropzone').addEventListener('click', function () {
		document.getElementById('directoryUpload').click();
	});
	document.getElementById('directoryUpload').addEventListener('change', function (event) {
		const files = event.target.files;
		for (let i = 0; i < files.length; i++) {
			uploadFile(files[i]);
		}
	});
	document.getElementById('dropzone').addEventListener('dragover', function (event) {
		event.preventDefault();
		event.stopPropagation();
		event.dataTransfer.dropEffect = 'copy';
	});
	document.getElementById('dropzone').addEventListener('drop', function (event) {
		event.preventDefault();
		event.stopPropagation();
		const items = event.dataTransfer.items;
		for (let i = 0; i < items.length; i++) {
			const item = items[i].webkitGetAsEntry();
			if (item) {
				traverseFileTree(item);
			}
		}
	});
	function traverseFileTree(item) {
		if (item.isFile) {
			item.file(function (file) {
				uploadFile(file);
			});
		} else if (item.isDirectory) {
			const dirReader = item.createReader();
			dirReader.readEntries(function (entries) {
				for (let i = 0; i < entries.length; i++) {
					traverseFileTree(entries[i]);
				}
			});
		}
	}
	function uploadFile(file) {
		const radAsyncUpload = $find("<%= RadAsyncUpload1.ClientID %>");
		const fileInput = document.createElement('input');
		fileInput.type = 'file';
		fileInput.style.display = 'none';
		const dataTransfer = new DataTransfer();
		dataTransfer.items.add(file);
		fileInput.files = dataTransfer.files;
		document.body.appendChild(fileInput);
		const visibleFileInput = document.querySelector('input[type="file"].ruFileInput');
		if (visibleFileInput) {
			const event = new Event('change', { bubbles: true });
			visibleFileInput.files = fileInput.files;
			visibleFileInput.dispatchEvent(event);
		} else {
			console.error('Kein sichtbares Datei-Upload-Element gefunden.');
		}
		document.body.removeChild(fileInput);
	}
</script>

With a custom HttpHander the FileUploaded Event is only called for the first file.

Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As FileUploadedEventArgs)
End Sub

Here is my HttpHander to remove trema characters from the filename.

<%@ WebHandler Language="VB" Class="UploadHandler" %>

Imports Telerik.Web.UI
Imports System.IO
Imports System.Globalization

Public Class UploadHandler
    Inherits AsyncUploadHandler

    Protected Overrides Function Process(ByVal file As UploadedFile, ByVal context As HttpContext, ByVal configuration As IAsyncUploadConfiguration, ByVal tempFileName As String) As IAsyncUploadResult
        ' Tempfilename sanitizen
        tempFileName = SanitizeFileName(tempFileName)
        TemporaryFileName = tempFileName
        ' File speichern
        SaveToTempFolder(file, configuration, context, tempFileName)
        ' Neues ReturnResult mit sanitized FileName erstellen
        Dim result As AsyncUploadResult = CreateDefaultUploadResult(Of AsyncUploadResult)(file)
        result.FileName = SanitizeFileName(file.FileName)
        return result
    End Function

    Protected Overrides Function ChangeOriginalFileName(fileName As String) As String
        Return SanitizeFileName(fileName)
    End Function

    Private Shared Function SanitizeFileName(fileName As String) As String
        ' Alle Trema mit Umlaute ersetzen
        fileName = ReplaceTremaWithUmlaut(fileName)
        ' Filename zurückgeben, wenn kein ungültiges Zeichen für Windows vorhanden ist
        If fileName.IndexOfAny(System.IO.Path.GetInvalidFileNameChars()) = -1 Then
            Return fileName
        Else
            ' Ungültige Zeichen entfernen
            fileName = Regex.Replace(fileName, "[^\w\.@-]", "", RegexOptions.None)
            ' Wenn der Filename nur aus ungültigen Zeichen war ein _ zurückgeben
            If Path.GetFileNameWithoutExtension(fileName).Length = 0 Then
                Return fileName.Insert(0, "_")
            End If
            ' Ersetzter Filename zurückgeben
            Return fileName
        End If
    End Function

    Private Shared Function ReplaceTremaWithUmlaut(ByVal text As String) As String
        Dim normalizedText As String = text.Normalize(NormalizationForm.FormD)
        Dim sb As New StringBuilder()
        Dim i As Integer = 0
        While i < normalizedText.Length
            If i < normalizedText.Length - 1 AndAlso CharUnicodeInfo.GetUnicodeCategory(normalizedText(i + 1)) = UnicodeCategory.NonSpacingMark Then
                sb.Append(GetUmlaut(normalizedText(i)))
                i += 1
            Else
                sb.Append(normalizedText(i))
            End If
            i += 1
        End While
        Return sb.ToString().Normalize(NormalizationForm.FormC)
    End Function

    Private Shared Function GetUmlaut(ByVal c As Char) As Char
        Select Case c
            Case "a"c
                Return "ä"c
            Case "o"c
                Return "ö"c
            Case "u"c
                Return "ü"c
            Case "A"c
                Return "Ä"c
            Case "O"c
                Return "Ö"c
            Case "U"c
                Return "Ü"c
            Case "e"c
                Return "ë"c
            Case "i"c
                Return "ï"c
            Case "E"c
                Return "Ë"c
            Case "I"c
                Return "Ï"c
            Case Else
                Return c
        End Select
    End Function

End Class