Recibo el error 404 en mi solicitud $.ajax en la API de Google. tengo estos codigos
var asyncLoad = require('react-async-loader'); var CLIENT_ID = '<SOME_ID>'; var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"]; var SCOPES = 'https://www.googleapis.com/auth/drive'; const mapScriptToProps = state => ({ gapi: { globalPath: 'gapi', url: 'https://apis.google.com/js/api.js' } }); @asyncLoad(mapScriptToProps) ...Usé el cargador asíncrono de reaccionar para obtener la API de Google antes de bundle.js. Luego obtengo el gapi en las propiedades. Aquí están mis próximos códigos para enviar un formulario.
submitForm(e){ e.preventDefault(); var data = this.refs.file.files[0]; var self = this; var formData = new FormData(); formData.append('data', data); $.ajax({ url: "https://www.googleapis.com/upload/drive/v3?uploadType=media&access_token="+encodeURIComponent(self.state.token), type: "POST", processData: false, data: formData, beforeSend: function (xhr) { /* Authorization header */ xhr.setRequestHeader("Authorization", "Bearer " + self.state.token); xhr.setRequestHeader('X-Upload-Content-Length', data.size); xhr.setRequestHeader("Content-Type", "image/jpeg"); xhr.setRequestHeader('X-Upload-Content-Type', "image/jpeg"); }, success: function(data){ if(typeof data === "string") data = JSON.parse(data); console.log(data); if(data.success){ console.log("done"); }else { console.log("error"); } } });}
Así que aquí, llamo a la función submitForm cuando se hace clic en el botón de carga. También tengo entrada de archivo con ref="file" . Esto se ejecuta en el lado del cliente (navegador). Recibí el error 404.
Lo que intento hacer aquí es cargar un archivo de imagen en Google Drive. ¿Cómo puedo hacer esto bien? ¿Alguna solución para mi problema?
El error 404 se debe a que a la URL le falta la parte de los files : https://www.googleapis.com/upload/drive/v3/files?uploadType=media . Consulte API de Google Drive > REST - Archivos: crear .
Logré cargar una imagen que se leyó desde <input type="file" accept="image/*"> con el método FileReader.readAsDataURL() de la siguiente manera:
var metadata = { name: 'image.jpg', mimeType: 'image/jpeg' } var user = gapi.auth2.getAuthInstance().currentUser.get(); var oauthToken = user.getAuthResponse(true).access_token; var boundary = 'foo_bar_baz'; var data = '--' + boundary + '\n'; data += 'content-type: application/json; charset=UTF-8' + '\n\n'; data += JSON.stringify(metadata) + '\n'; data += '--' + boundary + '\n'; var dataURL = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+EKhWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZ...' var dataURLparts = dataURL.split(',', 2); var dataURLheaderParts = dataURLparts[0].split(':'); var dataURLheaderPayloadParts = dataURLheaderParts[1].split(';'); data += 'content-transfer-encoding: ' + dataURLheaderPayloadParts[1] + '\n'; data += 'content-type: ' + dataURLheaderPayloadParts[0] + '\n\n'; data += dataURLparts[1] + '\n'; data += '--' + boundary + '--'; $.ajax({ type: 'POST', url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "Bearer " + oauthToken); }, contentType: 'multipart/related; boundary=' + boundary, data: data, processData: false }).done(function(response) { console.log(response); });Después de muchas horas de tirarme de los pelos y ver las mismas respuestas. Lo único que funcionó para mí fue cambiar de la solicitud de varias partes (que Google documenta) a usar FormData.
Crédito a esta respuesta .
Si bien los datos llegaron a Drive (carga exitosa), no se procesaron correctamente, por lo que la imagen o el PDF no se podían ver y la descarga mostró que se guardó en base64.
const metadata = JSON.stringify({ name: myFile.name, mimeType: myFile.type, }); const requestData = new FormData(); requestData.append("metadata", new Blob([metadata], { type: "application/json" })); requestData.append("file", items[0].file); const xhr = new XMLHttpRequest(); xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart"); const token = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token; xhr.setRequestHeader("Authorization", `Bearer ${token}`); xhr.send(requestData);