Drag and Drop

<div class="aui-drag-section">
    <div class="aui-drag-outline">
        <div class="aui-drag-area d-flex align-items-center justify-content-center">
            {/* on page load, File selection area, if file is not selected then 'd-flex', if file selected then 'd-none' */}
            <div class="d-flex justify-content-center align-items-center flex-column">
                <i class="aha-icon-cloud-upload aui-drag-upload-icon"></i>
                <span class="h7 font-600 mb-0" aria-label="drag and drop files here">Drag and drop files here</span>
                <span class="my-3">or</span>
                <div class="aui-btn-files">
                    <input id="uploadfile" type="file" name="uploadfile" accept=".csv" aria-label="Browse Files" />
                    <label htmlFor="uploadfile" class="btn btn-round btn-primary m-0" aria-hidden="true">Browse Files</label>
                </div>
            </div>

            {/* Dragging Place Holder 'd-flex', and 'd-none to hide'  */}
            <div class="d-none justify-content-center align-items-center flex-column aui-drop-files">
                Drop files here
            </div> 

            {/* after file is selected 'd-flex', and 'd-none' to hide' */}
            <div class="d-none justify-content-center align-items-center flex-column aui-uploading-files row w-100">
                <div class="col-12">
                    <div class="h8 font-600 mb-1">Filename.csv</div>
                    <div class="mb-3">File Size: 28mb</div>
                    <div class="aui-progress-block mb-4">
                    <div class="d-flex w-100">
                        <div class="progress flex-grow-1">
                            {/* if failure use extra class 'progress-failure'  */}
                            <div class="progress-bar" role="progressbar" id="inProgess" style="width: 25%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-describedby="progressInfo" aria-labelledby="progressPercent">
                                <span id="progressPercent">25%</span>
                            </div>
                        </div>
                        <button class="btn btn-text aha-icon-cross ml-2" aria-label="Abort file upload"></button>
                    </div>
                    {/* if fileUploadError is true then 'd-block' with proper error message, else 'd-none' */}
                    <div class='d-none'>
                        <div class="aui-progress-fail-msg d-block" id="progressInfo">Sorry, we could not upload this file. Try saving it in a different format and upload again</div>
                        <div class="aui-btn-files">
                            <input id="uploadfileagain" type="file" name="uploadfileagain" accept=".csv" aria-label="Upload Again" />
                            <label htmlFor="uploadfileagain" class="btn btn-round btn-primary mb-0 mt-4" role="button" aria-hidden="true">Upload again</label>
                        </div>
                    </div>
                    {/* if no error, add class 'd-inline-block' else add 'd-none' */}
                    <button class="btn btn-round btn-primary d-inline-block mt-4">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>