Can I use multipart/form-data to upload a folder?

Question

I can use multipart/form-data to upload a File, But i can't find any tutorials about multipart/form-data upload a Folder. This is my code upload a file:

html:

<form name="form1" method="post" enctype="multipart/form-data" action="api/upload">
            <fieldset>
                <legend>File Upload Example</legend>
            <div>
                <label for="caption">Image Caption</label>
                <input name="caption" type="text" />
            </div>
            <div>
                <label for="image1">Image File</label>
                <input name="image1" type="file" />
            </div>
            <div>
                <input type="submit" value="Submit" />
            </div>
                </fieldset>
        </form>

Controller:

public class UploadController : ApiController
{
    [AcceptVerbs("GET", "POST")]
    public async Task<HttpResponseMessage> PostFile()
    {
        // Check if the request contains multipart/form-data.
        if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root);

        try
        {
            StringBuilder sb = new StringBuilder(); // Holds the response body

            // Read the form data and return an async task.
           await Request.Content.ReadAsMultipartAsync(provider);


            // This illustrates how to get the file names for uploaded files.
           foreach (var file in provider.FileData)
            {
                var originalFile = file.Headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"'); ;
                FileInfo fileInfo = new FileInfo(file.LocalFileName);
                fileInfo.CopyTo(Path.Combine(root, originalFile), true);

                sb.Append(string.Format("Uploaded file: {0} ({1} bytes)\n", originalFile, fileInfo.Length));
                fileInfo.Delete();
            }

            return new HttpResponseMessage()
            {
                Content = new StringContent(sb.ToString())
            };
        }
        catch (System.Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }

}

Can I use multipart/form-data to upload a folder?

File upload is based on RFC 1867 (https://www.ietf.org/rfc/rfc1867.txt) that doesn't mention 'folder' which is a vague notion. So you can upload a list of files, that's it — Simon Mourier, Mar 14 '17 at 07:16
How can get list files in a folder before upload each files by javascript? — D T, Mar 14 '17 at 10:38
This is well explained here: https://developer.mozilla.org/en/docs/Using_files_from_web_applications either you use an ``, or you use a drop zone with `event.datatransfer.files` https://developer.mozilla.org/en/docs/Web/API/DataTransfer/files — Simon Mourier, Mar 14 '17 at 11:03
I think you need to provide more information. What is the data going to be received by? WebApi? Or are you open to any technology suggestions? — pmcilreavy, Mar 17 '17 at 00:54
Would it be an option to zip the folder before sending it. Send it as a single file, and unzip it on the other end? — Juan, Mar 18 '17 at 16:50

score 0 · Answer 1 · edited May 23 '17 at 12:25

Unfortunately, you can't upload folder as it is not in specs. But you can't try this code.

CLIENT SIDE

    <form name="form1" method="post" enctype="multipart/form-data" action="api/upload">
        ...
        <div>
            <label for="folderName">Folder Name</label>
            <input name="folderName" type="text"  />
        </div>
        <div>
            <label for="images">Images</label>
            <!-- you choose multiple files -->
            <input name="images" type="file" multiple />
        </div>
        ...
    </form>

SERVER SIDE

// using ASP Logic
// create folder in your server
// put uploaded files to the created folder
// save files info and captions to DB

Regarding image captions, please have a look. Html/PHP - Form - Input as array

this sample: http://ajaxuploader.com/demo/upload-folders.aspx, we can upload a folder. — D T, Mar 21 '17 at 04:17

Stobor · Accepted Answer · 2017-03-21T04:47:42.960

If your question is "Is there a way for a user in a browser to select a single folder, and have the browser upload all the files in it", then the answer varies by browser.

The standards do not describe a way to upload the contents of a folder to a form's input type=file control. Browsers vary in their support:

Google Chrome, which supports folder upload as per this question.

Firefox may be able to do something via drag-n-drop

MS Edge browser support is "in development"

The browser will not allow any script to access the local files without user interaction.

If the user is willing to drag all the files to the browser, or use a different program to upload the files, something may be possible, but having a browser send a folder to the server is outside of the specifications.

(On the server side, yes, you can choose to accept multiple files with paths specified, but the browser won't send these to you, so you will need a specially-written program on the user side to send the files.)

this sample: ajaxuploader.com/demo/upload-folders.aspx, we can upload a folder. — D T, Mar 21 '17 at 04:17
@DT Okay, that is a Chrome-specific addition. Check out [this question on using Chrome's folder upload](/questions/5826286/) — Stobor, Mar 21 '17 at 04:37

Can I use multipart/form-data to upload a folder?

2 Answers2