Luis LorenzoXingLinkedInInfolancerFacebookTwitterfeed /  feed comentarios

Parse.com: Subir archivos a través de JavaScript y REST API

Para subir archivos directamente a Parse.com desde nuestra aplicación JavaScript debemos utilizar la REST API. Una aproximación de código sería la siguiente:

En el HTML creamos el campo de tipo file:

<input type="file" id="file_id" placeholder="Subir archivo..." />
<input type="button" name="send" value="Enviar" onclick="fileUpload()" />

Y en el JS la siguiente función:

function fileUpload() {
  BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;

  var bb = new BlobBuilder();
  bb.append(document.getElementById('file_id').files[0]);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://api.parse.com/1/files/"+document.getElementById('file_id').files[0].name, true);
  xhr.setRequestHeader("X-Parse-Application-Id", "APP_ID");
  xhr.setRequestHeader("X-Parse-REST-API-Key", "REST_API_KEY");
  xhr.setRequestHeader("Content-Type", document.getElementById('file_id').files[0].type);

  xhr.onreadystatechange = function() {
      if (xhr.readyState != 4) { 
          return; 
      }
      if (xhr.status == 201) {
          var serverResponse = xhr.responseText;
          serverResponse = JSON.parse(serverResponse);
          // Una vez subido el fichero podemos asociarlo a un objeto
          var TestObject = Parse.Object.extend("TestObject");
          var test = new TestObject();
          test.set("picture", {
              "name": serverResponse.name,
              "__type": "File"
          });
          test.save();
          alert("Success!!");
      } else {
        alert("Error!!");
      }
  };

  xhr.send(bb.getBlob(document.getElementById('file_id').files[0].type));
}

Sin comentarios

Publicar comentario