WEB 서비스에서 사용

아래 함수를 사용해서 구현하시면 편합니다.

// elm : 클릭할 수 있는 html element 예를 들면, 파일첨부버튼
// key : api-key
// callback : url을 받아올때 실행되는 함수, 사용자에게 표시하는 로직을 구현하면 됨
// 예) makeFilekiwiButton( document.getElementById("btn"), "keykeyekyefwefwefsfadf"
// , url=>alert(url));
function makeFilekiwiButton(elm, key, callback) {
elm.addEventListener("click", function() {
var w = 500;
var h = 500;
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var win = window.open("", "_blank", 'menubar=yes,location=yes,resizable=yes,scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
const url = 'https://api.file.kiwi/v1/webfolder';
const options = {
method: 'POST',
// mode:'cors',
headers: {
//Accept: 'application/json',
'Content-Type': 'application/json',
'x-api-key': key
},
body: '{}'
};
fetch(url, options)
.then(res => res.json())
.then(json => {
var url = json.url;
callback(url);
win.document.write("파일을 업로드할 웹폴더가 생성중입니다. 잠시만 기다려주세요.");
win.document.write("<","script",">");
win.document.write('alert("* 파일업로드는 10분내에 시작되야 합니다.(그때까지 완료될 필요는 없음)\\n* 업로드중에는 현재창을 닫지 말고 유지해야 하지만,\\n* 링크전달을 기다릴 필요는 없습니다. 웹폴더 링크는 바로 전달해도 됩니다.");');
win.document.write("location.href='" + url + "'");
win.document.write("<","/script",">");
//win.location.href = url;
if (window.focus) {
win.focus();
}
})
.catch(err => console.error('error:' + err));
});
};

1.채팅창에 대용량 파일첨부 기능을 추가하는 예제

코드 보기 및 사용해 보기

하단 파일첨부 버튼을 클릭하세요.

2. 게시판에 대용량 파일 첨부 기능 추가

그누보드에 적용하기

XE엔진/라이믹스 모듈/컴포넌트