Dropzone.jsの設定周り

CDNで読み込んでおく。

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

フォーム部分（Laravelのbladeを使っています）

<form action="{{ Route('image.store') }}" method="POST" class="dropzone" id="my-awesome-dropzone">
    @csrf
</form>

<button id="clear-btn" class="btn btn-primary btn-sm">
     クリア
</button>

処理部分

<script>
    const dropzone = new Dropzone('#my-awesome-dropzone', {
        maxFilesize: 5, // 最大ファイルサイズ（MB）
        maxFiles: 10, // 最大ファイルアップロード数
        timeout: 2000, // タイムアウト（ms）
        addRemoveLinks: true, // 削除用リンクをデフォルト表示
        dictRemoveFile:'削除',
        acceptedFiles: '.jpeg,.jpg,.png,.gif', // 許容するファイルタイプ
        dictDefaultMessage: 'ファイルをドロップ<br>または<br>こちらをクリックしてください。',
        dictInvalidFileType: '.jpeg,.jpg,.png,.gifを選択してください。',
        dictMaxFilesExceeded: '最大アップロード数は10枚です。',
        init: function () {
            const clearButton = document.getElementById('clear-btn');

            // クリアボタンがクリックされたときの処理
            clearButton.addEventListener('click', function() {
                dropzone.removeAllFiles(); // プレビューを全て取り除く
            });

            // アップロードが開始されたとき
            this.on("uploadprogress", function(file, progress) {
                // アップロード中はクリアボタンを無効化
                clearButton.disabled = true;
            });

            // アップロードが完了したとき
            this.on("complete", function(file) {
                // すべてのファイルがアップロード完了したらクリアボタンを有効化
                if (dropzone.getUploadingFiles().length === 0 && dropzone.getQueuedFiles().length === 0) {
                    clearButton.disabled = false;
                }
            });

            this.on("success", function (file, serverResponse) {
                // サーバーからの成功レスポンスを受け取った場合
                if (serverResponse.success) {
                    // 成功した場合は削除リンクを非表示にする
                    file.previewElement.querySelector(".dz-remove").style.display = 'none';
                } else {
                    // サーバー側で失敗した場合
                    file.previewElement.querySelector(".dz-remove").style.display = 'block';
                }
            });

            this.on("error", function (file, errorMessage) {
                // バリデーションエラーやサーバーエラー時に削除リンクを表示
                file.previewElement.querySelector(".dz-remove").style.display = 'block';
            });

            this.on("addedfile", function (file) {
                // 最初にファイルが追加された時点で削除リンクを非表示
                file.previewElement.querySelector(".dz-remove").style.display = 'none';
            });
        }
    });
</script>

削除リンクの制御を追加
ボタンを配置し、ボタンクリックでプレビューを全て取り除く対応を追加