Drag N Drop File Upload

Drag N Drop File Upload in jQuery

by MD Hasan Patwary

HTML

<div class="dragNdrop">
  <div class="dragNdrop__uploadOuter">
    <i class="fi fs-2 icon-color fi-sr-cloud-upload-alt"></i>
    <div class="d-flex justify-content-center gap-2 align-items-center mt-2">
      Drag & drop file
      <span class="text-muted">or</span>
      <label for="uploadFile" class="text-primary text-decoration-underline cursor-pointer">Browse File</label>
    </div>
    <input class="dragNdrop__input" type="file" name="products_file" accept=".xlsx, .xls, .sql, .run" id="uploadFile"  />
  </div>
  <div class="dragNdrop__preview mt-2"></div>
</div>

SCSS

.dragNdrop {
    font-size: 0.75rem;
    text-align: center;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &__uploadOuter {
        --aspect-ratio: 3 / 1;
        background-color: #ddd;
        padding: 1.25rem;
        border-radius: 0.5rem;
        block-size: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-inline-size: 100%;
        aspect-ratio: var(--aspect-ratio);
        transition: transform 0.3s;
        position: relative;
    }
    &__input[type="file"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        inset: 0;
    }
    &__draging {
        transform: scale(1.1);
    }
}

.mt-2 {
  margin-block-start: 0.5rem;
}

JavaScript

$('.dragNdrop__input[type="file"]').on('change', function(event) {
				var fileName = event.target.files[0].name;
				var $preview = $(this).closest('.dragNdrop').find('.dragNdrop__preview');
				$preview.empty().append(fileName);
		});

		$('.dragNdrop__input[type="file"]').on('dragover', function(e) {
				$(this).closest('.dragNdrop__uploadOuter').addClass('dragNdrop__draging').addClass('dragNdrop__dragBox');
		});

		$('.dragNdrop__input[type="file"]').on('drop', function(e) {
				$(this).closest('.dragNdrop__uploadOuter').removeClass('dragNdrop__draging').addClass('dragNdrop__dragBox');
		});