0

Alfresco用に開発しようとしているダッシュレットで問題が発生しています。これは、HTML5のドラッグアンドドロップおよびファイルAPIを使用した単純なドラッグアンドドロップファイルアップロードダッシュレットです。イベントリスナーのdrop場合、すべての問題の原因と思われる次の関数を呼び出します。

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で応答し、Webスクリプトのデバッグレベルのログをオンにすると、upload.postは次のように返されます。

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など）を書き出す最も簡単な方法は何ですか？

4

1 に答える 1

0

JavaScript を使用してフォームの HTML 要素を作成するという考えは捨てました。ブラウザーがファイル 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()オブジェクトを送信することは非常に困難です。

于 2012-11-01T15:31:17.767 に答える