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 J

Answer 1

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.

Answer 2

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.

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.

Answer 4

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.

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);
            }
        }
    }
}
?>

Answer 6

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://stackoverflow.com/a/20431117/6760554 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.