MultiPartFile을 이용한 파일 업로드, 다운로드

스프링이 제공하는 MultiPartFile을 이용해 파일 전송 뿐만 아니라 전송한 파일을 다운받는 예제 실습

요구사항 

• 상품(Item)을 등록하고 조회
• 상품의 요소로는 상품 아이디, 상품이름, 상품 파일, 파일 리스트가 있습니다.
• 상품 파일은 다운로드 가능
• 업로드한 파일 리스트는 웹 브라우저에서 확인가능 

Domain

Item

@Data
public class Item {
    private Long itemId;
    private String itemName;
    private UploadFile attachFile;
    private List<UploadFile> imageFiles;
}

@Data
public class UploadFile {
    private String uploadFileName;
    private String storeFileName;

    public UploadFile(String uploadFileName, String storeFileName) {
        this.uploadFileName = uploadFileName;
        this.storeFileName = storeFileName;
    }
}

• 상품 아이디, 상품 이름, 파일, 파일 리스트
• 파일은 UploadFileName과 StorFileName으로 구분하기 위해 UploadFile 클래스를 생성해서 타입으로 지정
  • 서버에는 같은 파일의 이름이 와도 각 파일을 식별할 수 있도록 UUID를 통해 업로드 시에 StoreFileName과, UploadFileName으로 구분지었습니다.

  •  서로 다른 고객이 같은 파일이름을 업로드 하는 경우 기존 파일 이름과 충돌이 날 수 있기 때문에 고객이 업로드한 파일명으로 서버 내부에 파일을 저장하면 안됩니다.

ItemForm

@Data
public class ItemForm {
    private Long itemId;
    private String itemName;
    private MultipartFile attachFile;
    private List<MultipartFile> imageFiles;
}

• Item을 업로드 할 때 사용할 Form
• Item 도메인과 마찬가지로 상품 아이디, 이름, 파일, 파일리스트가 있습니다.
• 파일을 전송 할 때 MultipartFile 타입 사용할 예정

Item Repository

@Repository
public class ItemRepository {
    private final Map<Long, Item> store = new HashMap<>();
    private long sequence = 0L;
    public Item save(Item item)
    {
        item.setItemId(++sequence);
        store.put(item.getItemId(),item);
        return item;
    }
    public Item findById(Long id)
    {
        return store.get(id);
    }
}

• Item을 조회, 저장. HashMap 사용

 

File Store  

package hello.upload.file;

import hello.upload.domain.UploadFile;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

@Component
public class FileStore {

    @Value("${file.dir}")
    private String fileDir;

    // 업로드 되는 경로 + 파일이름
    public String getFullPath(String fileName)
    {
        return fileDir + fileName;
    }


    // 업로드 파일(오리지널 파일이름, 스토어에 올라갈 파일이름)
    // Form으로 부터 POST된 MultipartFile을 서버에 저장하고 UploadFile(오리지널파일이름, 스토어에 올라갈 파일이름) 리턴
    public UploadFile storeFile(MultipartFile multipartFile) throws IOException {

        if(multipartFile.isEmpty())
        {
            return null;
        }

        String originalFilename = multipartFile.getOriginalFilename();
        String storeFilename = createStoreFileName(originalFilename);

        // transferTo를 통해 파일 서버에 저장 (서버에 저장 할 때는 UUID+.+확장자 )
        multipartFile.transferTo(new File(getFullPath(storeFilename)));

        return new UploadFile(originalFilename,storeFilename);
    }
    private String createStoreFileName(String originalFilename) {

        int pos = originalFilename.lastIndexOf(".");
        String uuid = UUID.randomUUID().toString();
        String ext = originalFilename.substring(pos+1);
        return uuid + "." + ext; 
    }


    // ItemForm으로부터 POST 된 파일 리스트로부터 하나씩 iterate 해서 서버에 저장하고 Item List에 추가하고 리턴
    public List<UploadFile> storeFiles(List<MultipartFile> multipartFiles) throws IOException {
        List<UploadFile> storeFileResult = new ArrayList<>();

        for (MultipartFile multipartFile : multipartFiles) {
            if(!multipartFile.isEmpty())
            {
                storeFileResult.add(storeFile(multipartFile));
            }
        }
        return storeFileResult;
    }
}

•  storeFile : Form으로부터 전송된 파일 -> ( UUID.확장자 )로 변경해서 파일을 서버(file.dir)에 저장하고, Item Repository에는 Item 저장해야 하기 때문에 UploadFile 형식으로 변경해서 리턴 
• storeFiles : Form으로부터 전송된 파일 리스트 ->  iterator를 사용해 ( UUID.확장자 )로 변경해서 파일을 서버에 하나씩 저장하고, Item Repository에는 Item 저장해야 하기 때문에 UploadFile 형식으로 변경해서 List에 추가해서 리턴 
• Controller의를 참고.

Controller

ItemController

@Slf4j
@Controller
@RequiredArgsConstructor
public class ItemController {
    private final ItemRepository itemRepository;
    private final FileStore fileStore;

    // Item 등록 폼 Get
    @GetMapping("/items/new")
    public String newItem(@ModelAttribute ItemForm form)
    {
        return "item-form";
    }

    // Item 등록 폼을 통해 POST
    @PostMapping("/items/new")
    public String saveItem(@ModelAttribute ItemForm form, RedirectAttributes redirectAttributes) throws IOException {

        UploadFile uploadFile = fileStore.storeFile(form.getAttachFile());
        List<UploadFile> uploadFiles = fileStore.storeFiles(form.getImageFiles());

        // 리포지토리에 저장
        Item item = new Item();
        item.setItemName(form.getItemName());
        item.setAttachFile(uploadFile);
        item.setImageFiles(uploadFiles);
        itemRepository.save(item);

        redirectAttributes.addAttribute("itemId",item.getItemId());

        return "redirect:/items/{itemId}";
    }

    // Item 뷰
    @GetMapping("/items/{itemId}")
    public String itemView(@PathVariable Long itemId, Model model)
    {
        Item item = itemRepository.findById(itemId);
        model.addAttribute("item",item);
        return "item-view";
    }

    @ResponseBody
    @GetMapping("/images/{fileName}")
    public Resource downloadImage(@PathVariable String fileName) throws MalformedURLException {
        return new UrlResource("file:" + fileStore.getFullPath(fileName));
    }

    // 다운로드
    @GetMapping("/attach/{itemId}")
    public ResponseEntity<Resource> downloadAttach(@PathVariable Long itemId) throws MalformedURLException {
        Item item = itemRepository.findById(itemId);
        String uploadFileName = item.getAttachFile().getUploadFileName();
        String storeFileName = item.getAttachFile().getStoreFileName();

        UrlResource resource = new UrlResource("file:" + fileStore.getFullPath(storeFileName));

        log.info("uploadFileName={}",uploadFileName);

        String encode = UriUtils.encode(uploadFileName, StandardCharsets.UTF_8);
        String contentDisposition = "attachment; filename=\"" + encode + "\"";

        log.info("contentDisp = {}",contentDisposition);

        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION,contentDisposition)
                .body(resource);
    }
}

• Item 등록 폼, 조회 폼 제공
• 등록 폼을 통한 Item 객체 등록
• 조회 폼을 통한 Item 파일 조회 및 다운로드

- saveItem

// Item 등록 폼을 통해 POST
@PostMapping("/items/new")
public String saveItem(@ModelAttribute ItemForm form, RedirectAttributes redirectAttributes) throws IOException {

    // Form으로부터 Post된 파일을 스토어에 저장하고 UploadFile 리턴 -> 리포지토리에 저장
    UploadFile uploadFile = fileStore.storeFile(form.getAttachFile());

    // Form으로부터 Post된 파일리스트를 스토어에 저장하고 UploadFile List 리턴 ->  리포지토리에 저장
    List<UploadFile> uploadFiles = fileStore.storeFiles(form.getImageFiles());

    // 리포지토리에 저장
    Item item = new Item();
    item.setItemName(form.getItemName());
    item.setAttachFile(uploadFile);
    item.setImageFiles(uploadFiles);
    itemRepository.save(item);

    redirectAttributes.addAttribute("itemId",item.getItemId());

    return "redirect:/items/{itemId}";
}

• 1. @PostMapping saveItem에서 ItemForm을 통해 받은 데이터들을 @ModelAttribute ItemForm에 프로퍼티 삽입
• 2. fileStore.storeFile, fileStore.storeFiles을 통해 1번에서 삽입된 파일들을 일을 서버(file.dir)에 저장하고 리턴받은 UploadFile, UploadFiles List를 리포지토리에 저장합니다.
• 저장하고 난뒤  /items/{itemId} (리다이렉션 어트리뷰트에 추가된 itemId) 로 리다이렉트

- itemView

@GetMapping("/items/{itemId}")
public String itemView(@PathVariable Long itemId, Model model)
{
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item",item);
    return "item-view";
}

• 제출 버튼 클릭 후 saveitem 메소드 호출 후 리다이렉션 된 /Item/{ItemId} URI  
• 경로 변수로 넘어온 Id값을 통해 해당 Id값에 대한 Item 상세 정보를 보여주는 item view 뷰템플릿 호출합니다.

- downloadImage

• 파일 리스트에 있는 파일들을 폼에서 th:each를 통해 th:src를 URI로 뿌려주는데 컨트롤러에서는 뿌려준 이 URI를 @ResponseBody로 처리해서 해당파일을 UrlResource로 화면에 보여주었습니다.

- downloadAttach

item-view.html

// 다운로드
@GetMapping("/attach/{itemId}")
public ResponseEntity<Resource> downloadAttach(@PathVariable Long itemId) throws MalformedURLException {
    Item item = itemRepository.findById(itemId);
    String uploadFileName = item.getAttachFile().getUploadFileName();
    String storeFileName = item.getAttachFile().getStoreFileName();

    UrlResource resource = new UrlResource("file:" + fileStore.getFullPath(storeFileName));

    log.info("uploadFileName={}",uploadFileName);

    String encode = UriUtils.encode(uploadFileName, StandardCharsets.UTF_8);

    // 다운로드 하기 위해서 attachment; filename="다운받을 파일이름"을 Header CONTENT_DISPOSITION에 설정
    String contentDisposition = "attachment; filename=\"" + encode + "\"";

    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_DISPOSITION,contentDisposition)
            .body(resource); // resource 다운
}

• 다운로드 받은 파일을 찾기 위해 ItemId를 통해 Repository에서 Item을 조회하고
• 조회한 Item의 StoreFile이름과 UploadFile 이름을 얻어냅니다.
• 얻어낸 StoreFile이름으로 서버의 디렉토리(file.dir)로 부터 파일 리소스를 얻어 냅니다.
• 다운로드 하기 위해서 attachment; filename="업로드 한 파일이름" 을 Header CONTENT_DISPOSITION에 설정해 주어야 합니다. ( 파일 다운로드시에 클라이언트가 업로드한 파일 이름 으로 다운로드 하기 위해서 )