728x90
반응형
Dropzone.js를 사용하여 파일을 업로드할 때, 동일한 파일을 두 개의 API에 전송하는 것은 가능합니다.
이를 구현하려면 Dropzone의 이벤트를 활용하여 파일 업로드를 커스터마이징해야 합니다.
아래는 기본적인 방법입니다.
구현 방법
- Dropzone 설정: Dropzone 인스턴스를 생성할 때 파일 업로드 동작을 수정합니다.
- 두 API로 파일 전송: success 또는 addedfile 이벤트 핸들러를 사용하여 파일이 추가되었을 때 다른 API로도 전송합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropzone Dual API Upload</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js"></script>
</head>
<body>
<form id="dropzoneForm" class="dropzone"></form>
<script>
// Dropzone 설정
const dropzone = new Dropzone("#dropzoneForm", {
url: "/api1/upload", // 첫 번째 API URL
method: "post",
autoProcessQueue: true, // 자동 업로드
});
// 첫 번째 업로드가 성공적으로 완료되면 두 번째 API로 전송
dropzone.on("success", function (file, response) {
console.log("First API response:", response);
// 두 번째 API 요청
const formData = new FormData();
formData.append("file", file);
// 두 번째 API 호출
fetch("/api2/upload", {
method: "POST",
body: formData,
})
.then((res) => res.json())
.then((data) => {
console.log("Second API response:", data);
})
.catch((err) => {
console.error("Error uploading to second API:", err);
});
});
</script>
</body>
</html>728x90
반응형
'Front > JS & jQuery' 카테고리의 다른 글
| [js] 파일전송 클라이언트 전송 예제 (0) | 2024.12.18 |
|---|---|
| [jquery] Object.assign() 와 $.extend 차이 (0) | 2024.12.16 |
| [js] ! 연산자 사용 주의사항 (0) | 2024.12.10 |
| [js] every() (0) | 2024.12.09 |
| [js] 재귀함수로 배열 평탄화 2 (0) | 2024.12.08 |