카테노이드 Kollus 동영상 업로드 추가

src/main/webapp/ux/plugins/gaga/gaga.kollus.js

@@ -0,0 +1,115 @@
+/*
+ * Kollus video upload (https://support.catenoid.net/) Common Java Script written by gagamel.
+ *
+ * Copyright (c) 2021 gagamel
+ * Dual licensed under GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2021-04-16 $
+ * 
+ * 사용 예)
+ * 		// Kollus 동영상 업로드는 다음과 같이 처리된다.
+ * 		// 1. 동영상 업로드 URL를 조회
+ * 		//    조회 한 데이터 중에 upload_file_key 값이 나오며,
+ * 		//    DB 처리를 위해 이 값을 input hidden 변수(예, kufKey)를 만들어 설정한다.
+ * 		// 2. 동영상 업로드 URL의 upload_url로 실제 업로드가 수행된다. (uploadVideo 함수)
+ *		// 3. Kollus 어드민에 등록된 채널별 콜백URL로 업로드 결과가 보내지면, 그 데이터를 가지고 DB 처리를 한다.
+ * 		<input type="hidden" name="kufKey"/>
+ * 
+ * 		// Import할 자바스크립트 파일
+ * 		<script type="text/javascript" src="/ux/plugins/gaga/gaga.kollus.js"></script>
+ * 
+ * 		<script type="text/javascript">
+ * 			// 동영상파일 선택 시
+ * 			$('#detailForm input[name=file]').on('change', function() {
+ * 				var file = this.files[0];
+ * 				gagaKollus.upload('Goods', file, $('input[name=kufKey]'));
+ * 			});
+ *		</script>
+ */
+
+var gagaKollus = {
+	
+	/**
+	 * 업로드
+	 * @param cateNm - 카테고리명(상품:Goods, 리뷰:Review, 전시:Display). 필수
+	 * @param file - 업로드할 파일. 필수
+	 * @param callback - 콜백함수. 필수
+	 * @author gagamel
+	 * @since 2021. 4. 19
+	 */
+	upload : function(cateNm, file, tgt) {
+		// 업로드 URL 정보 얻기
+		$.ajax({
+			url: '/kollus/video/upload/url/' + cateNm,
+			method: 'POST',
+			ContentType: 'application/x-www-forurlencoded',
+		}).always(function (data, status, xhr) {
+			// Do nothing
+		}).done(function (data) {
+//			console.log('====================== RESPONSE =======================\n');
+//			console.log(JSON.stringify(data, null, 4) + '\n');
+			
+			// 업로드파일키 설정
+			$(tgt).val(data.result['upload_file_key']);
+			
+			// 동영상 업로드
+			gagaKollus.uploadVideo(data, file);
+		}).fail(function (xhr, status, err) {
+			console.log('====================== Fail =======================\n');
+			console.log('xhr: ', xhr + '\n');
+			console.log('status: ', status);
+			console.log('err: ', err);
+		});
+	},
+	
+	/**
+	 * 동영상 업로드
+	 * @param uploadUrlInfo - 업로드 URL 정보
+	 * @param file - 업로드할 파일
+	 * @author gagamel
+	 * @since 2021. 4. 19
+	 */
+	uploadVideo : function(uploadUrlInfo, file) {
+		var uploadUrl = uploadUrlInfo.result['upload_url'];
+		
+		var uploadData = new FormData();
+		uploadData.append("upload-file", file);
+		uploadData.append('disable_alert', '1'); // 결과 메시지를 alert 미출력
+		uploadData.append('redirection_scope', 'no'); // 업로드 완료 후 redirect할 domain scope을 지정(outer → window.top.location을 이용, inner → window.location을 이용, no → redirect 하지 않음)
+		uploadData.append('accept', 'application/json');
+
+		$.ajax({
+			url: uploadUrl,
+			method: 'POST',
+			mimeType: 'multipart/form-data',
+			cache: false,
+			contentType: false,
+			processData: false,
+			data: uploadData,
+			timeout: 0
+		}).always(function (data, status, xhr) {
+			// Do nothing
+		}).done(function (data) {
+			console.log('====================== RESPONSE =======================\n');
+			console.log(JSON.stringify(data, null, 4) + '\n');
+		}).fail(function (xhr, status, err) {
+			console.log('====================== Fail =======================\n');
+			console.log('xhr: ', xhr + '\n');
+			console.log('status: ', status);
+			console.log('err: ', err);
+		});
+		
+		// 진행상태 확인
+//		let progressUrl = uploadUrlInfo.result['progress_url'];
+//		let uploadInterval = setInterval(function() {
+//			$.get(progressUrl, function (data) {
+//				console.log(data);
+//				$('.progress-bar').css('width', data.result.progress + '%');
+//				if (data.result.progress >= 100) {
+//					clearInterval(uploadInterval);
+//				}
+//			});
+//		}, 1000);
+	}
+	
+}