Drop Zones visually indicate to users where they may drag and drop files onto a page. Making the experience of uploading files easier.
It also should includes the button for people that prefer using them instead of drag and drop.
<div class="c-dropzone">
<svg class="c-dropzone__icon" width="50" height="38" viewBox="0 0 50 38" xmlns="http://www.w3.org/2000/svg"><title>Upload cloud</title><path d="M24.006 20.65l-6.09 6.053c-.186.171-.259.197-.394.243-.611.204-1.358-.313-1.346-.978a1.06 1.06 0 0 1 .298-.698l6.963-6.918a2.304 2.304 0 0 1 1.56-.654h.056a2.302 2.302 0 0 1 1.561.654l6.962 6.918c.173.185.199.257.245.391.206.608-.308 1.35-.984 1.339a1.074 1.074 0 0 1-.702-.297l-6.09-6.053v16.361c-.012.274-.049.348-.124.482-.294.538-1.129.682-1.586.265a1.063 1.063 0 0 1-.33-.745V20.65zm-4.718 11.874H9.68C5.137 32.51.842 28.81.534 23.997.3 20.29 2.552 16.543 6.064 15.04a9.26 9.26 0 0 1 2.683-.691l.028-.003c.007-.06.014-.12.023-.178.77-5.881 5.077-11.305 10.938-13.3A16.56 16.56 0 0 1 24.974 0h.103c4.988.023 9.911 2.449 12.944 6.387a16.26 16.26 0 0 1 3.248 7.928s-.156.012.205.053c3.612.443 6.834 3.161 7.77 6.77.926 3.57-.553 7.62-3.66 9.764a9.266 9.266 0 0 1-5.215 1.62H30.76c-.275-.045-.364-.024-.6-.193-.522-.378-.531-1.257 0-1.64.234-.17.325-.15.6-.192h9.604c3.572-.012 6.953-2.983 7.12-6.765.099-2.213-.916-4.448-2.654-5.84a7.18 7.18 0 0 0-4.466-1.562s-.196-.005-.33-.047c-.68-.208-.71-1.152-.818-1.943-.667-4.921-4.118-9.378-8.815-11.277-4.139-1.672-9.076-1.273-12.91 1.09-3.87 2.386-6.472 6.646-6.76 11.223l-.066.297c-.156.274-.36.517-.651.608-.275.083-.555.044-.835.062-2.522.174-4.888 1.798-5.957 4.075a7.145 7.145 0 0 0 .093 6.175c1.183 2.328 3.75 3.891 6.37 3.898h9.603c.276.044.364.024.6.193.513.37.527 1.26 0 1.64-.233.169-.324.15-.6.192v.008z" fill="#098FCD"></path></svg>
<h4 class="c-dropzone__title">Drag & Drop</h4>
<span class="c-dropzone__upload">
<label for="upload-file">
<input id="upload-file" type="file" class="u-d-none">
<button tabindex="0" class="c-btn c-btn--outline">Upload file</button>
</label>
</span>
</div>