html 부분

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

<form action="/common/file/files" class="dropzone" id="my-great-dropzone"> 
    <input type="hidden" name="owner" value="qna" />  <!-- 추가 변수 전송을 위해서 추가 -->
</form>

메뉴얼 쪽에서는 설정쪽에서 추가가 가능하다고 되어 있는데 동작하지 않아서 <form 안쪽에 넣어 봤습니다.

javascript 부분

Dropzone.options.myGreatDropzone = { // camelized version of the `id`
    uploadMultiple : true,
    paramName: "file", // The name that will be used to transfer the file
//paramName도 변경해봤으나 수정이 안돼서 일단 java쪽에서 맞췄습니다.
    maxFilesize: 4, // MB
    // owner:'qna',  //동작 안됨 custom 변수
    accept: function (file, done) {
        if (file.name == "justinbieber.jpg") {
            done("Naha, you don't.");
        }
        else { done(); }
    }

특이사항 :

- 기본 설정이 파일 드래그 완료와 함께 업로드가 자동 진행됩니다.

-form에 action을 설정하고 작업을 진행합니다.

- <form action="/common/file/files" class="dropzone" id="my-great-dropzone"> 

image 필터 추가 옵션 react

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/png': ['.png'],
      'image/bmp': ['.bmp'],
      'image/gif': ['.gif'],
      'image/jpeg': ['.jpeg', '.jpg'],
      // 'text/html': ['.html', '.htm'],
    }
  })