File Source in ASP.NET CORE File Upload

26 Aug 202610 minutes to read

Paste to upload

The Uploader control allows you to upload files using the select or drop option from the file explorer. It also supports pasting to upload the image files. You can upload any currently copied images in the clipboard.

When you paste the image, it will be saved in the server with the filename as image.png. The file name can be renamed in the server end. You can generate a random name for the file name using the getUniqueID method.

Refer to the following example.

Server-side configuration for save the paste file

[AcceptVerbs("Post")]

private IHostingEnvironment hostingEnv;
public DefaultController(IHostingEnvironment env)
    {
        this.hostingEnv = env;
    }
public void Save(IList<IFormFile> UploadFiles)
    {
    try
        {
        foreach (var file in UploadFiles)
            {
                var filename = ContentDispositionHeaderValue
                                    .Parse(file.ContentDisposition)
                                    .FileName
                                    .Trim('"');
                filename =  hostingEnv.WebRootPath + $@"\{filename}";
                long size = 0;
                size += file.Length;
                if (!System.IO.File.Exists(filename))
                {
                using (FileStream fs = System.IO.File.Create(filename))
                    {
                        file.CopyTo(fs);
                        fs.Flush();
                    }
                }
            }
        }
        catch (Exception e)
        {
            Response.Clear();
            Response.StatusCode = 204;
            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
        }
    }

Directory upload

The Uploader control allows you to upload all files in the folders to server using the directoryUpload property. When this property is enabled, the Uploader control processes the files by iterating through the files and sub-directories in a directory. It allows you to select only folders instead of files to upload.

The directory upload is available only in browsers that support HTML5 directory. The uploader will process directory upload via drag-and-drop in the Edge browser.

Refer to the following example to upload files to the server.

Server-side configuration for save the files of folders

[AcceptVerbs("Post")]

private IHostingEnvironment hostingEnv;
public DefaultController(IHostingEnvironment env)
    {
        this.hostingEnv = env;
    }
    public void Save(IList<IFormFile> chunkFile, IList<IFormFile> UploadFiles)
    {
        long size = 0;
        try
        {
            foreach (var file in UploadFiles)
            {
                var filename = ContentDispositionHeaderValue
                    .Parse(file.ContentDisposition)
                    .FileName
                    .Trim('"');
                var folders = filename.Split('/');
                var uploaderFilePath = hostingEnv.WebRootPath;
                    // for Directory upload
                if (folders.Length > 1)
                {
                    for (var i = 0; i < folders.Length - 1; i++)
                    {
                        var newFolder = uploaderFilePath + $@"\{folders[i]}";
                        Directory.CreateDirectory(newFolder);
                        uploaderFilePath = newFolder;
                        filename = folders[i + 1];
                    }
                }
                filename = uploaderFilePath + $@"\{filename}";
                size += file.Length;
                if (!System.IO.File.Exists(filename))
                {
                    using (FileStream fs = System.IO.File.Create(filename))
                    {
                        file.CopyTo(fs);
                        fs.Flush();
                    }

                }
            }
        }
        catch (Exception e)
        {
            Response.Clear();
            Response.StatusCode = 204;
            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
        }
    }

Drag and drop

The Uploader control allows you to drag and drop the files to upload. You can drag the files from file explorer and drop into the drop area. By default, the Uploader control acts as the drop area element. The drop area gets highlighted when you drag the files over drop area.

Custom drop area

The Uploader control allows you to set an external target element as the drop area using the dropArea property. The element can be represented as an HTML element or its id.

The output is shown below.

uploader

Customize drop area

You can customize the appearance of drop area by overriding the default drop area styles. The class “” and “” is available to handle this customization.