Note > 스프링 부트 파일첨부, Ui Dropzone.js

Dropzone.js

Getting Started | Uploading Files (spring.io)

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

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

application.properies에 추가

spring.devtools.restart.enabled=true
spring.devtools.livereload.enabled=true

spring.devtools.restart.enabled : Spring Boot 애플리케이션의 클래스패스에 변경이 감지되면 자동으로 애플리케이션을 다시 시작하는 기능을 활성화 또는 비활성화합니다.

spring.devtools.livereload.enabled: 웹 애플리케이션 개발 중에 HTML, CSS, JavaScript 파일 등의 정적 리소스를 수정할 때 브라우저를 자동으로 새로 고치는 기능입니다.