0

Tengo un inconveniente, estoy tratando de enviar archivos a mi API en laravel, desde un formulario de prueba, usando javascript, el detalle, es que al momento de enviarlo a la API, la funcion store o GetOriginalName, me lanzan el error:

Call to a member function getOriginalName()/store() on null

El formulario:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File</title>
</head>

<body>

  <form enctype="multipart/form-data" action="#" method="POST">
    <input id="Doc" name="uploadedfile" type="file" />
    <input type="hidden" id="cod" name="cod" value="asdsad">
    <input type="hidden" id="codd" name="codd" value=1>
    <input type="button" id="Enviar" value="Enviar datos" onclick="file()">
  </form>
</body>
<script src="js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"> 

El archivo .js

function file(){ 

const archivo = {
    cod : document.getElementById('cod').value,
    Doc : document.getElementById('Doc').files[0],
    codd : document.getElementById('codd').value
}

console.log(document.getElementById('Doc').files[0])

   axios.post('http://127.0.0.1:8000/api/doc', 
document.getElementById('Doc').files[0]).then(response => {
    console.log(response.data)
}).catch(error => {
    console.log(error)
})

}

El Metodo:

    public function InsertDocumento(Request $request)
{
    if($request->file('Doc'))
    {
        $doc = new Documento;    
        $doc->Codigo_Documento = $request->input('cod');     
        $doc->nombre =$request->file->getClientOriginalName();   
        $request->file('Doc')->store();   
        $doc->Codigo_curso = $request->input('codd');        
        $x = $doc->save();  
        return $x;
    }      

}

He hecho lo que me sugeriste, lastimosamente me sigue dando el mismo error Call to a member function getClientOriginalName() on null , para comprobar si tenia alguno archivo, usando if($request->file('Doc')), y un else, devolviendome un 1 en caso de que no enviase nada, lastimosamente siempre me devuelve el mismo 1.

  public function InsertDocumento(Request $request)
{
    $nombre = $request->file('Doc')->getClientOriginalName(); 
    if($request->file('Doc'))
    {
        $doc = new Documento;    
        $doc->Codigo_Documento = $request->input('cod');     
        $doc->nombre = $nombre;  
        $request->file('Doc')->storeAs('/', $nombre);;   
        $doc->Codigo_curso = $request->input('codd');        
        $x = $doc->save();  
        return $x;
    }     
    else
    {
        return 1;
    }    

}

Archivo JS

function file(){ 
let file = document.getElementById('Doc').files[0];
let data = new FormData();
data.append("Doc", file);
data.append("cod", document.getElementById('cod').value);
data.append("codd", document.getElementById('codd').value);
let settings = { headers: { 'content-type': 'multipart/form-data' } }
let url = 'http://127.0.0.1:8000/api/doc';
axios.post(
url, 
 data, 
 settings
)
.then(response => {
   console.log(response.data)
 })
 .catch(error => {
console.log(error)
  })

  }
1
  • Listo, ya lo he agregado el 8 may. 2020 a las 5:23

1 respuesta 1

0

De lo que muestras, un problema está en cómo está haciendo la llamada con axios. Te recomiendo que uses FormData para agregar los datos a la llamada.

Primero, obtén el elemento de entrada que recibe el archivo:

let file = document.getElementById('Doc').files[0];

Luego, crea un objeto FormData:

let data = new FormData();

Luego, agrega el archivo al objeto FormData. Ten en cuenta que también puede incluir otros campos de formulario, como 'cod' y 'codd'.

data.append("Doc", file);

data.append("cod", document.getElementById('cod').value);
data.append("codd", document.getElementById('codd').value);

Finalmente, construye la llamada axios:

let url = 'http://127.0.0.1:8000/api/doc';

axios.post(
  url, 
  data
)
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
})

Y algo que puedes hacer desde Laravel es primero validar el request entrante:

$request->validate([
    'Doc' => 'required|file',
]);
// el request tiene un campo 'Doc' con un archivo

Luego corrige algunas cosas.

Debes obtener el nombre original del archivo desde el input en donde se encuentra, y no desde $request->file:

// $doc->nombre = $request->file->getClientOriginalName(); 
$nombre = $request->file('Doc')->getClientOriginalName(); 
$doc->nombre = $nombre;

Y lo guardas en el disco con el mismo nombre que lo guardas en BD, o no van a coincidir cuando lo quieras recuperar. Puedes usar storeAs() para especificar un nombre:

// $request->file('Doc')->store();   
$request->file('Doc')->storeAs('/', $nombre);

Este ejemplo funciona:

/resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

</head>
<body>

  <form enctype="multipart/form-data" action="#" method="POST">
    <input id="Doc" name="uploadedfile" type="file" />
    <input type="hidden" id="cod" name="cod" value="asdsad">
    <input type="hidden" id="codd" name="codd" value=1>
    <input type="button" id="Enviar" value="Enviar datos" onclick="file()">
  </form>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
    function file(){

        let file = document.getElementById('Doc').files[0];
        console.log(file)


        let data = new FormData();

        data.append("Doc", file);

        data.append("cod", document.getElementById('cod').value);
        data.append("codd", document.getElementById('codd').value);

        let url = 'http://localhost:8080/api/v1/test';
        let settings = { headers: { 'content-type': 'multipart/form-data' } }

        axios.post(
            url,
            data,
            settings
        )
            .then(response => {
                console.log(response.data)
            })
            .catch(error => {
                console.log(error)
            })

    }

</script>
</html>

/routes/api.php

<?php

use Illuminate\Http\Request;

Route::group([ 'namespace' => 'Api' ], function () {

    Route::group(['prefix' => 'v1', 'namespace' => 'v1'], function($app) {

        Route::post('/test', function(Request $request) {
            $nombre = $request->file('Doc')->getClientOriginalName();
            return [
                'data' => $nombre
            ];
        });
    });
});
4
  • De igual manera, me sigue tirando el error. el 9 may. 2020 a las 23:35
  • Agrega la validación en la primer línea de la función InsertDocumento el 9 may. 2020 a las 23:38
  • Se lo he agregado, y me da lo sig: {message: "The given data was invalid.", errors: {Doc: ["The doc field is required."]}} errors: {Doc: ["The doc field is required."]} Doc: ["The doc field is required."] 0: "The doc field is required." message: "The given data was invalid." el 9 may. 2020 a las 23:53
  • Pues no lo sé, lo acabo de probar y funciona. ¿Estás recargando la página después de hacer los cambios? Intenta hacerlo desde una ventana de incognito del navegador el 10 may. 2020 a las 0:56

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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