Starting point for Drag & Drop – dropzone HTML

<!-- Div to act as a container for drag and rop events as well as any existing attachments -->
<div id="drop-zone">
    <p>Drag and drop files here</p>
    <!-- List to hold the preview thumbnails of any attached files -->
    <ul id="file-list">
        <li class="attachment-preview"><div data-id="put-note-guid-here" data-filename="Example filename.jpg"><img class="img-responsive" src="https://picsum.photos/300/300"></div></li>
        <li class="attachment-preview"><div data-id="put-note-guid-here" data-filename="Example filename.pdf"><div class="inner"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Example filename.pdf</div></div></li>
    </ul>
</div>
Franco Musso