javascript - navigationend - router events angular 6

Angular 2+ HTTP POST y GDrive API. Carga de archivos reanudables con nombre

Question

Estoy intentando subir archivos a Google Drive en Angular 2. Hasta ahora, puedo subir archivos, pero sin title y están "Sin título".

Aquí hay un código para hacer eso:

gDriveUploader(file): Promise<any> {
let authToken = tokenHere;
const url = `https://www.googleapis.com/upload/drive/v2/files/`
    let formData:FormData = new FormData();
    formData.append(''title'', file, file.name);
    let headers = new Headers({
      ''Authorization'': ''Bearer '' + authToken
    });
    headers.append(''Accept'', file.type);
    let options = new RequestOptions ({ 
      headers: headers,
    });

    console.log(''OPTIONS: '', options)

    return this.http.post(`${url}`, formData, options)
        .toPromise()
           .then(response => response.json())
           .catch(e=>console.log(e));
}

Sé que para enviar metadatos con archivos, debo agregar estos metadatos al cuerpo de la Request y usarlos en tipos de carga multipart o resumable . Pero aquí me enfrenté problema tras problema y simplemente no puedo hacerlo correctamente.

Me equivoqué completamente. Aquí está uno de mis enfoques con el tipo de carga resumable :

gDriveUploader(file): Promise<any> {
let authToken = token;
const url = `https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable`
    console.log(''FILE TO UPLOAD: '', file)
    let formData:FormData = new FormData();
    formData.append(''name'', file, file.name);
    let headers = new Headers({
      ''Authorization'': ''Bearer '' + authToken,
      ''Content-Type'': ''application/json; charset=UTF-8'', //if remove "Bad Content" Error
      //''Content-Length'': file.size, not sure if this one right?
    });
    let options = new RequestOptions ({ 
      headers: headers,
    });

    return this.http.post(`${url}`, formData, options)
        .toPromise()
           .then(response => response.json())
           .catch(e=>console.log(e));
}

eso no son solo dos de mis enfoques ...

De acuerdo con Drive API para la carga resumable :

POST https://www.googleapis.com/drive/v3/files?uploadType=resumable 

HTTP/1.1
Authorization: Bearer [YOUR_AUTH_TOKEN]
Content-Length: 38
Content-Type: application/json; charset=UTF-8
X-Upload-Content-Type: image/jpeg
X-Upload-Content-Length: 2000000

¿Qué es Content-Length: 38 ? es la longitud del archivo y puedo usar file.size ?

Con multipart no puedo encontrar la manera de agregar esos separadores de límites en la solicitud.

Vi algunas Q y A, esa multipart no era compatible con Angular, pero eso fue hace 1-2 años. ¿Qué te parece ahora?

¿De alguna manera puedo usar la carga reanudable en GDrive con metadatos de archivos adicionales usando características estándar de Angular?

Answer 1

Asi que. Un poco más de investigación sobre cómo funciona API. Se me ocurrió la siguiente solución para la carga de archivos reanudables. Idea principal, esa primera vez tengo que hacer una solicitud y "establecer metadatos" para mi archivo y obtener respuesta con el enlace, donde subir el archivo. Y este enlace vino como uno de los response header llamado location .

Aquí está el código completamente funcional. Solo pase el objeto File a la primera función.

Acabo de hacer rápidamente 2 funciones para esto. El primero establecerá los metadatos (solo nombre) y llamará a la segunda función para cargar solo datos binarios.

gDriveUploader(file): Promise<any> {
  let authToken = token
  const url = `https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable`
      let headers = new Headers({
        ''Authorization'': ''Bearer '' + authToken,
        ''Content-Type'': ''application/json; charset=UTF-8'',
      });
      let options = new RequestOptions ({ 
        headers: headers,
      });
      return this.http.post(`${url}`, {name: file.fullName}, options) //just set the name
          .toPromise()
            .then(response => this.gDriveUploadFile(file, response.headers.get(''location''))) //call second function to upload `file` to proper URI from response
            .then(response => {
                let id = response.json().id //parse id of uploaded file
                let resp = {fileName: file.fullName, fileType: file.fileType, fileSize: file.size, fileId: id} //create an object with file file properties, if you need that
                return resp // return object back to function that called this service
            })
            .catch(e=>console.log(e));
  }

Segunda función para cargar datos:

gDriveUploadFile(file, url): Promise<any> { //file and url we got from first func
  let authToken = token
      let headers = new Headers({
        ''Authorization'': ''Bearer '' + authToken,
        ''Content-Type'': ''application/json; charset=UTF-8'',
        ''X-Upload-Content-Type'': file.type
      });
      let options = new RequestOptions ({ 
        headers: headers,
      });
      return this.http.post(`${url}`, file, options) //call proper resumable upload endpoint and pass just file as body
          .toPromise()
  }

Tal vez la solución no es ideal, hasta ahora no manejo los errores aquí y no uso resumable funciones de resumable , como subir archivos en partes, simplemente cargue el archivo de una vez. Pero, con un poco de suerte, si alguien más se queda con la carga de GDrive puede hacerse una idea.