1

Creo que no es una api muy conocida por eso no había preguntado hasta ahora pero, dado que no hay manera de hacerlo por mi cuenta, a ver si hay suerte y alguien más lo ha usado.

Estoy haciendo un web con la api de Open Project. He seguido su documentación para añadir archivos adjuntos en una tarea ya creada pero, a pesar de no devolverme ningún error, no mete los archivos en la tarea.

La documentación es un poco confusa así que no sé hasta qué punto estaré haciéndolo bien, sin embargo, dejo aquí el script que utilizo para enviarlo.

var dataForm = new FormData();

dataForm.append("metadata", JSON.stringify({
   "fileName": attachment.files[0].name,
}));

dataForm.append("file", attachment.files[0]);

$.ajax({
   url: "http://mipagina.openproject.com/api/v3/work_packages/{ID}/attachments",
   method: "POST",
   enctype: 'multipart/form-data',
   processData: false,
   data: dataForm,
   cache: false,
   success: function (data) {
      console.log(dataForm);
      console.log(data);
   },
   error: function () {
      console.log("error");
   }
 });

Donde attachment es el la forma de identificar el input file del formulario, no lo pongo porque el error está en la forma de enviar los datos, del html se recoge todo bien y el servidor no envía ningún error.

Y esta es la documentación que estoy siguiendo para enviarlo: http://docs.openproject.org/apiv3-doc/#attachments-attachments-by-work-package-post Pero, al ser todo un JSON, no entiendo cómo debo enviar los datos para que los pueda procesar...

EDIT

Por lo que he visto, gracias a A.Cedano, antes de la petición el dataForm se encuentra vacío, directamente me devuelve FormData {} sin nada dentro... Por ahora he probado lo siguiente:

var metadata = {
     "fileName": attachment.files[0].name,
 };

var dataForm = {
    "metadata": metadata,
    "file": attachment.files[0]
}

Que devuelve un JSON:

 {
file: File(número) {
    lastModified: número,
    lastModifiedDate: Fecha,
    name: "archivo.jpg",
    size: tamaño,
    type: "image/jpeg",
    webkitRelativePath: ""
 },

 metadata {
    filename: "archivo.jpg"
 }
}

La fecha, tamaño e id no creo que sea demasiado importante por eso no lo he copiado pero si es necesario lo pongo.

EDIT2

Me he dado cuenta que, al hacer la petición el success devuelve un JSON con "_type" : "Collection", otro tipo de la misma API, cuando, según la documentación, lo que devuelve debería ser un JSON con "_type" : "Attachment".

Según la documentación, esto pasa cuando el usuario hace una petición que devuelve más de un elemento sin embargo no se está haciendo ese tipo de petición. Además realmente no se espera una repuesta como tal más allá de la confirmación.

EDIT3 Siguiendo con el Edit 2, sin poner número de ID me devuelve bastantes trabajos dentro del JSON con "_type":"Collection" así que es posible que el hecho de que me devuelva vacío es debido a que me está devolviendo los archivos adjuntos de esa tarea en vez de insertar los que yo le doy.

8
  • ¿Esto enctype: 'multipart/form-data' no debe estar en el formulario, en vez de en la petición Ajax? ... <form enctype="multipart/form-data" method="post" name="elNombre" id="elId"> </form>
    – A. Cedano
    Commented el 20 abr. 2018 a las 10:52
  • El formulario lo crea automáticamente la API, no me permiten añadir ni quitar nada de ahí que lo envíe como parte de la petición ya que en la documentación indican que debe ser de ese tipo.
    – Rabegi
    Commented el 20 abr. 2018 a las 11:29
  • ¿Puedes tratar de mostrar el error, modificando esta parte: error: function ( jqXHR, textStatus) { console.log("error"+ textStatus); } y decirnos si hay algún mensaje de error en la consola? ¿Podrías también poner esto: console.log(dataForm); fuera del código relativo a Ajax y decirnos lo que imprime? ¿El código entra en el success?
    – A. Cedano
    Commented el 20 abr. 2018 a las 11:34
  • Ahora edito la pregunta con eso pero la función del error no la realiza, el servidor lo da como bueno por lo que hace el success (he intentado hacer lo que me decías ahí pero no devuelve nada). Por otra parte, efectivamente el dataForm está vacío antes de realizar la petición... Edito con otras cosas que he probado y sí lo rellenaban pero tenían el mismo resultado
    – Rabegi
    Commented el 20 abr. 2018 a las 11:46
  • El dataForm no debería estar vacío, tú lo creas aquí: var dataForm = new FormData(); y luego aquí le agregas datos: dataForm.append( ... ), por lo tanto no debe estar vacío. Si después de agregar los datos pones un console.log(dataForm) y no imprime nada, significa entonces que el objeto no se está creando. Ahora, como dices que no te permite acceder al form, si es que lo hay, no sabría qué decirte. Lo cierto es que dataForm debe tener datos para que funcione y esos datos deben tomarse de alguna parte. Otra cosa que no sé de donde viene es attachment supongo que será algo de la API
    – A. Cedano
    Commented el 20 abr. 2018 a las 11:50

2 respuestas 2

2

Esto es lo que dice la documentación:

Para agregar un archivo adjunto a un paquete de trabajo, un cliente debe emitir una solicitud de tipo multipart/form-data con exactamente dos partes.

La primera parte debe llamarse metadata. Se espera que su tipo de contenido sea application/json, el cuerpo debe ser un solo objeto JSON, que contenga al menos el fileName y, opcionalmente, la descripción (description) de los adjuntos.

La segunda parte se debe llamar file, su tipo de contenido debe coincidir con el mime type del archivo. El cuerpo debe ser el contenido sin formato del archivo. Tenga en cuenta que se debe indicar un nombre de archivo en la disposición del contenido de esta parte, sin embargo, se ignorará. En su lugar, se utilizará el nombre de archivo dentro del JSON de la parte de metadatos.

Para cumplir esos requisitos, puedes intentar algo como esto:

var file=attachment.files[0];
var dataForm = new FormData();

/*1ª parte*/
dataForm.append("metadata", new Blob([JSON.stringify({
    fileName: file.name;
})], {
    type: "application/json"
}));

/*2ª parte*/
dataForm.append("file", file);

También

En la documentación de $.Ajax no aparece ninguna opción llamada enctype, tal y como la tienes en tu código, la opción que existe para indicar el tipo de contenido escontentType, por lo que conviene que modifiques esta línea:

enctype: 'multipart/form-data',

cambiándola por (de paso le indicas el charset):

contentType: 'multipart/form-data; charset=UTF-8',

4
  • 1
    bueno punto lo del encType, no sé cómo no lo ví. Tu pregunta además engloba la mía, así que borro Commented el 20 abr. 2018 a las 17:02
  • He estado haciendo pruebas como dices pero continua igual, no lanza error pero tampoco realiza la acción...
    – Rabegi
    Commented el 23 abr. 2018 a las 11:20
  • @Rabegi No sé de qué otra forma ayudarte, dado que no tengo la posibilidad de probar/usar esa API. Supongo que no es un problema de URL, o de permisos, o algo así. Si la API tiene algún foro de soporte quizá lo mejor sea que contactes con ellos. Si trabajas con PHP, ayudaría bastante que pudieras revisar el log de errores, quizá haya alguna traza de lo que está ocurriendo.
    – A. Cedano
    Commented el 23 abr. 2018 a las 11:25
  • La API tiene soporte pero parece que los creadores no se pasan demasiado por allí, aún así preguntaré a ver si tengo suerte. Trabajo con C# y .NET Framework. Muchas gracias por intentarlo, aunque no haya resuelto el problema he aprendido cosas de Ajax que no conocía :)
    – Rabegi
    Commented el 23 abr. 2018 a las 11:38
1

Prueba tal y como lo estas haciendo, pero:

  • Estableciendo el nombre de archivo en el segundo append de FormData.
  • Estableciendo el contentType en multipart/form-data
  • Si lo anterior sigue sin funcionar, prueba con contentType en false como aparecen en esta respuesta de SO en ingles

Con esto, quedaría:

var dataForm = new FormData();
var file = attachment.files[0];

dataForm.append("metadata", JSON.stringify({
   "fileName": file.name,
}));

dataForm.append("file", file, file.name);

$.ajax({
   url: "http://mipagina.openproject.com/api/v3/work_packages/{ID}/attachments",
   method: "POST",
   contentType: "multipart/form-data",
   processData: false,
   data: dataForm,
   cache: false,
   success: function (data) {
      console.log(dataForm);
      console.log(data);
   },
   error: function () {
      console.log("error");
   }
 });
1
  • Es buena idea y lo he estado probando pero no he conseguido ningún resultado diferente...
    – Rabegi
    Commented el 23 abr. 2018 a las 11:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.