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

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

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