Upload a whole directory through an HTML form

Question

Is it possible to upload a folder with a file input in the browser?

I searched and found out that this might be a browser limitation and that I might need to use a Java Applet or Flash.

Christelchristen

Answer 1

It's becoming possible with use of webkitdirectory.

<input type="file" webkitdirectory directory multiple />

Supported since Firefox 50, Chrome 30, Safari 11.1, Edge 14, but not on most mobile browsers as of 2019: https://caniuse.com/#feat=input-file-directory

Adam

multiple doesn't work with webkitdirectory or directory – Certified

Answer 2

Please Try This for upload the folder :

<form method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
    <input class="button" type="submit" value="Upload" />
</form>

`

$count = 0;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    foreach ($_FILES['files']['name'] as $i => $name) {
        if (strlen($_FILES['files']['name'][$i]) > 1) {
            if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'folder/'.$name)) {
                $count++;
            }
        }
    }
}

`

Harmful

How does it get folders on server? As it seems it will upload all files inside folder with no information regarding folder structure / sub folders. Please suggest. – Certified

There's an open bugreport for PHP. It is more or less impossible to get the folder structure via PHP only. bugs.php.net/bug.php?id=77372 – Brittni

Answer 3

It is possible to upload multiple files at a time, by drag and drop, without any browser plugins. This is a new development with HTML5 and javascript, so you'll probably need a fallback for older browsers.

It's called "HTML5 drag and drop". I've not used it yet, so I can't give you sample code, but searching for that phrase, and reading the linked Mozilla Blog article may give you some pointers.

Cata

Answer 4

It doesn't seem possible to upload a folder by only using PHP but Javascript can detect folders so I solved it by doing these two steps:

1. Create a Javascript function that reads the directory and files that will be uploaded and add this to a array(I called this Filestructure) that will be sent together with POST. For example:

   {
       'foldername/': {'file1.txt','file2.txt}, 
       'foldername/folder2': {'foo.txt', 'bar.png'} 
   }
   

There is a similar function in Dropzone.js that already handles this that I had to modify (_addFilesFromDirectory() ). But you can create your own function to do this. See this https://mcmap.net/q/743380/-file-upload-and-knowing-the-directory-structure if you need more help regarding this.

2. In Php you should first let your files be uploaded to a certain folder where they will be stored temporary. After your files has been uploaded you then need to pass your javascript array to your phpcode. There you need to iterate the array and create the folders and then move your uploaded files from the temporary folder to their respective location. For example:

   $_filetree = $_POST['filetree'];
   
   function createFoldersAndMoveFiles($_filetree) 
   {
   
       $nFolders = count($_filetree);
   
       foreach ($_filetree as $folder => $files) {
           createFolder($folder);
           moveFiles($files, $folder);
   
       }
   }
   
   function moveFiles($_files, $_folder) {
   
       $source = 'tmpuploads/';
       $destination = 'mypath/';
   
       $nFiles = count($_files);
       for($i = 0; $i < $nFiles; $i++) {
           $file = $_files[$i];
           rename($source . $file, $destination .$_folder. '/' .$file);
         }
   }
   
   function createFolder($foldername) {
       $folders = explode("/", $foldername);
   
       $path = 'mypath/';
       $nFolders = count($folders);
       for($i = 0; $i < $nFolders; $i++){
           $newFolder = '/' . $folders[$i];
           $path .= $newFolder;
   
           if (!file_exists($path) && !is_dir($path)) {
               mkdir($path);
           }
   
       }
   }
   

I hope this helps.

Annettannetta

Answer 5

to upload folder in php, use these steps

<form id="form1" action="myCurrent.php" method="post">
<label>Upload All Files From Folder</label> <br/>
<input id="input" name="input[]" type="file" multiple webkitdirectory >
<div id="errorBlock" class="help-block"></div> <br/>

<input type="submit" name="btnDesFolder" id="btnDesFolder" value="send file" />
</form>

<?php
if(isset($_POST['btnDesFolder'])){
    $myFiles = $_POST['input-folder-2'];

    if(isset($_POST['input-folder-2'])){
        $files = scandir("path/to/your/folder");
        $oldfolder = "path/to/your/folder/";

        $newfolder = "path/to/new/folder";

        foreach($files as $fname) {
            if($fname != '.' && $fname != '..' && $fname != 'index.php') {
                rename($oldfolder.$fname, $newfolder.$fname);
            }
        }
    }
}
?>

Isola

Answer 6

See swfupload - Flash-based way to upload more than one file at once. Anyway, it is not possible to upload a folder, you can only upload all files from the folder.

Stream

oudated as flash is not supported anymore. theblog.adobe.com/adobe-flash-update – Lorimer

Answer 7

You can archive the directory with something like tar and then upload it as a one file.But be careful, you might exceed php upload max which is by default set at 2MB. This is configurable though.

Litterbug

Answer 8

in case you use dropzone: dropzone scans files inside directory droped and correspondent sub directorys making a request to backend per file. this file original fullpath is catched

https://www.dropzonejs.com/#event-sending

PD: used lodash (_.without) for the example:

sendingEvent(file, xhr, formData){

    if (file.fullPath) { //file.fullPath only exist if file is inside a directory
        var directoryStructure = _.without(file.fullPath.split("/"), file.name);
        formData.append('directory-structure', directoryStructure.join(",") );
    }
}

you has received in request:

• directory-structure : path
• file: binary

now you can work with this folder name in your backend. dropzone can make multiple uploads separatly without issues and works fine for your use case.

Mesoderm

Answer 9

<form method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
    <input class="button" type="submit" value="Upload" />
</form>

Accordance