Skip to main content

File upload

Single file upload

Single file upload, where the file is uploaded when the form is submitted.

Example HTML usage: 
<!--Single file upload -->
<form>
  <div class="custom-file">
    <input type="file" class="form-control custom-file-input" id="customFile" />
    <label class="custom-file-label" for="customFile">Select file</label>
  </div>
</form>

Multiple file upload

Multiple file upload, where user can select more than one file with the file upload button.

Example HTML usage: 
<!--Multi file upload -->
<form>
  <div class="form-group">
    <label for="exampleFormControlFile">Example multiple files input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile" multiple="" />
  </div>
</form>

Drag and drop file upload

This shows how to facilitate uploading multiple files to the same field (e.g., an attachments field), where the files are uploaded as soon as they’re selected rather than when the form is submitted.

cloud_upload

Drag and drop files here or
Browse files

Acceptable file formats: .pdf, .docx, .txt, .xml, .zip

Total documents uploaded: 1

check File123.txt download delete
Example HTML usage: 
<!--Drag and drop file upload -->
<form id="fileUload">
  <span class="topUploadMsg"></span>
  <div class="uploadArea">
    <div class="multiple-upload-primary">
      <label for="multiFileUpload1" class="sr-only">Multiple file upload</label>
      <input type="file" class="input-file" multiple="" name="multiFileUpload1" id="multiFileUpload1">
      <div class="input-upload-area py-1" role="button">
        <div class="uploadButton">
          <i class="material-icons md-2x mr-2">cloud_upload</i>
          <h3 class="d-inline-block" style="vertical-align: text-bottom;">Drag and drop files here
            <span class="font-weight-light mx-2">or</span>
            <div class="btn btn-sm btn-upload">Browse files</div>
          </h3>

          <p class="small">Acceptable file formats: .pdf, .docx, .txt, .xml, .zip</p>
        </div>

      </div>


    </div>
  </div>
  <p class="px-2 mt-3 mb-0"><strong>Total documents uploaded: <span id="totalDocuments">1</span></strong></p>
  <table class="table table-sm table-hover" id="FileUploadTable">
    <tbody>

      <tr>
        <td style="width: 15px;"><i class="material-icons align-bottom text-success" role="img"
            title="Uploaded successfully">check</i></td>
        <td class="align-middle">File123.txt</td>
        <td style="width: 30px;"><a href="File123.txt" target="_blank" data-toggle="tooltip" data-placement="top"
            title="Download" class="d-inline-block"><i class="material-icons text-secondary">download</i></a></td>
        <td style="width: 30px;">
          <a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Delete"
            class="d-inline-block deleteFile-btn"><i class="material-icons text-secondary">delete</i></a>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Delete multiple files modal -->
  <div class="modal fade" id="deleteFileModal" tabindex="-1" aria-labelledby="deleteFileModal" aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-danger">Delete file</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body pt-4">
          <p>Are you sure you want to delete <strong><span class="deleteFileName"></span></strong>?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm closeUploadedFile" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-danger btn-sm deleteUploadedFile">Delete file</button>
        </div>
      </div>
    </div>
  </div>
</form>