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'],
    }
  })

Controller 작성

@Controller
public class FileUploadController {

...
@Autowired
    private final StorageService storageService;


    
    @Autowired
    public FileUploadController(StorageService storageService) {
        this.storageService = storageService;
    }


    @PostMapping("/common/fileform/upload")
    @ResponseBody
    public ResponseEntity<List<Attachment>> uploadFiles(@RequestParam("file") List<MultipartFile> files) {
        int owner_seq = 1;
        List<Attachment> attachments = new ArrayList<Attachment>();
        for (MultipartFile file : files) { 
            
            // 업로드된 파일 저장
            try { 
...
                // 파일 정보 저장
                storageService.store(file);  
  
            } catch (IOException e) {
                e.printStackTrace();
                return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
            }
        }
        return ResponseEntity.ok(attachments);
    }

파일첨부 저장을위한 서비스 부분

@Service
public class StorageService { 
    @Value("${upload.folder}")
    private String uploadFolder;
    
    private Path rootLocation;


    public StorageService() {    
        this.rootLocation = null;
    }
    
    @PostConstruct
    public void init() {
        this.rootLocation = Paths.get(uploadFolder);
    }


    private String getExtension(MultipartFile file) {
        String fileName = file.getOriginalFilename();
        String fileExtension = "";
        if (fileName != null && fileName.contains(".")) {
            fileExtension = fileName.substring(fileName.lastIndexOf(".") + 1);
        }
        return fileExtension;
    }


    void store(MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();
        String extension = this.getExtension(file);


        String filename = UUID.randomUUID().toString() + "." + extension;

        byte[] bytes = file.getBytes();
        Path filePath = Paths.get(uploadFolder + File.separator + filename);
        Files.write(filePath, bytes);

    }


    // Stream<Path> loadAll();


    public Path load(String filename) {
        return rootLocation.resolve(filename);
    }


    public Resource loadAsResource(String filename) throws MalformedURLException {
        Path file = rootLocation.resolve(filename);
        Resource resource = null;
        resource = new UrlResource(file.toUri());
        if (resource.exists() || resource.isReadable()) {
            return resource;
        }
        return resource;
    }


    public void delete(String filename) throws IOException {
        Path file = load(filename);
        Files.delete(file);
    }


    // void deleteAll();


}

설정을 위한 resources/application.properties 부분

upload.folder=C:\\Users\\H......3040\\upload
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

Dropzone.js

Getting Started | Uploading Files (spring.io)

프로젝트 폴더/.vscode/launch.json 에

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

내용을 추가 하거나 launch.json파일을 visual studio code에서 열면있는 "add configureation" 버튼를 눌러서 생성합니다.

저 참조위치가면 영상이 있습니다.

이후 프로젝트에서 react를 실행 합니다.

npm start

그리고 나서 vscode에서 방금 설정한 "Launch Edge against localhost"를 실행합니다.

새창이 띄면서 react가 실행된 창이 보입니다.

"url": "http://localhost:3000",  이부분의 포트나 위치는 npm start 에서설정한 포트나 내가 보고 싶은 페이지 주소입니다.
"url": "http://localhost:8080/Memo",

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial