I posted short topic about my way to uploading files to Alfresco some time before. Now I turned all that code into my own component and added it to Tag Library and also added mimetype detection and some other amazing stuff. I'll try to describe some facts about my implementation in this blogpost, so be encouraged to keep reading ;-).

I'm not going to describe how to build own component, there are many tutorials on web (for example here or here) and it's much simplier than stuff I'm going to write about (many ughly javascript code). So let's begin.Firstly, thanks to component,jsp code is simplified. I compressed whole code into component (form inputs, labels, also js libraries includes), so my code lookslike this (note that javascript part is optional and is there just to disable OK button on page load; also mimetype selector is optional).

<%@ taglib uri="http://www.shmoula.cz/jsf/component/tags" prefix="shmoula" %>

<script type="text/javascript">
function pageLoaded(){
    document.getElementById("dialog:finish-button").disabled = true;
}
window.onload = pageLoaded;
</script>

. . .

    <h:inputHidden id="fileId" value="#{SlowUpload.fileId}" />
    <shmoula:upload label="soubor" />
    <r:mimeTypeSelector id="mime-type" value="#{SlowUpload.mimeType}" />

. . .

FileId parameter does still the same thing – it connects get data with post data – identificator is created and then AJAX call is made, in which goes this id and filename to servelt, which creates a new FileBean and also get mimetype from filename and send it back. You can see this snippet on following listing.

 public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException{
       PrintWriter out = response.getWriter();
       
       try{
           // creating a new bean for fileinfo storing and also setting some info
           this.fileUploadBean = new FileUploadBean();
           this.uploadId = request.getParameter("uploadid");
           String filename = request.getParameter("filename");

           // fetching mimetypeService from SlowUpload bean; more info follows
           SlowUpload slowUpload = (SlowUpload)request.getSession().getAttribute("SlowUpload");
           MimetypeService mimetypeService = slowUpload.getMimetypeService();
       
           // guessing and returning mimetype
           // if mimetype is not recognized, application/octet-stream is returned
           out.print(mimetypeService.guessMimetype(filename));
           
       }catch(Exception e){
           out.print("FALSE");
       }
}

MimetypeService must be injected into SlowUpload bean, so I need some Setters in my class for that and definition in Faces config:

 <managed-bean>
       <managed-bean-name>SlowUpload</managed-bean-name>
       <managed-bean-class>cz.shmoula.SlowUpload</managed-bean-class>
       <managed-bean-scope>session</managed-bean-scope>
. . .
       <managed-property>
           <property-name>mimetypeService</property-name>
           <value>#{MimetypeService}</value>
       </managed-property>
. . .
   </managed-bean>

 Now onComplete function is called thanks to prototype library AJAX calling. In this function a right option in select box is selected just through a simple loop, as you can see:

function callbackFunction(originalRequest){
    var vystup = new String(originalRequest.responseText);
    
    if(vystup=="FALSE"){
        rollback(1);
        alert("Chyba pri uploadu");
    }else{
        var select = document.getElementById("dialog:dialog-body:mime-type");
        for(i=0;i<select.length;i++){
            var selectVal = new String(select.options[i].value);
            if(selectVal.match(vystup)!=null){
                select.options[i].selected = true;
                select.selectedIndex = i;    
                break;
            }
        }
    }
}

And after all this whole formular is sent to servlet via POST method. All this is described in previous post, so you can check it out there. But there is one change – servlet returns success of operation inside hidden input. So I changed servlet this way:

response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println(". . .<input type="hidden" id="iframe_status" value=""+this.fileUploadBean.getFileName()+"" />. . .");

On client side is after (un-)successfully file upload called handle_upload() function, which gets value from included iFrame and decides that operation was or was not successfull and call appropriate actions:

function handle_upload(){
    var doc = getIframeDocument();
    var filename = doc.getElementById("iframe_status").value;
   
    if(filename != "FALSE"){
        var fileNameInput = document.getElementById('dialog:dialog-body:fileName');
        if(fileNameInput!=null)
            fileNameInput.value = filename;
        checkButtonState();
    }else{
        rollback(1);
        alert("Chyba pri uploadu!");
    }
}

CheckButtonState function does nothing else, than enable OK button for complete submit all those information (if some other conditions came true) and rollback function sets form target to original target – …/dialog/container.jsp.

That's all folks! Simplified procedure of my component activity. I wish I have not to write these hacks and all those things are accessible by developer in alfresco (they are there, but you can't use them outside specified containers or-how-to-name-that) some simple way. Maybe in future I hope!