FCKEditor 이미지 업로드 기능 구현하기

FCKEditor를 사용하는 Java 환경에서 이미지 업로드를 구현 하기 위해서는
FCKEditor Java 버전을 다운받아서 사용해야 한다.

WAS가 톰캣인 경우라면 별다른 수정없이 웹에 널리 알려진 방법대로 사용이 가능하나,
업로드 쪽을 직접 뜯어 고치고 싶다던지, 톰캣 환경이 아니라면 소스의 수정은 불가피하다.


우리가 지금 진행중인 프로젝트 역시 조금은 다른 환경에서 가동되므로,
FCKEditor 를 약간 수정 하되, FCKEditor에서 제공하는 디자인과 틀을 그대로 가져가면서
업로드 처리 부분만 제작했다.
다시 간단하게 말해서, FCKEditor 에서 요구하는 양식에 맞춰 주기만 하면 된다.

서버측 파일 업로드 프로그램이야 알아서 간단하게 개발 가능할 테지만
이를 FCKEditor 이미지 업로드 폼에서 작동 되게 하는건 조금의 설정이 필요!.

fckeditor 폴더의 editor -> dialog 폴더와 그아래 fck_image 폴더에 우리가 찾는 이미지 업로드 다이얼로그 html 폼과 js 파일이 존재 한다. (이는 FCKEditor 2.6.6 기준이다)

fck_image.js 파일을 열고
window.onload 이벤트에서 아래와 같은 부분을 찾아서 직접 만든 업로드 처리 서블릿을 명시한다.

    // Set the actual uploader URL.
    if ( FCKConfig.ImageUpload )
        GetE('frmUpload').action = "니업로드처리서블릿주소";

    dialog.SetAutoSize( true ) ;

여기 주소만 수정해줘도 거의 모든 설정은 끝난 것과 마찬가지
(이부분에서 설정이 중요하다. html 파일의 upload form 영역의 action 주소는 공백으로 놔둘것)

아래로 더 살펴보면 아래와 같은 두가지 메소드를 찾을 수 있다.

function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
{
    // Remove animation
    window.parent.Throbber.Hide() ;
    GetE( 'divUpload' ).style.display  = '' ;

    switch ( errorNumber )
    {
        case 0 :    // No errors
            alert( 'Your file has been successfully uploaded' ) ;
            break ;
        case 1 :    // Custom error
            alert( customMsg ) ;
            return ;
        case 101 :    // Custom warning
            alert( customMsg ) ;
            break ;
        case 201 :
            alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ) ;
            break ;
        case 202 :
            alert( 'Invalid file type' ) ;
            return ;
        case 203 :
            alert( "Security error. You probably don't have enough permissions to upload. Please check your server." ) ;
            return ;
        case 500 :
            alert( 'The connector is disabled' ) ;
            break ;
        default :
            alert( 'Error on file upload. Error number: ' + errorNumber ) ;
            return ;
    }

    sActualBrowser = '' ;
    SetUrl( fileUrl ) ;
    GetE('frmUpload').reset() ;
}

var oUploadAllowedExtRegex    = new RegExp( FCKConfig.ImageUploadAllowedExtensions, 'i' ) ;
var oUploadDeniedExtRegex    = new RegExp( FCKConfig.ImageUploadDeniedExtensions, 'i' ) ;

function CheckUpload()
{
    var sFile = GetE('txtUploadFile').value ;
    if ( sFile.length == 0 )
    {
        alert( 'Please select a file to upload' ) ;
        return false ;
    }

    if ( ( FCKConfig.ImageUploadAllowedExtensions.length > 0 && !oUploadAllowedExtRegex.test( sFile ) ) ||
        ( FCKConfig.ImageUploadDeniedExtensions.length > 0 && oUploadDeniedExtRegex.test( sFile ) ) )
    {
        OnUploadCompleted( 202 ) ;
        return false ;
    }

    // Show animation
    window.parent.Throbber.Show( 100 ) ;
    GetE( 'divUpload' ).style.display  = 'none' ;

    return true ;
}

메소드 명만 봐도 아! 우리는 저것이 뭘 하는 이벤트겠구나 하는 감을 잡을 수 있다.
폼이 전송 되기전 onSubmit 이벤트 처리 메소드이며 하나는 전송이 완료되어 호출 되는 callback 메소드이다.

이 두가지 메소드는 뜯어 고칠 일이 전혀 없다.

파일 업로드를 처리하는 서블릿에서 파일 전송이 끝났다면
직접 OnUploadCompleted 메소드만 호출 해 주면 끝난다.

ex: 업로드를 처리하는 서블릿에서 스크립트 메소드 호출

    if(!item.isFormField() && item.getSize()>0) {
                       
                        String fieldName = item.getFieldName();
                        String fileName = item.getName();
                        String contentType = item.getContentType();
                        boolean isInMemory = item.isInMemory();
                        long sizeInBytes = item.getSize();
                       
                        File uploadedFile = new File(savePath,fileName);
                        try {
                            item.write(uploadedFile);
                            item.delete();
                           
                            String retVal="0";
                            String newName="";
                            String fileUrl= "http://"+request.getServletRequest().getServerName()+":"+request.getServletRequest().getServerPort()+"/common/uploads/"+fileName;
                            String errorMessage="";
                       
                            HttpServletResponse res = request.getServletResponse(true);
                            PrintWriter out = res.getWriter();
                            out.println("<script type=\"text/javascript\">");
                            out.println(" window.parent.OnUploadCompleted("+retVal+",'"+fileUrl+"','"+newName+"','"+errorMessage+"');");
                            out.println("</script>");
                            out.flush();
                            out.close();

끝...

혹시라도 위의 작업을 완료하고 이미지를 업로드 하는데 만약,
액세스 거부 에러 또는 권한 없다는 스크립트 에러가 나면 본문과 이 서블릿에서
document.domain 을 서로 맞춰주면 된다.