dropzone.js - upload directories and files to Spring MVC












0















I am able to upload files and files within folders using dropzone.js to my Spring Controller but I don't get the files with their dragged folders. For example, if I drag and dropped the directory ~/media/ which contains image1.jpg and image2.jpg, I get the jpg files but not the directories that where dragged and dropped (in this case media/image1.jpg). I need to be able to allow drag and drop of folders so that SD cards can be uploaded and the original structure is maintained.



ProjectAjaxController:



@RestController("ProjectAjaxController")

@Validated

public class ProjectAjaxController extends BaseController { 



    private static final String INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD = "Invalid file supplied. Please select a file to upload. ";



    @RequestMapping("/ajax/project/upload") 

    public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 

            @RequestParam("projectPath") String projectPath, 

            @RequestParam("file") MultipartFile file) {

        AjaxResponse ajaxResponse = new AjaxResponse();



        if (file == null) {

            this.userErrors.add(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);

            logger.error(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);

            ajaxResponse.setMessage(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);

            ajaxResponse.setStatusCode(-2);

        } else {



            try {

                for (MultipartFile multipartFile: file) {

                    logger.info("current file " + multipartFile.getmultipartFilename());

                    ...

                }

            } catch (IOException ioe) {

                this.userErrors.add("Unable to upload files ");

                logger.warn("Unable to upload files. " + ioe.getMessage(), ioe);

                ajaxResponse.setStatusCode(-2);

                ajaxResponse.setMessage(String.join(" " + this.userErrors));

            } catch (Exception e) {

                this.userErrors.add("Error uploading files " + e.getMessage());

                logger.warn("Error uploading files. " + e.getMessage(), e);

                ajaxResponse.setStatusCode(-2);

                ajaxResponse.setMessage(String.join(" " + this.userErrors));

            }

        }

        return ajaxResponse;

    }



}


Web content:






jQuery(document).ready(function($) {



  $(".search-display-block").each(function() {

    var details = $(this).find(".portfolio-dropzone-details");

    var portfolioPath = details.data("portfolio-path");

    $(this).dropzone({

      url: "/ajax/project/upload",

      uploadMultiple: true,

      parallelUploads: 20,

      autoProcessQueue: true,

      createImageThumbnails: false,

      previewsContainer: "#template-preview",

      maxFilesize: 4000,

      timeout: 0,

      webkitDirectory: true,

      params: {

        'projectPath': portfolioPath

      },

      success: function(file, response) {

        console.dir(response);

        if (response == null || response.statusCode != 200) {

          //console.log("Error occurred uploading file");

          var errorMessage = (response == undefined || response.message == undefined) ? "Error occurred uploading file " : response.message;

          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");

        } else {

          console.log("Succesfully uploaded file ");

          //console.dir(file);

        }

      },



      uploadprogress: function(file, progress, bytesSent) {

        var percent = round(progress, 2);

        var progressParent = $(file.previewElement).find(".dz-progress");

        var progressElement = $(file.previewElement).find(".dz-upload");

        progressElement.html(percent + "%");

        var size = progressParent.width() * (percent / 100);

        progressElement.width(size + "px");

      },

      //Called just before each file is sent

      sending: function(file, xhr, formData) {

        //Execute on case of timeout only

        xhr.ontimeout = function(e) {

          var errorMessage = "The server timed out transfering file " + file.name + ". Please try again or contact your administrator.";

          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");

        };





      }

    });



  });



});

.card {

  transition: 0.3s;

}



.portfolio-container {

  background-color: #1d3c5c;

}



.card-member-span {

  padding-right: 1em;

}



.project-dialog {

  overflow: auto;

  background-color: #1d3c5c;

}



.portfolio-dialog {

  overflow: auto;

  background-color: #ffffff;

}



.dialog {

  display: none;

}



.project-block {

  padding-left: 0.25em;

  padding-bottom: 0.25em;

  margin-bottom: 0;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.42857143;

  white-space: nowrap;

  vertical-align: middle;

  cursor: pointer;

}



.project-block.focus,

.project-block:focus,

.project-block:hover {

  color: #333;

}



.project-block-primary {

  color: #1d3c5c;

  background-color: #ddd;

  font-weight: 700;

}



.list-cards {

  -webkit-box-flex: 1;

  -webkit-flex: 1 1 auto;

  -ms-flex: 1 1 auto;

  flex: 1 1 auto;

  overflow-y: auto;

  overflow-x: hidden;

  margin: 0 4px;

  padding: 0 4px;

  z-index: 1;

  min-height: 0;

  border-radius: 1em;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



.portfolio-card {

  width: 100%;

  min-height: 3em;

  background-color: #ddd;

  color: #000;

  padding-left: 3px;

}



.list-card-members {

  background-color: #ffffff;

  padding: 0.5em;

}



.list-card-section {}



.list-card-project-section {

  background-color: #ffffff;

}



.list-card {

  margin-bottom: 0.5em;

  background-color: #1d3c5c;

  border-radius: 1em;

  overflow: hidden;

}





/* Add rounded corners to the top left and the top right corner of the image */



img {

  vertical-align: inherit;

}





/* On mouse-over, add a deeper shadow */



.card:hover {

  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}





/* Add some padding inside the card container */



.container {

  padding: 2px 16px;

}



#board {

  /*     user-select: none; */

  display: flex;

  white-space: nowrap;

  margin-bottom: 10px;

  overflow-x: auto;

  overflow-y: hidden;

  padding-bottom: 10px;

  position: relative;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}



.list {

  /*  background-color: #5b5353; */

  background-color: #1d3c5c;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  max-height: 100%;

  position: relative;

  white-space: normal;

  margin-top: 2px;

  padding-left: 5px;

  padding-right: 5px;

}



.board-menu-container,

.list {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

}



.list-wrapper {

  width: 270px;

  margin: 0 5px;

  height: 100%;

  display: inline-block;

  vertical-align: top;

}



.search-filter {

  padding-top: 5px;

  padding-bottom: 5px;

  display: none;

  font-size: 12px;

}



.search-filter-block {

  padding-top: 5px;

  padding-bottom: 5px;

}



.search-filter-tag-block {

  margin-top: 5px;

}



.search-filter-select {

  height: 100%;

  font-size: 12px;

}



.search-colour-button {

  color: white;

  padding: 0.5em 0.5em;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 12px;

  margin: 4px 2px;

  cursor: pointer;

  border-radius: 1em;

  -webkit-border-radius: 1em;

  -moz-border-radius: 1em;

}



.search-colour-button.active {

  box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;

  font-weight: 800;

}



.project-card {

  position: relative;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  border-radius: 1em;

  overflow: hidden;

  background-color: #1d3c5c;

  min-height: 10%;

  max-height: 90%;

  min-width: 10%;

  max-width: 90%;

  margin: 1em;

}



.project-card-content {

  background-color: #fff;

}



.portfolio-card-title {

  font-weight: 600;

  padding: 0.5em;

  cursor: pointer;

}



.portfolio-projects-title {

  font-weight: 600;

}



.search-tags-form {

  margin: 4px 2px;

}



.list-header {

  color: #ddd;

}



.list-header-name-assist {

  text-shadow: 2px 2px 4px #000000;

}



hr {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #ccc;

  margin: 0px;

  padding: 0;

}



.portfolio-dialog {

  background-color: #1d3c5c;

  color: #fff;

}



.portfolio-dialog-content {

  background-color: #1d3c5c;

  color: #ffffff;

}



dl {

  margin-bottom: 3px;

}



.bg-dark {

  color: #333333;

  background-color: #ffffff;

}



.portfolio-card-content {

  margin-bottom: 0.5em;

  border-radius: 1em;

  padding-top: 0.5em;

  padding-bottom: 1em;

}



.fps-tag-block {

  padding-left: 1em;

  padding-right: 1em;

}



.portfolio-icon-list {

  color: #000;

}



.ui-dialog {

  background-color: #1d3c5c;

}



.ui-dialog-titlebar {

  background-color: #1d3c5c;

  color: #ddd;

  border: 0px;

}



.ui-dialog-buttonpane {

  background-color: #1d3c5c;

  color: #ddd;

  border: 0px;

}



.ui-dialog .ui-dialog-title {

  text-align: center;

}



.ui-dialog-buttonset {

  color: #1d3c5c;

}



.ui-dialog-titlebar-close {

  color: #1d3c5c;

  content: "X";

}



.ui-widget-content a {

  color: #333333;

}



.portfolio-toggle:before {

  content: "▸";

}



.portfolio-toggle.collapsed:before {

  content: "▾";

}



.project-block-rounded {

  border-radius: 0.5em;

  padding: 0.25em;

  margin: 0.25em;

}



.open-portfolio-dialog-btn {

  cursor: pointer;

}



.portfolio-overview-btn {

  cursor: pointer;

}



.media-capture-btn {

  cursor: pointer;

}



#search-filter-block {

  cursor: pointer;

}



.dl-horizontal dt {

  text-align: left;

}



.dl-horizontal dd {

  width: auto;

}



.portfolio-card-filter {

  padding-left: 1em;

}



.portfolio-metadata {

  color: #000;

}



.portfolio-overview {

  color: #000;

}



.fixed-header {

  position: fixed;

  top: 0em;

  background-color: #1d3c5c;

  padding: 1em;

  width: 270px;

  text-align: center;

}



.sortable-list {

  padding-bottom: 100px;

}



.search-highlighter {

  border: 2px solid red;

}



.portfolio-specific-btn {

  padding-right: 0.5em;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1:jquery.min.js/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>



<div class="container-fluid" id="core-content">

  <div class="col-xs-12 portfolio-page">

    <div class="col-xs-2 " style="">

      <div>Success/Error info goes here</div>

      <div id="dropzone-status-updates-block">

        <div id="dropzone-error-messsage-block"></div>

        <div id="dropzone-progress-block"></div>

      </div>

      <div id="template-preview"></div>

    </div>

    <div class="col-xs-10 portfolio-board-container">

      <div id="portfolio-container" class="container-fluid portfolio-container" style="">

        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">

          <div class="board-canvas">

            <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">

              <div class="js-list list-wrapper ">

                <div class="list js-list-content">

                  <div class="list-header js-list-header u-clearfix is-menu-shown">

                    <div class="list-header-target js-editing-target"></div>

                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">

                      Awaiting Approval

                    </h4>

                  </div>

                  <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">

                    <div data-portfolio-path="Tennis" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">

                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;

                 color: #000000; ">

                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Tennis"></span>

                        <div class="portfolio-card-filter-block">

                          <div class="portfolio-card-title portfolio-card-filter-heading ">

                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">

                              <span class="portfolio-accordion"></span>



                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;



                              <span class="archiware-archive-state" data-portfolio-path="Tennis"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis

                              <span class="text-right"></span>

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="list-card-details text-center">

                        <div class="list-card-members js-list-card-members">

                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">

                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">

                              <a href="#" class="portfolio-overview">

                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>

                            </div>

                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">

                              <a href="#" class="portfolio-checklist">

                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>

                            </div>



                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">

                              <a href="#" class="portfolio-metadata">

                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>

                            </div>



                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">

                              <a href="#" class="portfolio-forum">

                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>



                            </div>



                          </div>

                        </div>

                        <div class="list-card-project-section">

                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">

                            Motion Sports: <span class="badge">1</span>

                          </div>

                        </div>

                      </div>

                    </div>

                    <div data-portfolio-path="Badminton" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">

                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;

                 color: #000000; ">

                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Badminton"></span>

                        <div class="portfolio-card-filter-block">

                          <div class="portfolio-card-title portfolio-card-filter-heading ">

                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">

                              <span class="portfolio-accordion"></span>



                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;



                              <span class="archiware-archive-state" data-portfolio-path="Badminton"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Badminton

                              <span class="text-right"></span>

                            </div>

                          </div>

                        </div>

                      </div>

                      <div class="list-card-details text-center">

                        <div class="list-card-members js-list-card-members">

                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">

                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">

                              <a href="#" class="portfolio-overview">

                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>

                            </div>

                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">

                              <a href="#" class="portfolio-checklist">

                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>

                            </div>



                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">

                              <a href="#" class="portfolio-metadata">

                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>

                            </div>



                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">

                              <a href="#" class="portfolio-forum">

                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>

                            </div>

                          </div>

                        </div>

                        <div class="list-card-project-section">

                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">

                            Motion Sports: <span class="badge">1</span>

                          </div>

                        </div>

                      </div>

                    </div>



                  </div>

                </div>

              </div>

              <div class="js-list list-wrapper ">

                <div class="list js-list-content">

                  <div class="list-header js-list-header u-clearfix is-menu-shown">

                    <div class="list-header-target js-editing-target"></div>

                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">

                      Approved

                    </h4>

                  </div>

                  <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">



                    <div class="ui-sortable-handle">



                    </div>



                  </div>

                </div>

              </div>



              <div class="js-list list-wrapper ">

                <div class="list js-list-content">

                  <div class="list-header js-list-header u-clearfix is-menu-shown">

                    <div class="list-header-target js-editing-target"></div>

                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">

                      Editing in Progress

                    </h4>

                  </div>

                  <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">



                    <div class="ui-sortable-handle">



                    </div>



                  </div>

                </div>

              </div>



              <div class="js-list list-wrapper ">

                <div class="list js-list-content">

                  <div class="list-header js-list-header u-clearfix is-menu-shown">

                    <div class="list-header-target js-editing-target"></div>

                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">

                      Awaiting Graphics

                    </h4>

                  </div>

                  <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">



                    <div class="ui-sortable-handle">



                    </div>



                  </div>

                </div>

              </div>





              <div class="js-list list-wrapper ">

                <div class="list js-list-content">

                  <div class="list-header js-list-header u-clearfix is-menu-shown">

                    <div class="list-header-target js-editing-target"></div>

                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">

                      Completed

                    </h4>

                  </div>

                  <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">



                    <div class="ui-sortable-handle">



                    </div>



                  </div>

                </div>

              </div>





            </div>

          </div>

          <div class="spacer-sml"></div>



        </form>



      </div>

    </div>

  </div>

  <div class="row">

    <div class="spacer-sml"></div>

  </div>

</div>





I am testing this on chrome and realise that not all browsers support webkit. I have webkitdirectory set on the input field. I just don't know how to get the folder name appended to the file name.



I am just looking for a way to get the folders that are dragged and dropped not the file system folders.



So I finally worked out how I could get the directory name passed with the filename using the dropzone function renameFile:



renameFile: function (file) {

    let newFilename = file.fullPath;

    return newFilename;

},


Yeah! Great or so I thought. Now the file is considered a folder and not a file and when I do mkdirs on the file it creates a folder as the filename e.g. media/image1.jpg, I have also tried createNewFile which creates a directory with the filename. When I then try to read the stream using BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream( projectFilePath )); I get the error:



java.io.FileNotFoundException: /Volumes/share/Project/Tennis/media/image1.jpg (Invalid argument)





java jquery spring-mvc dropzone.js







share|improve this question





























    0















    I am able to upload files and files within folders using dropzone.js to my Spring Controller but I don't get the files with their dragged folders. For example, if I drag and dropped the directory ~/media/ which contains image1.jpg and image2.jpg, I get the jpg files but not the directories that where dragged and dropped (in this case media/image1.jpg). I need to be able to allow drag and drop of folders so that SD cards can be uploaded and the original structure is maintained.



    ProjectAjaxController:



    @RestController("ProjectAjaxController")
    
@Validated
    
public class ProjectAjaxController extends BaseController { 
    

    
    private static final String INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD = "Invalid file supplied. Please select a file to upload. ";
    

    
    @RequestMapping("/ajax/project/upload") 
    
    public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
    
            @RequestParam("projectPath") String projectPath, 
    
            @RequestParam("file") MultipartFile file) {
    
        AjaxResponse ajaxResponse = new AjaxResponse();
    

    
        if (file == null) {
    
            this.userErrors.add(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
    
            logger.error(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
    
            ajaxResponse.setMessage(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
    
            ajaxResponse.setStatusCode(-2);
    
        } else {
    

    
            try {
    
                for (MultipartFile multipartFile: file) {
    
                    logger.info("current file " + multipartFile.getmultipartFilename());
    
                    ...
    
                }
    
            } catch (IOException ioe) {
    
                this.userErrors.add("Unable to upload files ");
    
                logger.warn("Unable to upload files. " + ioe.getMessage(), ioe);
    
                ajaxResponse.setStatusCode(-2);
    
                ajaxResponse.setMessage(String.join(" " + this.userErrors));
    
            } catch (Exception e) {
    
                this.userErrors.add("Error uploading files " + e.getMessage());
    
                logger.warn("Error uploading files. " + e.getMessage(), e);
    
                ajaxResponse.setStatusCode(-2);
    
                ajaxResponse.setMessage(String.join(" " + this.userErrors));
    
            }
    
        }
    
        return ajaxResponse;
    
    }
    

    
}


    Web content:






    jQuery(document).ready(function($) {
    

    
  $(".search-display-block").each(function() {
    
    var details = $(this).find(".portfolio-dropzone-details");
    
    var portfolioPath = details.data("portfolio-path");
    
    $(this).dropzone({
    
      url: "/ajax/project/upload",
    
      uploadMultiple: true,
    
      parallelUploads: 20,
    
      autoProcessQueue: true,
    
      createImageThumbnails: false,
    
      previewsContainer: "#template-preview",
    
      maxFilesize: 4000,
    
      timeout: 0,
    
      webkitDirectory: true,
    
      params: {
    
        'projectPath': portfolioPath
    
      },
    
      success: function(file, response) {
    
        console.dir(response);
    
        if (response == null || response.statusCode != 200) {
    
          //console.log("Error occurred uploading file");
    
          var errorMessage = (response == undefined || response.message == undefined) ? "Error occurred uploading file " : response.message;
    
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
    
        } else {
    
          console.log("Succesfully uploaded file ");
    
          //console.dir(file);
    
        }
    
      },
    

    
      uploadprogress: function(file, progress, bytesSent) {
    
        var percent = round(progress, 2);
    
        var progressParent = $(file.previewElement).find(".dz-progress");
    
        var progressElement = $(file.previewElement).find(".dz-upload");
    
        progressElement.html(percent + "%");
    
        var size = progressParent.width() * (percent / 100);
    
        progressElement.width(size + "px");
    
      },
    
      //Called just before each file is sent
    
      sending: function(file, xhr, formData) {
    
        //Execute on case of timeout only
    
        xhr.ontimeout = function(e) {
    
          var errorMessage = "The server timed out transfering file " + file.name + ". Please try again or contact your administrator.";
    
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
    
        };
    

    

    
      }
    
    });
    

    
  });
    

    
});

    .card {
    
  transition: 0.3s;
    
}
    

    
.portfolio-container {
    
  background-color: #1d3c5c;
    
}
    

    
.card-member-span {
    
  padding-right: 1em;
    
}
    

    
.project-dialog {
    
  overflow: auto;
    
  background-color: #1d3c5c;
    
}
    

    
.portfolio-dialog {
    
  overflow: auto;
    
  background-color: #ffffff;
    
}
    

    
.dialog {
    
  display: none;
    
}
    

    
.project-block {
    
  padding-left: 0.25em;
    
  padding-bottom: 0.25em;
    
  margin-bottom: 0;
    
  font-size: 14px;
    
  font-weight: 400;
    
  line-height: 1.42857143;
    
  white-space: nowrap;
    
  vertical-align: middle;
    
  cursor: pointer;
    
}
    

    
.project-block.focus,
    
.project-block:focus,
    
.project-block:hover {
    
  color: #333;
    
}
    

    
.project-block-primary {
    
  color: #1d3c5c;
    
  background-color: #ddd;
    
  font-weight: 700;
    
}
    

    
.list-cards {
    
  -webkit-box-flex: 1;
    
  -webkit-flex: 1 1 auto;
    
  -ms-flex: 1 1 auto;
    
  flex: 1 1 auto;
    
  overflow-y: auto;
    
  overflow-x: hidden;
    
  margin: 0 4px;
    
  padding: 0 4px;
    
  z-index: 1;
    
  min-height: 0;
    
  border-radius: 1em;
    
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
}
    

    
.portfolio-card {
    
  width: 100%;
    
  min-height: 3em;
    
  background-color: #ddd;
    
  color: #000;
    
  padding-left: 3px;
    
}
    

    
.list-card-members {
    
  background-color: #ffffff;
    
  padding: 0.5em;
    
}
    

    
.list-card-section {}
    

    
.list-card-project-section {
    
  background-color: #ffffff;
    
}
    

    
.list-card {
    
  margin-bottom: 0.5em;
    
  background-color: #1d3c5c;
    
  border-radius: 1em;
    
  overflow: hidden;
    
}
    

    

    
/* Add rounded corners to the top left and the top right corner of the image */
    

    
img {
    
  vertical-align: inherit;
    
}
    

    

    
/* On mouse-over, add a deeper shadow */
    

    
.card:hover {
    
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    
}
    

    

    
/* Add some padding inside the card container */
    

    
.container {
    
  padding: 2px 16px;
    
}
    

    
#board {
    
  /*     user-select: none; */
    
  display: flex;
    
  white-space: nowrap;
    
  margin-bottom: 10px;
    
  overflow-x: auto;
    
  overflow-y: hidden;
    
  padding-bottom: 10px;
    
  position: relative;
    
  top: 0;
    
  right: 0;
    
  bottom: 0;
    
  left: 0;
    
}
    

    
.list {
    
  /*  background-color: #5b5353; */
    
  background-color: #1d3c5c;
    
  -webkit-flex-direction: column;
    
  -ms-flex-direction: column;
    
  flex-direction: column;
    
  max-height: 100%;
    
  position: relative;
    
  white-space: normal;
    
  margin-top: 2px;
    
  padding-left: 5px;
    
  padding-right: 5px;
    
}
    

    
.board-menu-container,
    
.list {
    
  -webkit-box-orient: vertical;
    
  -webkit-box-direction: normal;
    
}
    

    
.list-wrapper {
    
  width: 270px;
    
  margin: 0 5px;
    
  height: 100%;
    
  display: inline-block;
    
  vertical-align: top;
    
}
    

    
.search-filter {
    
  padding-top: 5px;
    
  padding-bottom: 5px;
    
  display: none;
    
  font-size: 12px;
    
}
    

    
.search-filter-block {
    
  padding-top: 5px;
    
  padding-bottom: 5px;
    
}
    

    
.search-filter-tag-block {
    
  margin-top: 5px;
    
}
    

    
.search-filter-select {
    
  height: 100%;
    
  font-size: 12px;
    
}
    

    
.search-colour-button {
    
  color: white;
    
  padding: 0.5em 0.5em;
    
  text-align: center;
    
  text-decoration: none;
    
  display: inline-block;
    
  font-size: 12px;
    
  margin: 4px 2px;
    
  cursor: pointer;
    
  border-radius: 1em;
    
  -webkit-border-radius: 1em;
    
  -moz-border-radius: 1em;
    
}
    

    
.search-colour-button.active {
    
  box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;
    
  font-weight: 800;
    
}
    

    
.project-card {
    
  position: relative;
    
  display: -webkit-box;
    
  display: -webkit-flex;
    
  display: -ms-flexbox;
    
  display: flex;
    
  -webkit-box-orient: vertical;
    
  -webkit-box-direction: normal;
    
  -webkit-flex-direction: column;
    
  -ms-flex-direction: column;
    
  flex-direction: column;
    
  border-radius: 1em;
    
  overflow: hidden;
    
  background-color: #1d3c5c;
    
  min-height: 10%;
    
  max-height: 90%;
    
  min-width: 10%;
    
  max-width: 90%;
    
  margin: 1em;
    
}
    

    
.project-card-content {
    
  background-color: #fff;
    
}
    

    
.portfolio-card-title {
    
  font-weight: 600;
    
  padding: 0.5em;
    
  cursor: pointer;
    
}
    

    
.portfolio-projects-title {
    
  font-weight: 600;
    
}
    

    
.search-tags-form {
    
  margin: 4px 2px;
    
}
    

    
.list-header {
    
  color: #ddd;
    
}
    

    
.list-header-name-assist {
    
  text-shadow: 2px 2px 4px #000000;
    
}
    

    
hr {
    
  display: block;
    
  height: 1px;
    
  border: 0;
    
  border-top: 1px solid #ccc;
    
  margin: 0px;
    
  padding: 0;
    
}
    

    
.portfolio-dialog {
    
  background-color: #1d3c5c;
    
  color: #fff;
    
}
    

    
.portfolio-dialog-content {
    
  background-color: #1d3c5c;
    
  color: #ffffff;
    
}
    

    
dl {
    
  margin-bottom: 3px;
    
}
    

    
.bg-dark {
    
  color: #333333;
    
  background-color: #ffffff;
    
}
    

    
.portfolio-card-content {
    
  margin-bottom: 0.5em;
    
  border-radius: 1em;
    
  padding-top: 0.5em;
    
  padding-bottom: 1em;
    
}
    

    
.fps-tag-block {
    
  padding-left: 1em;
    
  padding-right: 1em;
    
}
    

    
.portfolio-icon-list {
    
  color: #000;
    
}
    

    
.ui-dialog {
    
  background-color: #1d3c5c;
    
}
    

    
.ui-dialog-titlebar {
    
  background-color: #1d3c5c;
    
  color: #ddd;
    
  border: 0px;
    
}
    

    
.ui-dialog-buttonpane {
    
  background-color: #1d3c5c;
    
  color: #ddd;
    
  border: 0px;
    
}
    

    
.ui-dialog .ui-dialog-title {
    
  text-align: center;
    
}
    

    
.ui-dialog-buttonset {
    
  color: #1d3c5c;
    
}
    

    
.ui-dialog-titlebar-close {
    
  color: #1d3c5c;
    
  content: "X";
    
}
    

    
.ui-widget-content a {
    
  color: #333333;
    
}
    

    
.portfolio-toggle:before {
    
  content: "▸";
    
}
    

    
.portfolio-toggle.collapsed:before {
    
  content: "▾";
    
}
    

    
.project-block-rounded {
    
  border-radius: 0.5em;
    
  padding: 0.25em;
    
  margin: 0.25em;
    
}
    

    
.open-portfolio-dialog-btn {
    
  cursor: pointer;
    
}
    

    
.portfolio-overview-btn {
    
  cursor: pointer;
    
}
    

    
.media-capture-btn {
    
  cursor: pointer;
    
}
    

    
#search-filter-block {
    
  cursor: pointer;
    
}
    

    
.dl-horizontal dt {
    
  text-align: left;
    
}
    

    
.dl-horizontal dd {
    
  width: auto;
    
}
    

    
.portfolio-card-filter {
    
  padding-left: 1em;
    
}
    

    
.portfolio-metadata {
    
  color: #000;
    
}
    

    
.portfolio-overview {
    
  color: #000;
    
}
    

    
.fixed-header {
    
  position: fixed;
    
  top: 0em;
    
  background-color: #1d3c5c;
    
  padding: 1em;
    
  width: 270px;
    
  text-align: center;
    
}
    

    
.sortable-list {
    
  padding-bottom: 100px;
    
}
    

    
.search-highlighter {
    
  border: 2px solid red;
    
}
    

    
.portfolio-specific-btn {
    
  padding-right: 0.5em;
    
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1:jquery.min.js/jquery.min.js"></script>
    
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
    

    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
    

    
<div class="container-fluid" id="core-content">
    
  <div class="col-xs-12 portfolio-page">
    
    <div class="col-xs-2 " style="">
    
      <div>Success/Error info goes here</div>
    
      <div id="dropzone-status-updates-block">
    
        <div id="dropzone-error-messsage-block"></div>
    
        <div id="dropzone-progress-block"></div>
    
      </div>
    
      <div id="template-preview"></div>
    
    </div>
    
    <div class="col-xs-10 portfolio-board-container">
    
      <div id="portfolio-container" class="container-fluid portfolio-container" style="">
    
        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">
    
          <div class="board-canvas">
    
            <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">
    
              <div class="js-list list-wrapper ">
    
                <div class="list js-list-content">
    
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
    
                    <div class="list-header-target js-editing-target"></div>
    
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
    
                      Awaiting Approval
    
                    </h4>
    
                  </div>
    
                  <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">
    
                    <div data-portfolio-path="Tennis" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
    
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
    
                 color: #000000; ">
    
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Tennis"></span>
    
                        <div class="portfolio-card-filter-block">
    
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
    
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
    
                              <span class="portfolio-accordion"></span>
    

    
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
    

    
                              <span class="archiware-archive-state" data-portfolio-path="Tennis"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis
    
                              <span class="text-right"></span>
    
                            </div>
    
                          </div>
    
                        </div>
    
                      </div>
    
                      <div class="list-card-details text-center">
    
                        <div class="list-card-members js-list-card-members">
    
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
    
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
    
                              <a href="#" class="portfolio-overview">
    
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
    
                            </div>
    
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
    
                              <a href="#" class="portfolio-checklist">
    
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
    
                            </div>
    

    
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
    
                              <a href="#" class="portfolio-metadata">
    
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
    
                            </div>
    

    
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
    
                              <a href="#" class="portfolio-forum">
    
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
    

    
                            </div>
    

    
                          </div>
    
                        </div>
    
                        <div class="list-card-project-section">
    
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
    
                            Motion Sports: <span class="badge">1</span>
    
                          </div>
    
                        </div>
    
                      </div>
    
                    </div>
    
                    <div data-portfolio-path="Badminton" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
    
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
    
                 color: #000000; ">
    
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Badminton"></span>
    
                        <div class="portfolio-card-filter-block">
    
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
    
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
    
                              <span class="portfolio-accordion"></span>
    

    
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
    

    
                              <span class="archiware-archive-state" data-portfolio-path="Badminton"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Badminton
    
                              <span class="text-right"></span>
    
                            </div>
    
                          </div>
    
                        </div>
    
                      </div>
    
                      <div class="list-card-details text-center">
    
                        <div class="list-card-members js-list-card-members">
    
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
    
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
    
                              <a href="#" class="portfolio-overview">
    
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
    
                            </div>
    
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
    
                              <a href="#" class="portfolio-checklist">
    
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
    
                            </div>
    

    
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
    
                              <a href="#" class="portfolio-metadata">
    
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
    
                            </div>
    

    
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
    
                              <a href="#" class="portfolio-forum">
    
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
    
                            </div>
    
                          </div>
    
                        </div>
    
                        <div class="list-card-project-section">
    
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
    
                            Motion Sports: <span class="badge">1</span>
    
                          </div>
    
                        </div>
    
                      </div>
    
                    </div>
    

    
                  </div>
    
                </div>
    
              </div>
    
              <div class="js-list list-wrapper ">
    
                <div class="list js-list-content">
    
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
    
                    <div class="list-header-target js-editing-target"></div>
    
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
    
                      Approved
    
                    </h4>
    
                  </div>
    
                  <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">
    

    
                    <div class="ui-sortable-handle">
    

    
                    </div>
    

    
                  </div>
    
                </div>
    
              </div>
    

    
              <div class="js-list list-wrapper ">
    
                <div class="list js-list-content">
    
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
    
                    <div class="list-header-target js-editing-target"></div>
    
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
    
                      Editing in Progress
    
                    </h4>
    
                  </div>
    
                  <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">
    

    
                    <div class="ui-sortable-handle">
    

    
                    </div>
    

    
                  </div>
    
                </div>
    
              </div>
    

    
              <div class="js-list list-wrapper ">
    
                <div class="list js-list-content">
    
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
    
                    <div class="list-header-target js-editing-target"></div>
    
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
    
                      Awaiting Graphics
    
                    </h4>
    
                  </div>
    
                  <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">
    

    
                    <div class="ui-sortable-handle">
    

    
                    </div>
    

    
                  </div>
    
                </div>
    
              </div>
    

    

    
              <div class="js-list list-wrapper ">
    
                <div class="list js-list-content">
    
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
    
                    <div class="list-header-target js-editing-target"></div>
    
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
    
                      Completed
    
                    </h4>
    
                  </div>
    
                  <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">
    

    
                    <div class="ui-sortable-handle">
    

    
                    </div>
    

    
                  </div>
    
                </div>
    
              </div>
    

    

    
            </div>
    
          </div>
    
          <div class="spacer-sml"></div>
    

    
        </form>
    

    
      </div>
    
    </div>
    
  </div>
    
  <div class="row">
    
    <div class="spacer-sml"></div>
    
  </div>
    
</div>





    I am testing this on chrome and realise that not all browsers support webkit. I have webkitdirectory set on the input field. I just don't know how to get the folder name appended to the file name.



    I am just looking for a way to get the folders that are dragged and dropped not the file system folders.



    So I finally worked out how I could get the directory name passed with the filename using the dropzone function renameFile:



    renameFile: function (file) {
    
    let newFilename = file.fullPath;
    
    return newFilename;
    
},


    Yeah! Great or so I thought. Now the file is considered a folder and not a file and when I do mkdirs on the file it creates a folder as the filename e.g. media/image1.jpg, I have also tried createNewFile which creates a directory with the filename. When I then try to read the stream using BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream( projectFilePath )); I get the error:



    java.io.FileNotFoundException: /Volumes/share/Project/Tennis/media/image1.jpg (Invalid argument)





    java jquery spring-mvc dropzone.js







    share|improve this question



























      0












      0








      0








      I am able to upload files and files within folders using dropzone.js to my Spring Controller but I don't get the files with their dragged folders. For example, if I drag and dropped the directory ~/media/ which contains image1.jpg and image2.jpg, I get the jpg files but not the directories that where dragged and dropped (in this case media/image1.jpg). I need to be able to allow drag and drop of folders so that SD cards can be uploaded and the original structure is maintained.



      ProjectAjaxController:



      @RestController("ProjectAjaxController")
      
@Validated
      
public class ProjectAjaxController extends BaseController { 
      

      
    private static final String INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD = "Invalid file supplied. Please select a file to upload. ";
      

      
    @RequestMapping("/ajax/project/upload") 
      
    public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
      
            @RequestParam("projectPath") String projectPath, 
      
            @RequestParam("file") MultipartFile file) {
      
        AjaxResponse ajaxResponse = new AjaxResponse();
      

      
        if (file == null) {
      
            this.userErrors.add(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
      
            logger.error(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
      
            ajaxResponse.setMessage(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
      
            ajaxResponse.setStatusCode(-2);
      
        } else {
      

      
            try {
      
                for (MultipartFile multipartFile: file) {
      
                    logger.info("current file " + multipartFile.getmultipartFilename());
      
                    ...
      
                }
      
            } catch (IOException ioe) {
      
                this.userErrors.add("Unable to upload files ");
      
                logger.warn("Unable to upload files. " + ioe.getMessage(), ioe);
      
                ajaxResponse.setStatusCode(-2);
      
                ajaxResponse.setMessage(String.join(" " + this.userErrors));
      
            } catch (Exception e) {
      
                this.userErrors.add("Error uploading files " + e.getMessage());
      
                logger.warn("Error uploading files. " + e.getMessage(), e);
      
                ajaxResponse.setStatusCode(-2);
      
                ajaxResponse.setMessage(String.join(" " + this.userErrors));
      
            }
      
        }
      
        return ajaxResponse;
      
    }
      

      
}


      Web content:






      jQuery(document).ready(function($) {
      

      
  $(".search-display-block").each(function() {
      
    var details = $(this).find(".portfolio-dropzone-details");
      
    var portfolioPath = details.data("portfolio-path");
      
    $(this).dropzone({
      
      url: "/ajax/project/upload",
      
      uploadMultiple: true,
      
      parallelUploads: 20,
      
      autoProcessQueue: true,
      
      createImageThumbnails: false,
      
      previewsContainer: "#template-preview",
      
      maxFilesize: 4000,
      
      timeout: 0,
      
      webkitDirectory: true,
      
      params: {
      
        'projectPath': portfolioPath
      
      },
      
      success: function(file, response) {
      
        console.dir(response);
      
        if (response == null || response.statusCode != 200) {
      
          //console.log("Error occurred uploading file");
      
          var errorMessage = (response == undefined || response.message == undefined) ? "Error occurred uploading file " : response.message;
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        } else {
      
          console.log("Succesfully uploaded file ");
      
          //console.dir(file);
      
        }
      
      },
      

      
      uploadprogress: function(file, progress, bytesSent) {
      
        var percent = round(progress, 2);
      
        var progressParent = $(file.previewElement).find(".dz-progress");
      
        var progressElement = $(file.previewElement).find(".dz-upload");
      
        progressElement.html(percent + "%");
      
        var size = progressParent.width() * (percent / 100);
      
        progressElement.width(size + "px");
      
      },
      
      //Called just before each file is sent
      
      sending: function(file, xhr, formData) {
      
        //Execute on case of timeout only
      
        xhr.ontimeout = function(e) {
      
          var errorMessage = "The server timed out transfering file " + file.name + ". Please try again or contact your administrator.";
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        };
      

      

      
      }
      
    });
      

      
  });
      

      
});

      .card {
      
  transition: 0.3s;
      
}
      

      
.portfolio-container {
      
  background-color: #1d3c5c;
      
}
      

      
.card-member-span {
      
  padding-right: 1em;
      
}
      

      
.project-dialog {
      
  overflow: auto;
      
  background-color: #1d3c5c;
      
}
      

      
.portfolio-dialog {
      
  overflow: auto;
      
  background-color: #ffffff;
      
}
      

      
.dialog {
      
  display: none;
      
}
      

      
.project-block {
      
  padding-left: 0.25em;
      
  padding-bottom: 0.25em;
      
  margin-bottom: 0;
      
  font-size: 14px;
      
  font-weight: 400;
      
  line-height: 1.42857143;
      
  white-space: nowrap;
      
  vertical-align: middle;
      
  cursor: pointer;
      
}
      

      
.project-block.focus,
      
.project-block:focus,
      
.project-block:hover {
      
  color: #333;
      
}
      

      
.project-block-primary {
      
  color: #1d3c5c;
      
  background-color: #ddd;
      
  font-weight: 700;
      
}
      

      
.list-cards {
      
  -webkit-box-flex: 1;
      
  -webkit-flex: 1 1 auto;
      
  -ms-flex: 1 1 auto;
      
  flex: 1 1 auto;
      
  overflow-y: auto;
      
  overflow-x: hidden;
      
  margin: 0 4px;
      
  padding: 0 4px;
      
  z-index: 1;
      
  min-height: 0;
      
  border-radius: 1em;
      
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      
}
      

      
.portfolio-card {
      
  width: 100%;
      
  min-height: 3em;
      
  background-color: #ddd;
      
  color: #000;
      
  padding-left: 3px;
      
}
      

      
.list-card-members {
      
  background-color: #ffffff;
      
  padding: 0.5em;
      
}
      

      
.list-card-section {}
      

      
.list-card-project-section {
      
  background-color: #ffffff;
      
}
      

      
.list-card {
      
  margin-bottom: 0.5em;
      
  background-color: #1d3c5c;
      
  border-radius: 1em;
      
  overflow: hidden;
      
}
      

      

      
/* Add rounded corners to the top left and the top right corner of the image */
      

      
img {
      
  vertical-align: inherit;
      
}
      

      

      
/* On mouse-over, add a deeper shadow */
      

      
.card:hover {
      
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      
}
      

      

      
/* Add some padding inside the card container */
      

      
.container {
      
  padding: 2px 16px;
      
}
      

      
#board {
      
  /*     user-select: none; */
      
  display: flex;
      
  white-space: nowrap;
      
  margin-bottom: 10px;
      
  overflow-x: auto;
      
  overflow-y: hidden;
      
  padding-bottom: 10px;
      
  position: relative;
      
  top: 0;
      
  right: 0;
      
  bottom: 0;
      
  left: 0;
      
}
      

      
.list {
      
  /*  background-color: #5b5353; */
      
  background-color: #1d3c5c;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  max-height: 100%;
      
  position: relative;
      
  white-space: normal;
      
  margin-top: 2px;
      
  padding-left: 5px;
      
  padding-right: 5px;
      
}
      

      
.board-menu-container,
      
.list {
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
}
      

      
.list-wrapper {
      
  width: 270px;
      
  margin: 0 5px;
      
  height: 100%;
      
  display: inline-block;
      
  vertical-align: top;
      
}
      

      
.search-filter {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
  display: none;
      
  font-size: 12px;
      
}
      

      
.search-filter-block {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
}
      

      
.search-filter-tag-block {
      
  margin-top: 5px;
      
}
      

      
.search-filter-select {
      
  height: 100%;
      
  font-size: 12px;
      
}
      

      
.search-colour-button {
      
  color: white;
      
  padding: 0.5em 0.5em;
      
  text-align: center;
      
  text-decoration: none;
      
  display: inline-block;
      
  font-size: 12px;
      
  margin: 4px 2px;
      
  cursor: pointer;
      
  border-radius: 1em;
      
  -webkit-border-radius: 1em;
      
  -moz-border-radius: 1em;
      
}
      

      
.search-colour-button.active {
      
  box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;
      
  font-weight: 800;
      
}
      

      
.project-card {
      
  position: relative;
      
  display: -webkit-box;
      
  display: -webkit-flex;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  border-radius: 1em;
      
  overflow: hidden;
      
  background-color: #1d3c5c;
      
  min-height: 10%;
      
  max-height: 90%;
      
  min-width: 10%;
      
  max-width: 90%;
      
  margin: 1em;
      
}
      

      
.project-card-content {
      
  background-color: #fff;
      
}
      

      
.portfolio-card-title {
      
  font-weight: 600;
      
  padding: 0.5em;
      
  cursor: pointer;
      
}
      

      
.portfolio-projects-title {
      
  font-weight: 600;
      
}
      

      
.search-tags-form {
      
  margin: 4px 2px;
      
}
      

      
.list-header {
      
  color: #ddd;
      
}
      

      
.list-header-name-assist {
      
  text-shadow: 2px 2px 4px #000000;
      
}
      

      
hr {
      
  display: block;
      
  height: 1px;
      
  border: 0;
      
  border-top: 1px solid #ccc;
      
  margin: 0px;
      
  padding: 0;
      
}
      

      
.portfolio-dialog {
      
  background-color: #1d3c5c;
      
  color: #fff;
      
}
      

      
.portfolio-dialog-content {
      
  background-color: #1d3c5c;
      
  color: #ffffff;
      
}
      

      
dl {
      
  margin-bottom: 3px;
      
}
      

      
.bg-dark {
      
  color: #333333;
      
  background-color: #ffffff;
      
}
      

      
.portfolio-card-content {
      
  margin-bottom: 0.5em;
      
  border-radius: 1em;
      
  padding-top: 0.5em;
      
  padding-bottom: 1em;
      
}
      

      
.fps-tag-block {
      
  padding-left: 1em;
      
  padding-right: 1em;
      
}
      

      
.portfolio-icon-list {
      
  color: #000;
      
}
      

      
.ui-dialog {
      
  background-color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog-buttonpane {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog .ui-dialog-title {
      
  text-align: center;
      
}
      

      
.ui-dialog-buttonset {
      
  color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar-close {
      
  color: #1d3c5c;
      
  content: "X";
      
}
      

      
.ui-widget-content a {
      
  color: #333333;
      
}
      

      
.portfolio-toggle:before {
      
  content: "▸";
      
}
      

      
.portfolio-toggle.collapsed:before {
      
  content: "▾";
      
}
      

      
.project-block-rounded {
      
  border-radius: 0.5em;
      
  padding: 0.25em;
      
  margin: 0.25em;
      
}
      

      
.open-portfolio-dialog-btn {
      
  cursor: pointer;
      
}
      

      
.portfolio-overview-btn {
      
  cursor: pointer;
      
}
      

      
.media-capture-btn {
      
  cursor: pointer;
      
}
      

      
#search-filter-block {
      
  cursor: pointer;
      
}
      

      
.dl-horizontal dt {
      
  text-align: left;
      
}
      

      
.dl-horizontal dd {
      
  width: auto;
      
}
      

      
.portfolio-card-filter {
      
  padding-left: 1em;
      
}
      

      
.portfolio-metadata {
      
  color: #000;
      
}
      

      
.portfolio-overview {
      
  color: #000;
      
}
      

      
.fixed-header {
      
  position: fixed;
      
  top: 0em;
      
  background-color: #1d3c5c;
      
  padding: 1em;
      
  width: 270px;
      
  text-align: center;
      
}
      

      
.sortable-list {
      
  padding-bottom: 100px;
      
}
      

      
.search-highlighter {
      
  border: 2px solid red;
      
}
      

      
.portfolio-specific-btn {
      
  padding-right: 0.5em;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1:jquery.min.js/jquery.min.js"></script>
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
      

      
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
      

      
<div class="container-fluid" id="core-content">
      
  <div class="col-xs-12 portfolio-page">
      
    <div class="col-xs-2 " style="">
      
      <div>Success/Error info goes here</div>
      
      <div id="dropzone-status-updates-block">
      
        <div id="dropzone-error-messsage-block"></div>
      
        <div id="dropzone-progress-block"></div>
      
      </div>
      
      <div id="template-preview"></div>
      
    </div>
      
    <div class="col-xs-10 portfolio-board-container">
      
      <div id="portfolio-container" class="container-fluid portfolio-container" style="">
      
        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">
      
          <div class="board-canvas">
      
            <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Approval
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">
      
                    <div data-portfolio-path="Tennis" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Tennis"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Tennis"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      

      
                            </div>
      

      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      
                    <div data-portfolio-path="Badminton" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Badminton"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Badminton"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Badminton
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Approved
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Editing in Progress
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Graphics
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Completed
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
            </div>
      
          </div>
      
          <div class="spacer-sml"></div>
      

      
        </form>
      

      
      </div>
      
    </div>
      
  </div>
      
  <div class="row">
      
    <div class="spacer-sml"></div>
      
  </div>
      
</div>





      I am testing this on chrome and realise that not all browsers support webkit. I have webkitdirectory set on the input field. I just don't know how to get the folder name appended to the file name.



      I am just looking for a way to get the folders that are dragged and dropped not the file system folders.



      So I finally worked out how I could get the directory name passed with the filename using the dropzone function renameFile:



      renameFile: function (file) {
      
    let newFilename = file.fullPath;
      
    return newFilename;
      
},


      Yeah! Great or so I thought. Now the file is considered a folder and not a file and when I do mkdirs on the file it creates a folder as the filename e.g. media/image1.jpg, I have also tried createNewFile which creates a directory with the filename. When I then try to read the stream using BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream( projectFilePath )); I get the error:



      java.io.FileNotFoundException: /Volumes/share/Project/Tennis/media/image1.jpg (Invalid argument)





      java jquery spring-mvc dropzone.js







      share|improve this question
















      I am able to upload files and files within folders using dropzone.js to my Spring Controller but I don't get the files with their dragged folders. For example, if I drag and dropped the directory ~/media/ which contains image1.jpg and image2.jpg, I get the jpg files but not the directories that where dragged and dropped (in this case media/image1.jpg). I need to be able to allow drag and drop of folders so that SD cards can be uploaded and the original structure is maintained.



      ProjectAjaxController:



      @RestController("ProjectAjaxController")
      
@Validated
      
public class ProjectAjaxController extends BaseController { 
      

      
    private static final String INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD = "Invalid file supplied. Please select a file to upload. ";
      

      
    @RequestMapping("/ajax/project/upload") 
      
    public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
      
            @RequestParam("projectPath") String projectPath, 
      
            @RequestParam("file") MultipartFile file) {
      
        AjaxResponse ajaxResponse = new AjaxResponse();
      

      
        if (file == null) {
      
            this.userErrors.add(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
      
            logger.error(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
      
            ajaxResponse.setMessage(INVALID_FILE_SUPPLIED_PLEASE_SELECT_A_FILE_TO_UPLOAD);
      
            ajaxResponse.setStatusCode(-2);
      
        } else {
      

      
            try {
      
                for (MultipartFile multipartFile: file) {
      
                    logger.info("current file " + multipartFile.getmultipartFilename());
      
                    ...
      
                }
      
            } catch (IOException ioe) {
      
                this.userErrors.add("Unable to upload files ");
      
                logger.warn("Unable to upload files. " + ioe.getMessage(), ioe);
      
                ajaxResponse.setStatusCode(-2);
      
                ajaxResponse.setMessage(String.join(" " + this.userErrors));
      
            } catch (Exception e) {
      
                this.userErrors.add("Error uploading files " + e.getMessage());
      
                logger.warn("Error uploading files. " + e.getMessage(), e);
      
                ajaxResponse.setStatusCode(-2);
      
                ajaxResponse.setMessage(String.join(" " + this.userErrors));
      
            }
      
        }
      
        return ajaxResponse;
      
    }
      

      
}


      Web content:






      jQuery(document).ready(function($) {
      

      
  $(".search-display-block").each(function() {
      
    var details = $(this).find(".portfolio-dropzone-details");
      
    var portfolioPath = details.data("portfolio-path");
      
    $(this).dropzone({
      
      url: "/ajax/project/upload",
      
      uploadMultiple: true,
      
      parallelUploads: 20,
      
      autoProcessQueue: true,
      
      createImageThumbnails: false,
      
      previewsContainer: "#template-preview",
      
      maxFilesize: 4000,
      
      timeout: 0,
      
      webkitDirectory: true,
      
      params: {
      
        'projectPath': portfolioPath
      
      },
      
      success: function(file, response) {
      
        console.dir(response);
      
        if (response == null || response.statusCode != 200) {
      
          //console.log("Error occurred uploading file");
      
          var errorMessage = (response == undefined || response.message == undefined) ? "Error occurred uploading file " : response.message;
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        } else {
      
          console.log("Succesfully uploaded file ");
      
          //console.dir(file);
      
        }
      
      },
      

      
      uploadprogress: function(file, progress, bytesSent) {
      
        var percent = round(progress, 2);
      
        var progressParent = $(file.previewElement).find(".dz-progress");
      
        var progressElement = $(file.previewElement).find(".dz-upload");
      
        progressElement.html(percent + "%");
      
        var size = progressParent.width() * (percent / 100);
      
        progressElement.width(size + "px");
      
      },
      
      //Called just before each file is sent
      
      sending: function(file, xhr, formData) {
      
        //Execute on case of timeout only
      
        xhr.ontimeout = function(e) {
      
          var errorMessage = "The server timed out transfering file " + file.name + ". Please try again or contact your administrator.";
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        };
      

      

      
      }
      
    });
      

      
  });
      

      
});

      .card {
      
  transition: 0.3s;
      
}
      

      
.portfolio-container {
      
  background-color: #1d3c5c;
      
}
      

      
.card-member-span {
      
  padding-right: 1em;
      
}
      

      
.project-dialog {
      
  overflow: auto;
      
  background-color: #1d3c5c;
      
}
      

      
.portfolio-dialog {
      
  overflow: auto;
      
  background-color: #ffffff;
      
}
      

      
.dialog {
      
  display: none;
      
}
      

      
.project-block {
      
  padding-left: 0.25em;
      
  padding-bottom: 0.25em;
      
  margin-bottom: 0;
      
  font-size: 14px;
      
  font-weight: 400;
      
  line-height: 1.42857143;
      
  white-space: nowrap;
      
  vertical-align: middle;
      
  cursor: pointer;
      
}
      

      
.project-block.focus,
      
.project-block:focus,
      
.project-block:hover {
      
  color: #333;
      
}
      

      
.project-block-primary {
      
  color: #1d3c5c;
      
  background-color: #ddd;
      
  font-weight: 700;
      
}
      

      
.list-cards {
      
  -webkit-box-flex: 1;
      
  -webkit-flex: 1 1 auto;
      
  -ms-flex: 1 1 auto;
      
  flex: 1 1 auto;
      
  overflow-y: auto;
      
  overflow-x: hidden;
      
  margin: 0 4px;
      
  padding: 0 4px;
      
  z-index: 1;
      
  min-height: 0;
      
  border-radius: 1em;
      
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      
}
      

      
.portfolio-card {
      
  width: 100%;
      
  min-height: 3em;
      
  background-color: #ddd;
      
  color: #000;
      
  padding-left: 3px;
      
}
      

      
.list-card-members {
      
  background-color: #ffffff;
      
  padding: 0.5em;
      
}
      

      
.list-card-section {}
      

      
.list-card-project-section {
      
  background-color: #ffffff;
      
}
      

      
.list-card {
      
  margin-bottom: 0.5em;
      
  background-color: #1d3c5c;
      
  border-radius: 1em;
      
  overflow: hidden;
      
}
      

      

      
/* Add rounded corners to the top left and the top right corner of the image */
      

      
img {
      
  vertical-align: inherit;
      
}
      

      

      
/* On mouse-over, add a deeper shadow */
      

      
.card:hover {
      
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      
}
      

      

      
/* Add some padding inside the card container */
      

      
.container {
      
  padding: 2px 16px;
      
}
      

      
#board {
      
  /*     user-select: none; */
      
  display: flex;
      
  white-space: nowrap;
      
  margin-bottom: 10px;
      
  overflow-x: auto;
      
  overflow-y: hidden;
      
  padding-bottom: 10px;
      
  position: relative;
      
  top: 0;
      
  right: 0;
      
  bottom: 0;
      
  left: 0;
      
}
      

      
.list {
      
  /*  background-color: #5b5353; */
      
  background-color: #1d3c5c;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  max-height: 100%;
      
  position: relative;
      
  white-space: normal;
      
  margin-top: 2px;
      
  padding-left: 5px;
      
  padding-right: 5px;
      
}
      

      
.board-menu-container,
      
.list {
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
}
      

      
.list-wrapper {
      
  width: 270px;
      
  margin: 0 5px;
      
  height: 100%;
      
  display: inline-block;
      
  vertical-align: top;
      
}
      

      
.search-filter {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
  display: none;
      
  font-size: 12px;
      
}
      

      
.search-filter-block {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
}
      

      
.search-filter-tag-block {
      
  margin-top: 5px;
      
}
      

      
.search-filter-select {
      
  height: 100%;
      
  font-size: 12px;
      
}
      

      
.search-colour-button {
      
  color: white;
      
  padding: 0.5em 0.5em;
      
  text-align: center;
      
  text-decoration: none;
      
  display: inline-block;
      
  font-size: 12px;
      
  margin: 4px 2px;
      
  cursor: pointer;
      
  border-radius: 1em;
      
  -webkit-border-radius: 1em;
      
  -moz-border-radius: 1em;
      
}
      

      
.search-colour-button.active {
      
  box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;
      
  font-weight: 800;
      
}
      

      
.project-card {
      
  position: relative;
      
  display: -webkit-box;
      
  display: -webkit-flex;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  border-radius: 1em;
      
  overflow: hidden;
      
  background-color: #1d3c5c;
      
  min-height: 10%;
      
  max-height: 90%;
      
  min-width: 10%;
      
  max-width: 90%;
      
  margin: 1em;
      
}
      

      
.project-card-content {
      
  background-color: #fff;
      
}
      

      
.portfolio-card-title {
      
  font-weight: 600;
      
  padding: 0.5em;
      
  cursor: pointer;
      
}
      

      
.portfolio-projects-title {
      
  font-weight: 600;
      
}
      

      
.search-tags-form {
      
  margin: 4px 2px;
      
}
      

      
.list-header {
      
  color: #ddd;
      
}
      

      
.list-header-name-assist {
      
  text-shadow: 2px 2px 4px #000000;
      
}
      

      
hr {
      
  display: block;
      
  height: 1px;
      
  border: 0;
      
  border-top: 1px solid #ccc;
      
  margin: 0px;
      
  padding: 0;
      
}
      

      
.portfolio-dialog {
      
  background-color: #1d3c5c;
      
  color: #fff;
      
}
      

      
.portfolio-dialog-content {
      
  background-color: #1d3c5c;
      
  color: #ffffff;
      
}
      

      
dl {
      
  margin-bottom: 3px;
      
}
      

      
.bg-dark {
      
  color: #333333;
      
  background-color: #ffffff;
      
}
      

      
.portfolio-card-content {
      
  margin-bottom: 0.5em;
      
  border-radius: 1em;
      
  padding-top: 0.5em;
      
  padding-bottom: 1em;
      
}
      

      
.fps-tag-block {
      
  padding-left: 1em;
      
  padding-right: 1em;
      
}
      

      
.portfolio-icon-list {
      
  color: #000;
      
}
      

      
.ui-dialog {
      
  background-color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog-buttonpane {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog .ui-dialog-title {
      
  text-align: center;
      
}
      

      
.ui-dialog-buttonset {
      
  color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar-close {
      
  color: #1d3c5c;
      
  content: "X";
      
}
      

      
.ui-widget-content a {
      
  color: #333333;
      
}
      

      
.portfolio-toggle:before {
      
  content: "▸";
      
}
      

      
.portfolio-toggle.collapsed:before {
      
  content: "▾";
      
}
      

      
.project-block-rounded {
      
  border-radius: 0.5em;
      
  padding: 0.25em;
      
  margin: 0.25em;
      
}
      

      
.open-portfolio-dialog-btn {
      
  cursor: pointer;
      
}
      

      
.portfolio-overview-btn {
      
  cursor: pointer;
      
}
      

      
.media-capture-btn {
      
  cursor: pointer;
      
}
      

      
#search-filter-block {
      
  cursor: pointer;
      
}
      

      
.dl-horizontal dt {
      
  text-align: left;
      
}
      

      
.dl-horizontal dd {
      
  width: auto;
      
}
      

      
.portfolio-card-filter {
      
  padding-left: 1em;
      
}
      

      
.portfolio-metadata {
      
  color: #000;
      
}
      

      
.portfolio-overview {
      
  color: #000;
      
}
      

      
.fixed-header {
      
  position: fixed;
      
  top: 0em;
      
  background-color: #1d3c5c;
      
  padding: 1em;
      
  width: 270px;
      
  text-align: center;
      
}
      

      
.sortable-list {
      
  padding-bottom: 100px;
      
}
      

      
.search-highlighter {
      
  border: 2px solid red;
      
}
      

      
.portfolio-specific-btn {
      
  padding-right: 0.5em;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1:jquery.min.js/jquery.min.js"></script>
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
      

      
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
      

      
<div class="container-fluid" id="core-content">
      
  <div class="col-xs-12 portfolio-page">
      
    <div class="col-xs-2 " style="">
      
      <div>Success/Error info goes here</div>
      
      <div id="dropzone-status-updates-block">
      
        <div id="dropzone-error-messsage-block"></div>
      
        <div id="dropzone-progress-block"></div>
      
      </div>
      
      <div id="template-preview"></div>
      
    </div>
      
    <div class="col-xs-10 portfolio-board-container">
      
      <div id="portfolio-container" class="container-fluid portfolio-container" style="">
      
        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">
      
          <div class="board-canvas">
      
            <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Approval
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">
      
                    <div data-portfolio-path="Tennis" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Tennis"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Tennis"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      

      
                            </div>
      

      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      
                    <div data-portfolio-path="Badminton" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Badminton"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Badminton"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Badminton
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Approved
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Editing in Progress
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Graphics
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Completed
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
            </div>
      
          </div>
      
          <div class="spacer-sml"></div>
      

      
        </form>
      

      
      </div>
      
    </div>
      
  </div>
      
  <div class="row">
      
    <div class="spacer-sml"></div>
      
  </div>
      
</div>





      I am testing this on chrome and realise that not all browsers support webkit. I have webkitdirectory set on the input field. I just don't know how to get the folder name appended to the file name.



      I am just looking for a way to get the folders that are dragged and dropped not the file system folders.



      So I finally worked out how I could get the directory name passed with the filename using the dropzone function renameFile:



      renameFile: function (file) {
      
    let newFilename = file.fullPath;
      
    return newFilename;
      
},


      Yeah! Great or so I thought. Now the file is considered a folder and not a file and when I do mkdirs on the file it creates a folder as the filename e.g. media/image1.jpg, I have also tried createNewFile which creates a directory with the filename. When I then try to read the stream using BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream( projectFilePath )); I get the error:



      java.io.FileNotFoundException: /Volumes/share/Project/Tennis/media/image1.jpg (Invalid argument)
      






      jQuery(document).ready(function($) {
      

      
  $(".search-display-block").each(function() {
      
    var details = $(this).find(".portfolio-dropzone-details");
      
    var portfolioPath = details.data("portfolio-path");
      
    $(this).dropzone({
      
      url: "/ajax/project/upload",
      
      uploadMultiple: true,
      
      parallelUploads: 20,
      
      autoProcessQueue: true,
      
      createImageThumbnails: false,
      
      previewsContainer: "#template-preview",
      
      maxFilesize: 4000,
      
      timeout: 0,
      
      webkitDirectory: true,
      
      params: {
      
        'projectPath': portfolioPath
      
      },
      
      success: function(file, response) {
      
        console.dir(response);
      
        if (response == null || response.statusCode != 200) {
      
          //console.log("Error occurred uploading file");
      
          var errorMessage = (response == undefined || response.message == undefined) ? "Error occurred uploading file " : response.message;
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        } else {
      
          console.log("Succesfully uploaded file ");
      
          //console.dir(file);
      
        }
      
      },
      

      
      uploadprogress: function(file, progress, bytesSent) {
      
        var percent = round(progress, 2);
      
        var progressParent = $(file.previewElement).find(".dz-progress");
      
        var progressElement = $(file.previewElement).find(".dz-upload");
      
        progressElement.html(percent + "%");
      
        var size = progressParent.width() * (percent / 100);
      
        progressElement.width(size + "px");
      
      },
      
      //Called just before each file is sent
      
      sending: function(file, xhr, formData) {
      
        //Execute on case of timeout only
      
        xhr.ontimeout = function(e) {
      
          var errorMessage = "The server timed out transfering file " + file.name + ". Please try again or contact your administrator.";
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        };
      

      

      
      }
      
    });
      

      
  });
      

      
});

      .card {
      
  transition: 0.3s;
      
}
      

      
.portfolio-container {
      
  background-color: #1d3c5c;
      
}
      

      
.card-member-span {
      
  padding-right: 1em;
      
}
      

      
.project-dialog {
      
  overflow: auto;
      
  background-color: #1d3c5c;
      
}
      

      
.portfolio-dialog {
      
  overflow: auto;
      
  background-color: #ffffff;
      
}
      

      
.dialog {
      
  display: none;
      
}
      

      
.project-block {
      
  padding-left: 0.25em;
      
  padding-bottom: 0.25em;
      
  margin-bottom: 0;
      
  font-size: 14px;
      
  font-weight: 400;
      
  line-height: 1.42857143;
      
  white-space: nowrap;
      
  vertical-align: middle;
      
  cursor: pointer;
      
}
      

      
.project-block.focus,
      
.project-block:focus,
      
.project-block:hover {
      
  color: #333;
      
}
      

      
.project-block-primary {
      
  color: #1d3c5c;
      
  background-color: #ddd;
      
  font-weight: 700;
      
}
      

      
.list-cards {
      
  -webkit-box-flex: 1;
      
  -webkit-flex: 1 1 auto;
      
  -ms-flex: 1 1 auto;
      
  flex: 1 1 auto;
      
  overflow-y: auto;
      
  overflow-x: hidden;
      
  margin: 0 4px;
      
  padding: 0 4px;
      
  z-index: 1;
      
  min-height: 0;
      
  border-radius: 1em;
      
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      
}
      

      
.portfolio-card {
      
  width: 100%;
      
  min-height: 3em;
      
  background-color: #ddd;
      
  color: #000;
      
  padding-left: 3px;
      
}
      

      
.list-card-members {
      
  background-color: #ffffff;
      
  padding: 0.5em;
      
}
      

      
.list-card-section {}
      

      
.list-card-project-section {
      
  background-color: #ffffff;
      
}
      

      
.list-card {
      
  margin-bottom: 0.5em;
      
  background-color: #1d3c5c;
      
  border-radius: 1em;
      
  overflow: hidden;
      
}
      

      

      
/* Add rounded corners to the top left and the top right corner of the image */
      

      
img {
      
  vertical-align: inherit;
      
}
      

      

      
/* On mouse-over, add a deeper shadow */
      

      
.card:hover {
      
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      
}
      

      

      
/* Add some padding inside the card container */
      

      
.container {
      
  padding: 2px 16px;
      
}
      

      
#board {
      
  /*     user-select: none; */
      
  display: flex;
      
  white-space: nowrap;
      
  margin-bottom: 10px;
      
  overflow-x: auto;
      
  overflow-y: hidden;
      
  padding-bottom: 10px;
      
  position: relative;
      
  top: 0;
      
  right: 0;
      
  bottom: 0;
      
  left: 0;
      
}
      

      
.list {
      
  /*  background-color: #5b5353; */
      
  background-color: #1d3c5c;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  max-height: 100%;
      
  position: relative;
      
  white-space: normal;
      
  margin-top: 2px;
      
  padding-left: 5px;
      
  padding-right: 5px;
      
}
      

      
.board-menu-container,
      
.list {
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
}
      

      
.list-wrapper {
      
  width: 270px;
      
  margin: 0 5px;
      
  height: 100%;
      
  display: inline-block;
      
  vertical-align: top;
      
}
      

      
.search-filter {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
  display: none;
      
  font-size: 12px;
      
}
      

      
.search-filter-block {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
}
      

      
.search-filter-tag-block {
      
  margin-top: 5px;
      
}
      

      
.search-filter-select {
      
  height: 100%;
      
  font-size: 12px;
      
}
      

      
.search-colour-button {
      
  color: white;
      
  padding: 0.5em 0.5em;
      
  text-align: center;
      
  text-decoration: none;
      
  display: inline-block;
      
  font-size: 12px;
      
  margin: 4px 2px;
      
  cursor: pointer;
      
  border-radius: 1em;
      
  -webkit-border-radius: 1em;
      
  -moz-border-radius: 1em;
      
}
      

      
.search-colour-button.active {
      
  box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;
      
  font-weight: 800;
      
}
      

      
.project-card {
      
  position: relative;
      
  display: -webkit-box;
      
  display: -webkit-flex;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  border-radius: 1em;
      
  overflow: hidden;
      
  background-color: #1d3c5c;
      
  min-height: 10%;
      
  max-height: 90%;
      
  min-width: 10%;
      
  max-width: 90%;
      
  margin: 1em;
      
}
      

      
.project-card-content {
      
  background-color: #fff;
      
}
      

      
.portfolio-card-title {
      
  font-weight: 600;
      
  padding: 0.5em;
      
  cursor: pointer;
      
}
      

      
.portfolio-projects-title {
      
  font-weight: 600;
      
}
      

      
.search-tags-form {
      
  margin: 4px 2px;
      
}
      

      
.list-header {
      
  color: #ddd;
      
}
      

      
.list-header-name-assist {
      
  text-shadow: 2px 2px 4px #000000;
      
}
      

      
hr {
      
  display: block;
      
  height: 1px;
      
  border: 0;
      
  border-top: 1px solid #ccc;
      
  margin: 0px;
      
  padding: 0;
      
}
      

      
.portfolio-dialog {
      
  background-color: #1d3c5c;
      
  color: #fff;
      
}
      

      
.portfolio-dialog-content {
      
  background-color: #1d3c5c;
      
  color: #ffffff;
      
}
      

      
dl {
      
  margin-bottom: 3px;
      
}
      

      
.bg-dark {
      
  color: #333333;
      
  background-color: #ffffff;
      
}
      

      
.portfolio-card-content {
      
  margin-bottom: 0.5em;
      
  border-radius: 1em;
      
  padding-top: 0.5em;
      
  padding-bottom: 1em;
      
}
      

      
.fps-tag-block {
      
  padding-left: 1em;
      
  padding-right: 1em;
      
}
      

      
.portfolio-icon-list {
      
  color: #000;
      
}
      

      
.ui-dialog {
      
  background-color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog-buttonpane {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog .ui-dialog-title {
      
  text-align: center;
      
}
      

      
.ui-dialog-buttonset {
      
  color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar-close {
      
  color: #1d3c5c;
      
  content: "X";
      
}
      

      
.ui-widget-content a {
      
  color: #333333;
      
}
      

      
.portfolio-toggle:before {
      
  content: "▸";
      
}
      

      
.portfolio-toggle.collapsed:before {
      
  content: "▾";
      
}
      

      
.project-block-rounded {
      
  border-radius: 0.5em;
      
  padding: 0.25em;
      
  margin: 0.25em;
      
}
      

      
.open-portfolio-dialog-btn {
      
  cursor: pointer;
      
}
      

      
.portfolio-overview-btn {
      
  cursor: pointer;
      
}
      

      
.media-capture-btn {
      
  cursor: pointer;
      
}
      

      
#search-filter-block {
      
  cursor: pointer;
      
}
      

      
.dl-horizontal dt {
      
  text-align: left;
      
}
      

      
.dl-horizontal dd {
      
  width: auto;
      
}
      

      
.portfolio-card-filter {
      
  padding-left: 1em;
      
}
      

      
.portfolio-metadata {
      
  color: #000;
      
}
      

      
.portfolio-overview {
      
  color: #000;
      
}
      

      
.fixed-header {
      
  position: fixed;
      
  top: 0em;
      
  background-color: #1d3c5c;
      
  padding: 1em;
      
  width: 270px;
      
  text-align: center;
      
}
      

      
.sortable-list {
      
  padding-bottom: 100px;
      
}
      

      
.search-highlighter {
      
  border: 2px solid red;
      
}
      

      
.portfolio-specific-btn {
      
  padding-right: 0.5em;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1:jquery.min.js/jquery.min.js"></script>
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
      

      
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
      

      
<div class="container-fluid" id="core-content">
      
  <div class="col-xs-12 portfolio-page">
      
    <div class="col-xs-2 " style="">
      
      <div>Success/Error info goes here</div>
      
      <div id="dropzone-status-updates-block">
      
        <div id="dropzone-error-messsage-block"></div>
      
        <div id="dropzone-progress-block"></div>
      
      </div>
      
      <div id="template-preview"></div>
      
    </div>
      
    <div class="col-xs-10 portfolio-board-container">
      
      <div id="portfolio-container" class="container-fluid portfolio-container" style="">
      
        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">
      
          <div class="board-canvas">
      
            <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Approval
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">
      
                    <div data-portfolio-path="Tennis" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Tennis"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Tennis"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      

      
                            </div>
      

      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      
                    <div data-portfolio-path="Badminton" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Badminton"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Badminton"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Badminton
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Approved
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Editing in Progress
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Graphics
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Completed
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
            </div>
      
          </div>
      
          <div class="spacer-sml"></div>
      

      
        </form>
      

      
      </div>
      
    </div>
      
  </div>
      
  <div class="row">
      
    <div class="spacer-sml"></div>
      
  </div>
      
</div>





      jQuery(document).ready(function($) {
      

      
  $(".search-display-block").each(function() {
      
    var details = $(this).find(".portfolio-dropzone-details");
      
    var portfolioPath = details.data("portfolio-path");
      
    $(this).dropzone({
      
      url: "/ajax/project/upload",
      
      uploadMultiple: true,
      
      parallelUploads: 20,
      
      autoProcessQueue: true,
      
      createImageThumbnails: false,
      
      previewsContainer: "#template-preview",
      
      maxFilesize: 4000,
      
      timeout: 0,
      
      webkitDirectory: true,
      
      params: {
      
        'projectPath': portfolioPath
      
      },
      
      success: function(file, response) {
      
        console.dir(response);
      
        if (response == null || response.statusCode != 200) {
      
          //console.log("Error occurred uploading file");
      
          var errorMessage = (response == undefined || response.message == undefined) ? "Error occurred uploading file " : response.message;
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        } else {
      
          console.log("Succesfully uploaded file ");
      
          //console.dir(file);
      
        }
      
      },
      

      
      uploadprogress: function(file, progress, bytesSent) {
      
        var percent = round(progress, 2);
      
        var progressParent = $(file.previewElement).find(".dz-progress");
      
        var progressElement = $(file.previewElement).find(".dz-upload");
      
        progressElement.html(percent + "%");
      
        var size = progressParent.width() * (percent / 100);
      
        progressElement.width(size + "px");
      
      },
      
      //Called just before each file is sent
      
      sending: function(file, xhr, formData) {
      
        //Execute on case of timeout only
      
        xhr.ontimeout = function(e) {
      
          var errorMessage = "The server timed out transfering file " + file.name + ". Please try again or contact your administrator.";
      
          $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
      
        };
      

      

      
      }
      
    });
      

      
  });
      

      
});

      .card {
      
  transition: 0.3s;
      
}
      

      
.portfolio-container {
      
  background-color: #1d3c5c;
      
}
      

      
.card-member-span {
      
  padding-right: 1em;
      
}
      

      
.project-dialog {
      
  overflow: auto;
      
  background-color: #1d3c5c;
      
}
      

      
.portfolio-dialog {
      
  overflow: auto;
      
  background-color: #ffffff;
      
}
      

      
.dialog {
      
  display: none;
      
}
      

      
.project-block {
      
  padding-left: 0.25em;
      
  padding-bottom: 0.25em;
      
  margin-bottom: 0;
      
  font-size: 14px;
      
  font-weight: 400;
      
  line-height: 1.42857143;
      
  white-space: nowrap;
      
  vertical-align: middle;
      
  cursor: pointer;
      
}
      

      
.project-block.focus,
      
.project-block:focus,
      
.project-block:hover {
      
  color: #333;
      
}
      

      
.project-block-primary {
      
  color: #1d3c5c;
      
  background-color: #ddd;
      
  font-weight: 700;
      
}
      

      
.list-cards {
      
  -webkit-box-flex: 1;
      
  -webkit-flex: 1 1 auto;
      
  -ms-flex: 1 1 auto;
      
  flex: 1 1 auto;
      
  overflow-y: auto;
      
  overflow-x: hidden;
      
  margin: 0 4px;
      
  padding: 0 4px;
      
  z-index: 1;
      
  min-height: 0;
      
  border-radius: 1em;
      
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      
}
      

      
.portfolio-card {
      
  width: 100%;
      
  min-height: 3em;
      
  background-color: #ddd;
      
  color: #000;
      
  padding-left: 3px;
      
}
      

      
.list-card-members {
      
  background-color: #ffffff;
      
  padding: 0.5em;
      
}
      

      
.list-card-section {}
      

      
.list-card-project-section {
      
  background-color: #ffffff;
      
}
      

      
.list-card {
      
  margin-bottom: 0.5em;
      
  background-color: #1d3c5c;
      
  border-radius: 1em;
      
  overflow: hidden;
      
}
      

      

      
/* Add rounded corners to the top left and the top right corner of the image */
      

      
img {
      
  vertical-align: inherit;
      
}
      

      

      
/* On mouse-over, add a deeper shadow */
      

      
.card:hover {
      
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      
}
      

      

      
/* Add some padding inside the card container */
      

      
.container {
      
  padding: 2px 16px;
      
}
      

      
#board {
      
  /*     user-select: none; */
      
  display: flex;
      
  white-space: nowrap;
      
  margin-bottom: 10px;
      
  overflow-x: auto;
      
  overflow-y: hidden;
      
  padding-bottom: 10px;
      
  position: relative;
      
  top: 0;
      
  right: 0;
      
  bottom: 0;
      
  left: 0;
      
}
      

      
.list {
      
  /*  background-color: #5b5353; */
      
  background-color: #1d3c5c;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  max-height: 100%;
      
  position: relative;
      
  white-space: normal;
      
  margin-top: 2px;
      
  padding-left: 5px;
      
  padding-right: 5px;
      
}
      

      
.board-menu-container,
      
.list {
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
}
      

      
.list-wrapper {
      
  width: 270px;
      
  margin: 0 5px;
      
  height: 100%;
      
  display: inline-block;
      
  vertical-align: top;
      
}
      

      
.search-filter {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
  display: none;
      
  font-size: 12px;
      
}
      

      
.search-filter-block {
      
  padding-top: 5px;
      
  padding-bottom: 5px;
      
}
      

      
.search-filter-tag-block {
      
  margin-top: 5px;
      
}
      

      
.search-filter-select {
      
  height: 100%;
      
  font-size: 12px;
      
}
      

      
.search-colour-button {
      
  color: white;
      
  padding: 0.5em 0.5em;
      
  text-align: center;
      
  text-decoration: none;
      
  display: inline-block;
      
  font-size: 12px;
      
  margin: 4px 2px;
      
  cursor: pointer;
      
  border-radius: 1em;
      
  -webkit-border-radius: 1em;
      
  -moz-border-radius: 1em;
      
}
      

      
.search-colour-button.active {
      
  box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;
      
  font-weight: 800;
      
}
      

      
.project-card {
      
  position: relative;
      
  display: -webkit-box;
      
  display: -webkit-flex;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -webkit-flex-direction: column;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  border-radius: 1em;
      
  overflow: hidden;
      
  background-color: #1d3c5c;
      
  min-height: 10%;
      
  max-height: 90%;
      
  min-width: 10%;
      
  max-width: 90%;
      
  margin: 1em;
      
}
      

      
.project-card-content {
      
  background-color: #fff;
      
}
      

      
.portfolio-card-title {
      
  font-weight: 600;
      
  padding: 0.5em;
      
  cursor: pointer;
      
}
      

      
.portfolio-projects-title {
      
  font-weight: 600;
      
}
      

      
.search-tags-form {
      
  margin: 4px 2px;
      
}
      

      
.list-header {
      
  color: #ddd;
      
}
      

      
.list-header-name-assist {
      
  text-shadow: 2px 2px 4px #000000;
      
}
      

      
hr {
      
  display: block;
      
  height: 1px;
      
  border: 0;
      
  border-top: 1px solid #ccc;
      
  margin: 0px;
      
  padding: 0;
      
}
      

      
.portfolio-dialog {
      
  background-color: #1d3c5c;
      
  color: #fff;
      
}
      

      
.portfolio-dialog-content {
      
  background-color: #1d3c5c;
      
  color: #ffffff;
      
}
      

      
dl {
      
  margin-bottom: 3px;
      
}
      

      
.bg-dark {
      
  color: #333333;
      
  background-color: #ffffff;
      
}
      

      
.portfolio-card-content {
      
  margin-bottom: 0.5em;
      
  border-radius: 1em;
      
  padding-top: 0.5em;
      
  padding-bottom: 1em;
      
}
      

      
.fps-tag-block {
      
  padding-left: 1em;
      
  padding-right: 1em;
      
}
      

      
.portfolio-icon-list {
      
  color: #000;
      
}
      

      
.ui-dialog {
      
  background-color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog-buttonpane {
      
  background-color: #1d3c5c;
      
  color: #ddd;
      
  border: 0px;
      
}
      

      
.ui-dialog .ui-dialog-title {
      
  text-align: center;
      
}
      

      
.ui-dialog-buttonset {
      
  color: #1d3c5c;
      
}
      

      
.ui-dialog-titlebar-close {
      
  color: #1d3c5c;
      
  content: "X";
      
}
      

      
.ui-widget-content a {
      
  color: #333333;
      
}
      

      
.portfolio-toggle:before {
      
  content: "▸";
      
}
      

      
.portfolio-toggle.collapsed:before {
      
  content: "▾";
      
}
      

      
.project-block-rounded {
      
  border-radius: 0.5em;
      
  padding: 0.25em;
      
  margin: 0.25em;
      
}
      

      
.open-portfolio-dialog-btn {
      
  cursor: pointer;
      
}
      

      
.portfolio-overview-btn {
      
  cursor: pointer;
      
}
      

      
.media-capture-btn {
      
  cursor: pointer;
      
}
      

      
#search-filter-block {
      
  cursor: pointer;
      
}
      

      
.dl-horizontal dt {
      
  text-align: left;
      
}
      

      
.dl-horizontal dd {
      
  width: auto;
      
}
      

      
.portfolio-card-filter {
      
  padding-left: 1em;
      
}
      

      
.portfolio-metadata {
      
  color: #000;
      
}
      

      
.portfolio-overview {
      
  color: #000;
      
}
      

      
.fixed-header {
      
  position: fixed;
      
  top: 0em;
      
  background-color: #1d3c5c;
      
  padding: 1em;
      
  width: 270px;
      
  text-align: center;
      
}
      

      
.sortable-list {
      
  padding-bottom: 100px;
      
}
      

      
.search-highlighter {
      
  border: 2px solid red;
      
}
      

      
.portfolio-specific-btn {
      
  padding-right: 0.5em;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1:jquery.min.js/jquery.min.js"></script>
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
      

      
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
      

      
<div class="container-fluid" id="core-content">
      
  <div class="col-xs-12 portfolio-page">
      
    <div class="col-xs-2 " style="">
      
      <div>Success/Error info goes here</div>
      
      <div id="dropzone-status-updates-block">
      
        <div id="dropzone-error-messsage-block"></div>
      
        <div id="dropzone-progress-block"></div>
      
      </div>
      
      <div id="template-preview"></div>
      
    </div>
      
    <div class="col-xs-10 portfolio-board-container">
      
      <div id="portfolio-container" class="container-fluid portfolio-container" style="">
      
        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">
      
          <div class="board-canvas">
      
            <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Approval
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">
      
                    <div data-portfolio-path="Tennis" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Tennis"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Tennis"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      

      
                            </div>
      

      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      
                    <div data-portfolio-path="Badminton" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">
      
                      <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
      
                 color: #000000; ">
      
                        <span class="hidden portfolio-dropzone-details" data-portfolio-path="Badminton"></span>
      
                        <div class="portfolio-card-filter-block">
      
                          <div class="portfolio-card-title portfolio-card-filter-heading ">
      
                            <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
      
                              <span class="portfolio-accordion"></span>
      

      
                              <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;
      

      
                              <span class="archiware-archive-state" data-portfolio-path="Badminton"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Badminton
      
                              <span class="text-right"></span>
      
                            </div>
      
                          </div>
      
                        </div>
      
                      </div>
      
                      <div class="list-card-details text-center">
      
                        <div class="list-card-members js-list-card-members">
      
                          <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
      
                            <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
      
                              <a href="#" class="portfolio-overview">
      
                                <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                            <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
      
                              <a href="#" class="portfolio-checklist">
      
                                <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
      
                              <a href="#" class="portfolio-metadata">
      
                                <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      

      
                            <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
      
                              <a href="#" class="portfolio-forum">
      
                                <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>
      
                            </div>
      
                          </div>
      
                        </div>
      
                        <div class="list-card-project-section">
      
                          <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
      
                            Motion Sports: <span class="badge">1</span>
      
                          </div>
      
                        </div>
      
                      </div>
      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Approved
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Editing in Progress
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Awaiting Graphics
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
              <div class="js-list list-wrapper ">
      
                <div class="list js-list-content">
      
                  <div class="list-header js-list-header u-clearfix is-menu-shown">
      
                    <div class="list-header-target js-editing-target"></div>
      
                    <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
      
                      Completed
      
                    </h4>
      
                  </div>
      
                  <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">
      

      
                    <div class="ui-sortable-handle">
      

      
                    </div>
      

      
                  </div>
      
                </div>
      
              </div>
      

      

      
            </div>
      
          </div>
      
          <div class="spacer-sml"></div>
      

      
        </form>
      

      
      </div>
      
    </div>
      
  </div>
      
  <div class="row">
      
    <div class="spacer-sml"></div>
      
  </div>
      
</div>





      java jquery spring-mvc dropzone.js




      java jquery spring-mvc dropzone.js






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 28 '18 at 10:36







      karen

















      asked Nov 27 '18 at 9:47









      karenkaren

      198318




      198318
























          2 Answers
          2






          active

          oldest

          votes


















          0














          You would not get the directories, thats for the user to select the origin. If you did you would get their whole windows/users/ ect ect.



          Set up the directories first or let the user create them and then upload to them






          share|improve this answer
























          • I don't need the full folder system just the folder they drag and drop so for example if you drag and drop an sd card from the root directory it might have /dcim which contains images and or videos and another folder say, /misc. When files are dragged and dropped onto the project blocks they have their own directory location where the files get stored. I just need to append any folders that are dragged and dropped.

            – karen
            Nov 27 '18 at 10:54











          • Capture location of files and save them into a hidden text field, then add these to a database or text file and use that as a reference

            – larry chambers
            Nov 27 '18 at 11:54











          • Use something like this to get the location and save this function getFilePath(){ $('input[type=file]').change(function () { var filePath=$('#fileUpload').val(); }); }

            – larry chambers
            Nov 27 '18 at 11:56











          • Maybe make a map of the folders/directories and file names before update then. Do you need them to upload into the same named directories?

            – larry chambers
            Nov 27 '18 at 12:03











          • Thanks Larry, I just need the files with their respective folders that were dragged and dropped from e.g dcim/image.jpg or dcim/movie.mov. I was under the impression I could use webkitdirectory and webkitRelativePath to do this but wasn't sure how and where I get at these values. On the server side it should recreate the files and respective folder in the projects location which is defined elsewhere.

            – karen
            Nov 27 '18 at 12:08





















          0














          After much trial and error I ended up adding the directory to the form data and then changing the controller so that it took an extra parameter. I also removed the renameFile method.



          js:



          sending: function(file, xhr, formData) {
          
    //Execute on case of timeout only
          
    xhr.ontimeout = function(e) {
          
        var errorMessage = "The server timed out transferring file " + file.name + ". Please try again or contact your administrator.";
          
        $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
          
    };
          
    formData.append('fullPath', file.fullPath);
          
}


          Controller:



          @RequestMapping("/ajax/project/upload") 
          
public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
          
        @RequestParam("projectPath") String projectPath,
          
        @RequestParam("fullPath") String fullPath,
          
        @RequestParam("file") MultipartFile file) {





          share|improve this answer

























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53496813%2fdropzone-js-upload-directories-and-files-to-spring-mvc%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            You would not get the directories, thats for the user to select the origin. If you did you would get their whole windows/users/ ect ect.



            Set up the directories first or let the user create them and then upload to them






            share|improve this answer
























            • I don't need the full folder system just the folder they drag and drop so for example if you drag and drop an sd card from the root directory it might have /dcim which contains images and or videos and another folder say, /misc. When files are dragged and dropped onto the project blocks they have their own directory location where the files get stored. I just need to append any folders that are dragged and dropped.

              – karen
              Nov 27 '18 at 10:54











            • Capture location of files and save them into a hidden text field, then add these to a database or text file and use that as a reference

              – larry chambers
              Nov 27 '18 at 11:54











            • Use something like this to get the location and save this function getFilePath(){ $('input[type=file]').change(function () { var filePath=$('#fileUpload').val(); }); }

              – larry chambers
              Nov 27 '18 at 11:56











            • Maybe make a map of the folders/directories and file names before update then. Do you need them to upload into the same named directories?

              – larry chambers
              Nov 27 '18 at 12:03











            • Thanks Larry, I just need the files with their respective folders that were dragged and dropped from e.g dcim/image.jpg or dcim/movie.mov. I was under the impression I could use webkitdirectory and webkitRelativePath to do this but wasn't sure how and where I get at these values. On the server side it should recreate the files and respective folder in the projects location which is defined elsewhere.

              – karen
              Nov 27 '18 at 12:08


















            0














            You would not get the directories, thats for the user to select the origin. If you did you would get their whole windows/users/ ect ect.



            Set up the directories first or let the user create them and then upload to them






            share|improve this answer
























            • I don't need the full folder system just the folder they drag and drop so for example if you drag and drop an sd card from the root directory it might have /dcim which contains images and or videos and another folder say, /misc. When files are dragged and dropped onto the project blocks they have their own directory location where the files get stored. I just need to append any folders that are dragged and dropped.

              – karen
              Nov 27 '18 at 10:54











            • Capture location of files and save them into a hidden text field, then add these to a database or text file and use that as a reference

              – larry chambers
              Nov 27 '18 at 11:54











            • Use something like this to get the location and save this function getFilePath(){ $('input[type=file]').change(function () { var filePath=$('#fileUpload').val(); }); }

              – larry chambers
              Nov 27 '18 at 11:56











            • Maybe make a map of the folders/directories and file names before update then. Do you need them to upload into the same named directories?

              – larry chambers
              Nov 27 '18 at 12:03











            • Thanks Larry, I just need the files with their respective folders that were dragged and dropped from e.g dcim/image.jpg or dcim/movie.mov. I was under the impression I could use webkitdirectory and webkitRelativePath to do this but wasn't sure how and where I get at these values. On the server side it should recreate the files and respective folder in the projects location which is defined elsewhere.

              – karen
              Nov 27 '18 at 12:08
















            0












            0








            0







            You would not get the directories, thats for the user to select the origin. If you did you would get their whole windows/users/ ect ect.



            Set up the directories first or let the user create them and then upload to them






            share|improve this answer













            You would not get the directories, thats for the user to select the origin. If you did you would get their whole windows/users/ ect ect.



            Set up the directories first or let the user create them and then upload to them







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 27 '18 at 10:36









            larry chamberslarry chambers

            949




            949













            • I don't need the full folder system just the folder they drag and drop so for example if you drag and drop an sd card from the root directory it might have /dcim which contains images and or videos and another folder say, /misc. When files are dragged and dropped onto the project blocks they have their own directory location where the files get stored. I just need to append any folders that are dragged and dropped.

              – karen
              Nov 27 '18 at 10:54











            • Capture location of files and save them into a hidden text field, then add these to a database or text file and use that as a reference

              – larry chambers
              Nov 27 '18 at 11:54











            • Use something like this to get the location and save this function getFilePath(){ $('input[type=file]').change(function () { var filePath=$('#fileUpload').val(); }); }

              – larry chambers
              Nov 27 '18 at 11:56











            • Maybe make a map of the folders/directories and file names before update then. Do you need them to upload into the same named directories?

              – larry chambers
              Nov 27 '18 at 12:03











            • Thanks Larry, I just need the files with their respective folders that were dragged and dropped from e.g dcim/image.jpg or dcim/movie.mov. I was under the impression I could use webkitdirectory and webkitRelativePath to do this but wasn't sure how and where I get at these values. On the server side it should recreate the files and respective folder in the projects location which is defined elsewhere.

              – karen
              Nov 27 '18 at 12:08





















            • I don't need the full folder system just the folder they drag and drop so for example if you drag and drop an sd card from the root directory it might have /dcim which contains images and or videos and another folder say, /misc. When files are dragged and dropped onto the project blocks they have their own directory location where the files get stored. I just need to append any folders that are dragged and dropped.

              – karen
              Nov 27 '18 at 10:54











            • Capture location of files and save them into a hidden text field, then add these to a database or text file and use that as a reference

              – larry chambers
              Nov 27 '18 at 11:54











            • Use something like this to get the location and save this function getFilePath(){ $('input[type=file]').change(function () { var filePath=$('#fileUpload').val(); }); }

              – larry chambers
              Nov 27 '18 at 11:56











            • Maybe make a map of the folders/directories and file names before update then. Do you need them to upload into the same named directories?

              – larry chambers
              Nov 27 '18 at 12:03











            • Thanks Larry, I just need the files with their respective folders that were dragged and dropped from e.g dcim/image.jpg or dcim/movie.mov. I was under the impression I could use webkitdirectory and webkitRelativePath to do this but wasn't sure how and where I get at these values. On the server side it should recreate the files and respective folder in the projects location which is defined elsewhere.

              – karen
              Nov 27 '18 at 12:08



















            I don't need the full folder system just the folder they drag and drop so for example if you drag and drop an sd card from the root directory it might have /dcim which contains images and or videos and another folder say, /misc. When files are dragged and dropped onto the project blocks they have their own directory location where the files get stored. I just need to append any folders that are dragged and dropped.

            – karen
            Nov 27 '18 at 10:54





            I don't need the full folder system just the folder they drag and drop so for example if you drag and drop an sd card from the root directory it might have /dcim which contains images and or videos and another folder say, /misc. When files are dragged and dropped onto the project blocks they have their own directory location where the files get stored. I just need to append any folders that are dragged and dropped.

            – karen
            Nov 27 '18 at 10:54













            Capture location of files and save them into a hidden text field, then add these to a database or text file and use that as a reference

            – larry chambers
            Nov 27 '18 at 11:54





            Capture location of files and save them into a hidden text field, then add these to a database or text file and use that as a reference

            – larry chambers
            Nov 27 '18 at 11:54













            Use something like this to get the location and save this function getFilePath(){ $('input[type=file]').change(function () { var filePath=$('#fileUpload').val(); }); }

            – larry chambers
            Nov 27 '18 at 11:56





            Use something like this to get the location and save this function getFilePath(){ $('input[type=file]').change(function () { var filePath=$('#fileUpload').val(); }); }

            – larry chambers
            Nov 27 '18 at 11:56













            Maybe make a map of the folders/directories and file names before update then. Do you need them to upload into the same named directories?

            – larry chambers
            Nov 27 '18 at 12:03





            Maybe make a map of the folders/directories and file names before update then. Do you need them to upload into the same named directories?

            – larry chambers
            Nov 27 '18 at 12:03













            Thanks Larry, I just need the files with their respective folders that were dragged and dropped from e.g dcim/image.jpg or dcim/movie.mov. I was under the impression I could use webkitdirectory and webkitRelativePath to do this but wasn't sure how and where I get at these values. On the server side it should recreate the files and respective folder in the projects location which is defined elsewhere.

            – karen
            Nov 27 '18 at 12:08







            Thanks Larry, I just need the files with their respective folders that were dragged and dropped from e.g dcim/image.jpg or dcim/movie.mov. I was under the impression I could use webkitdirectory and webkitRelativePath to do this but wasn't sure how and where I get at these values. On the server side it should recreate the files and respective folder in the projects location which is defined elsewhere.

            – karen
            Nov 27 '18 at 12:08















            0














            After much trial and error I ended up adding the directory to the form data and then changing the controller so that it took an extra parameter. I also removed the renameFile method.



            js:



            sending: function(file, xhr, formData) {
            
    //Execute on case of timeout only
            
    xhr.ontimeout = function(e) {
            
        var errorMessage = "The server timed out transferring file " + file.name + ". Please try again or contact your administrator.";
            
        $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
            
    };
            
    formData.append('fullPath', file.fullPath);
            
}


            Controller:



            @RequestMapping("/ajax/project/upload") 
            
public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
            
        @RequestParam("projectPath") String projectPath,
            
        @RequestParam("fullPath") String fullPath,
            
        @RequestParam("file") MultipartFile file) {





            share|improve this answer






























              0














              After much trial and error I ended up adding the directory to the form data and then changing the controller so that it took an extra parameter. I also removed the renameFile method.



              js:



              sending: function(file, xhr, formData) {
              
    //Execute on case of timeout only
              
    xhr.ontimeout = function(e) {
              
        var errorMessage = "The server timed out transferring file " + file.name + ". Please try again or contact your administrator.";
              
        $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
              
    };
              
    formData.append('fullPath', file.fullPath);
              
}


              Controller:



              @RequestMapping("/ajax/project/upload") 
              
public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
              
        @RequestParam("projectPath") String projectPath,
              
        @RequestParam("fullPath") String fullPath,
              
        @RequestParam("file") MultipartFile file) {





              share|improve this answer




























                0












                0








                0







                After much trial and error I ended up adding the directory to the form data and then changing the controller so that it took an extra parameter. I also removed the renameFile method.



                js:



                sending: function(file, xhr, formData) {
                
    //Execute on case of timeout only
                
    xhr.ontimeout = function(e) {
                
        var errorMessage = "The server timed out transferring file " + file.name + ". Please try again or contact your administrator.";
                
        $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
                
    };
                
    formData.append('fullPath', file.fullPath);
                
}


                Controller:



                @RequestMapping("/ajax/project/upload") 
                
public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
                
        @RequestParam("projectPath") String projectPath,
                
        @RequestParam("fullPath") String fullPath,
                
        @RequestParam("file") MultipartFile file) {





                share|improve this answer















                After much trial and error I ended up adding the directory to the form data and then changing the controller so that it took an extra parameter. I also removed the renameFile method.



                js:



                sending: function(file, xhr, formData) {
                
    //Execute on case of timeout only
                
    xhr.ontimeout = function(e) {
                
        var errorMessage = "The server timed out transferring file " + file.name + ". Please try again or contact your administrator.";
                
        $("#dropzone-error-messsage-block").append("<span>" + errorMessage + "</span>");
                
    };
                
    formData.append('fullPath', file.fullPath);
                
}


                Controller:



                @RequestMapping("/ajax/project/upload") 
                
public AjaxResponse uploadProjectFilesAndFolders(MultipartHttpServletRequest request, 
                
        @RequestParam("projectPath") String projectPath,
                
        @RequestParam("fullPath") String fullPath,
                
        @RequestParam("file") MultipartFile file) {






                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 28 '18 at 15:57

























                answered Nov 28 '18 at 15:49









                karenkaren

                198318




                198318






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53496813%2fdropzone-js-upload-directories-and-files-to-spring-mvc%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                    Image
                    0 I found a lot of questions abount appendices and ToC. Many users want appendices to be grouped in an Appendix part, however some problems arise with ToC, hyperref, PDF viewer bookmarks, and so on. There are different solutions which require extra packages, command patching and other extra code, however none of them satisfies me. I almost found an easy way to accomplish a good result, where appendices are added to bookmarks in the right way and hyperref links point to the right page. However, the number of the "Appendix" part page is wrong (it's the number of appendix A). Is there any EASY way to fix that? This is a MWE: documentclass{book} usepackage[nottoc,notlot,notlof]{tocbibind} usepackage{hyperref} begin{document} frontmatter tableofcontents mainmatter part{First} chapter{...
                    Read more

                    Calculate evaluation metrics using cross_val_predict sklearn

                    Image
                    1 In the sklearn.model_selection.cross_val_predict page it is stated: Generate cross-validated estimates for each input data point. It is not appropriate to pass these predictions into an evaluation metric. Can someone explain what does it mean? If this gives estimate of Y (y prediction) for every Y (true Y), why can't I calculate metrics such as RMSE or coefficient of determination using these results? python scikit-learn cross-validation share | improve this question edited Nov 28 '18 at 17:52 desertnaut 20.3k 7 43 79 ...
                    Read more

                    Insert data from modal to MySQL (multiple modal on website)

                    Image
                    0 I have problem with inserting data to MySQL from modal. My modal: <a href="#" class="badge badge-pill badge-success">6 komentarzy</a> <a href="#" class="badge badge-pill badge-danger">brak komentarzy</a> <a data-toggle="modal" href="#add_desk_comm_{$desk_['desk_id']}" data-target="#add_desk_comm_{$desk_['desk_id']}" class="ediiit">(dodaj)</a> <div class="modal fade" id="add_desk_comm_{$desk_['desk_id']}" tabindex="-1" role="dialog" aria-labelledby="edit_printer" aria-hidden="true"> <div class="modal-dialog" role="document"> ...
                    Read more