[Laravel] Dropzone.js 사용하기

구성 : Laravel Framework 8.46

https://github.com/dropzone/dropzone

위 라이브러리를 사용해서 진행해보겠다. Download Link를 클릭하면 라이브러리를 .zip 파일로 받을 수 있다.

 

https://dropzone.gitbook.io/dropzone/configuration/basics

위 document에서 많은 설명이 있으니 참고하면 될것같고 이번 포스팅에서는 

Controller <-> blade 간 기본 파일 전송에 대해서만 다룰것이다.

 

1. blade.php

<link rel="stylesheet" type="text/css" href="{{asset('dropzone/dropzone.min.css')}}">

<-- class를 dropzone으로 해야 css 적용 ! -->
<form action="" enctype = "multipart/form-data" 
  method="post" id="uploadFile" class="dropzone">
	@csrf
</form> 
<button id="processUpload" type="submit" class="btn btn-accent">등록</button>    


<script src="{{asset('dropzone/dropzone.min.js')}}" type="text/javascript"></script>
	<script>
        Dropzone.options.uploadFile = {
            // 설정해주면 파일 드래그앤드랍했을때 파일 아래에 remove link가 나타난다.
            addRemoveLinks: true,
            // 허용할 파일확장자
            acceptedFiles: ".xlsx",
            // 파일 업로드 최대 갯수
            maxFiles: 1,
            // 자동전송여부 -> true로 설정하면 드래그앤드랍시 바로 컨트롤러 호출하므로 false!
            autoProcessQueue : false,
            // 허용 사이즈 10 -> 10MB
            maxFilesize: 10,
            init: function ()  {
            	// error 발생 시 alert 호출 ( 파일용량초과, 업로드 갯수, 확장자 등등..)
                this.on("error", function (file, message) {
                    alert(message);
                    this.removeFile(file);
                });

                let myDropzone = this;
                $("#processUpload").click(function (e) {
                	// Controller 호출 진행
                    myDropzone.processQueue();
                });
            },
            // Controller 호출 전 파일명 변경해서 전송!
            renameFilename: function (filename) {
                name  = "test.xlsx";
                return name;
            },
            // Controller Response를 받아 분기 처리
            success: function(file, response) {
                if(response == 'success') {
                    alert('등록 되었습니다.');
                } else {
                    alert('등록 실패.')
                }
                location.reload();
            } 
        };
    </script>

2. Controller

public function store(Request $request) {
	Log::debug($request);
}

 

로그를 찍어보면 아래와 같이 전송이 된걸 확인 할 수 있다.

$request로 파일을 받아 저장을 하던, 다른 처리를 하면 될 것 같다.

[2021-06-15 07:33:01] local.DEBUG: array (
  '_token' => '~~~~~~~~~~~~~~',
  'file' => 
  Illuminate\Http\UploadedFile::__set_state(array(
     'test' => false,
     'originalName' => 'test.xlsx',
     'mimeType' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
     'error' => 0,
     'hashName' => NULL,
  )),
)