画像・動画・音声ファイルをドラッグ＆ドロップしてクライアントのみでプレビュー表示までやってみる
サンプルは以下のページ

HTML

HTML にファイルドラッグの divタグをつくり inputタグ, プレビュー用の img, video, audio タグを準備
inputタグは非表示 display: none を CSS で設定
label タグで inputタグを囲って pタグにファイル入力・入力ファイル名を表示できるように準備
ファイルドラッグの div タグに ondrop, ondragover で処理実行

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <hr>
  <h4>画像アップ・プレビュー</h4>
  <div class="filearea" id="image" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
    <label>
      <input type="file" accept='image/*' onchange="preview(this, 'preview-image');">
      <p class="selecter">＋ファイル選択 または ファイルドロップ</p>
      <p class="select-file" id="preview-image-file">選択されてません</p>
      <img class="preview pre-select" id="preview-image">
    </label>
  </div>

  <h4>動画アップ・プレビュー</h4>
  <div class="filearea" id="video" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
    <label>
      <input type="file" accept='video/*' onchange="preview(this, 'preview-video');">
      <p class="selecter">＋ファイル選択 または ファイルドロップ</p>
      <p class="select-file" id="preview-video-file">選択されてません</p>
      <video class="preview pre-select" id="preview-video" controls="controls"></video>
    </label>
  </div>

  <h4>音声アップ・プレビュー</h4>
  <div class="filearea" id="audio" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
    <label>
      <input type="file" accept='audio/*' onchange="preview(this, 'preview-audio');">
      <p class="selecter">＋ファイル選択 または ファイルドロップ</p>
      <p class="select-file" id="preview-audio-file">選択されてません</p>
      <audio class="preview pre-select" id="preview-audio" controls="controls"></audio>
    </label>
  </div>

</body>

<script src="script.js"></script>

</html>

JavaScript

drop で event.dataTransfer.files よりファイル情報取得して処理
drag は既定処理をキャンセルする

/**
 * @param {HTMLInputElement} obj 入力情報
 * @param {String} previewId プレビュー表示DOMのID
 */
function preview(obj, previewId) {
    previewFile(obj.files, previewId);
}

/**
 * @param {File} files 入力ファイル
 * @param {String} previewId プレビュー表示DOMのID
 */
function previewFile(files, previewId) {
    let fileReader = new FileReader();
    fileReader.onload = (function () {
        document.getElementById(previewId).src = fileReader.result;
        document.getElementById(`${previewId}-file`).innerText = files[0].name;
    });
    fileReader.readAsDataURL(files[0]);
}

/** 
 * @param {Event} event
 */
function dropHandler(event) {

    event.preventDefault();

    if (event.dataTransfer.files.length === 0) return false;
    const files = event.dataTransfer.files;
    const previewId = `preview-${event.currentTarget.id}`;
    previewFile(files, previewId);
}

/** 
 * @param {Event} event
 */
function dragOverHandler(event) {
    event.preventDefault();
}