Alfresco - javascript로 upload.post에 동적 양식 제출

Question

Alfresco를 위해 개발하려는 대시렛에 문제가 있습니다. HTML 5의 끌어서 놓기 및 파일 API를 사용하여 간단한 끌어서 놓기 파일 업로드 대시 렛입니다.

function handleFileSelect(evt) { 
    var files = evt.target.files || evt.dataTransfer.files, 
     tmpForm, tmpDest, tmpMeta, tmpType, tmpName, tmpData; 

    dropZone.className = "can-drop"; 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    for (var i=0,f;f=files[i];i++) { 

    tmpForm = document.createElement('form'); 
    tmpDest = document.createElement('input'); 
    tmpDest.setAttribute('type', 'text'); 
    tmpDest.setAttribute('name', 'destination'); 
    tmpDest.setAttribute('value', destination); 
    tmpForm.appendChild(tmpDest); 
    tmpMeta = document.createElement('input'); 
    tmpMeta.setAttribute('type', 'text'); 
    tmpMeta.setAttribute('name', 'mandatoryMetadata'); 
    tmpMeta.setAttribute('value', window.metadataButton.value); 
    tmpForm.appendChild(tmpMeta); 
    tmpType = document.createElement('input'); 
    tmpType.setAttribute('type', 'text'); 
    tmpType.setAttribute('name', 'contenttype'); 
    tmpType.setAttribute('value', "my:document"); 
    tmpForm.appendChild(tmpType); 
    tmpName = document.createElement('input'); 
    tmpName.setAttribute('type', 'text'); 
    tmpName.setAttribute('name', 'filename'); 
    tmpName.setAttribute('value', f.name); 
    tmpForm.appendChild(tmpName); 
    tmpData = document.createElement('input'); 
    tmpData.setAttribute('type', 'file'); 
    tmpData.setAttribute('name', 'filedata'); 
    tmpData.setAttribute('value', f); 
    tmpForm.appendChild(tmpData); 

    Alfresco.util.Ajax.request({ 
     url: Alfresco.constants.PROXY_URI_RELATIVE + "api/upload", 
     method: 'POST', 
     dataForm: tmpForm, 
     successCallback: { 
     fn: function(response) { 
      console.log("SUCCESS!!"); 
      console.dir(response); 
     }, 
     scope: this 
     }, 
     failureCallback: { 
     fn: function(response) { 
      console.log("FAILED!!"); 
      console.dir(response); 
     }, 
     scope: this 
     } 
    }); 
    } 
} 

서버는 500 응답, 나는 웹 스크립트 디버깅 수준의 로깅을 설정하는 경우, upload.post 다음 drop 이벤트 리스너를 들어, 나는 겉으로는 모든 문제의 원인이 다음과 같은 함수를 호출 다음과 함께 반환합니다 :

DEBUG [repo.jscript.ScriptLogger] ReferenceError: "formdata" is not defined. 

적어도 위의 양식이 제대로 제출되지 않았 음을 나타냅니다. Chrome 개발자 도구를 통해 모든 것을 탐색 할 때 요청 메시지가 REST 클라이언트와 크게 다르다는 것을 알았습니다. 위의 코드는 Content-Type: application/x-www-form-urlencoded을 사용하여 요청하는 반면 REST 클라이언트를 사용하거나 Alfresco Share의 표준 업 로더는 Content-Type: multipart/form-data을 사용합니다. multipart/form-data을 사용하여 양식을 제출해야하는 경우 업로드중인 파일을 포함하도록 요청 본문 (경계, Content-Disposition 등)을 작성하는 가장 쉬운 방법은 무엇입니까?

Answer 1

javascript를 통해 양식 HTML 요소를 만드는 아이디어를 버리고 브라우저가 File API 및 끌어서 놓기 API를 지원하면 XMLHttpRequest2 API도 지원할 것으로 가정합니다. HTML5 File Upload to Java Servlet에 따라, 위의 코드는 지금 읽 필요한 이벤트 리스너와

function handleFileSelect(evt) { 
    var files = evt.target.files || evt.dataTransfer.files, 
     xhr = new XMLHttpRequest(); 

    dropZone.className = "can-drop"; 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    for (var i=0,f;f=files[i];i++) { 
    formData = new FormData(); 
    formData.append('destination', destination); 
    formData.append('mandatoryMetadata', window.metadataButton.value); 
    formData.append('contenttype', "my:document"); 
    formData.append('filename', f.name); 
    formData.append('filedata', f); 
    formData.append('overwrite', false); 

    xhr.open("POST", Alfresco.constants.PROXY_URI_RELATIVE + "api/upload"); 
    xhr.send(formData); 
    } 
} 

나중에 추가 할 수 있습니다. Alfresco AJAX 메소드가 재고 및 표준으로 인해 기본 요청이 크게 수정되어 단순히 FormData() 객체를 보내는 것이 매우 어렵게 보일 것입니다.