Search code examples
javascripthtmlcssangularjsangular-file-upload

Drag and Drop Angular File Upload with Relatively Positioned Elements

I am having an issue with Angular File upload, being used with relatively positioned elements. My drop target is 100% width and height, absolutely positioned. If you drag the file over any non-relatively positioned element, the overlay appears fine and everything works. However if you drag over a relatively positioned element, it does not register the drag event. This is because the relative positioned elements are appearing on top of the dropArea.

I've tried applying a z-index to the drop target, and the drag and drop works great, but then I cannot click anything on the UI anymore.

Here is my logic:

HTML

<html>
  <head>...</head>
  <body>
    <div id="dropArea">...</div>
    <div id="siteContent">
      <div class="row">
        <!-- dragging to this element fails, since it is relatively positioned -->
        <div class="col-md-12">...</div> 
        <div>...</div>
      </div>
    </div>
  </body>
</html>

CSS

#dropArea {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Is there any way to apply a z-index to the dropArea but still allow clicks to pass through?

Solution

  • I solved this by wrapping the entire page content in the drop area. 

    <html>
<head>...</head>
<body>

<div id="dropArea" class="dropArea" ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="fileAdded">
  <div id="drop-content-container">
    <div id="drop-content">
      <img src="img/app/files-upload-dd.png">
      <h1>Drop Files Here!</h1>
    </div>
  </div>

  <div class="page-content">...</div>
</div>

</body>
</html>