0

Estoy tratando de guardar varios archivos enviados desde Angular a una API de Laravel, sin embargo, no logro guardarlos, únicamente guardar uno.

Aquí está el código de la API donde guarda los archivos:

 public function uploadFile(Request $request)
{   
    $lengthFiles = (int)$request->length;          
    if($lengthFiles > 1){        
        if($request->hasFile('arrayFiles')){
            foreach ($request->file('arrayFiles') as $file){                    
                $fileFullName = $file->getClientOriginalName();
                $fileName = pathinfo($fileFullName, PATHINFO_FILENAME);
                $fileWithoutSpaces = str_replace(' ', '', $fileName );          
                $fileLower = Str::lower($fileWithoutSpaces); 
                $newFileName = "pdf_".$fileLower."_".now()->second.now()->day.now()->year.now()->minute.now()->hour.".".$file->guessExtension();       
                $finalPath = public_path("public-files/events-files/" . $newFileName);
                if($file->guessExtension() == "pdf"){
                    copy($file, $finalPath);                  
                }else{
                    return ($this->errorResponse('El archivo que intentas subir no es un PDF', 422));
                }    
            }
        }
    }else if($lengthFiles == 1){      
        if($request->hasFile('arrayFiles')){    
            $file = $request->file("arrayFiles");
            $fileFullName = $request->file('arrayFiles')->getClientOriginalName();
            $fileName = pathinfo($fileFullName, PATHINFO_FILENAME);
            $fileWithoutSpaces = str_replace(' ', '', $fileName );          
            $fileLower = Str::lower($fileWithoutSpaces); 
            $newFileName = "pdf_".$fileLower."_".now()->second.now()->day.now()->year.now()->minute.now()->hour.".".$file->guessExtension();       
            $finalPath = public_path("public-files/events-files/" . $newFileName);
            if($file->guessExtension() == "pdf"){
                copy($file, $finalPath);                  
            }else{
                return ($this->errorResponse('El archivo que intentas subir no es un PDF', 422));
            }      
        }       
    }
}

En el código anterior válido la cantidad de archivos que recibe, dependiendo de si es uno, guárdelo sin realizar el foreach, y si es mayor a uno, haga el foreach y procese el nombre y finalmente guardarlo en la ruta especificada.

Aquí está el código de Angular dónde envía los archivos

 var lengthFiles:any = Object.values(counts);
    var formDataFile = new FormData();
    formDataFile.append('arrayFiles', this.arrayFiles);    
    formDataFile.append('length', lengthFiles);
                      
    this._eventService.upload(formDataFile).then((response:any) => {
       this.progress = 1;
    }).catch((response: any) => {
         this.progress = false;
    }); 

Ahí envío los archivos haciendo la instancia FormData y enviando la cantidad de archivos y el archivo para validarlo en el backend.

Así se vería el array de archivos: Array

A continuación les muestro cómo se está enviado la data:

data

Edit:

Como se envia la data de los archivos desde el frontend

introducir la descripción de la imagen aquí

1
  • Hola, supongo que subes los archivos múltiples en un input type="file" multiple, es correcto..?? este es arrayFiles es tu frond..??
    – Josbert
    Commented el 3 jul. 2021 a las 1:43

1 respuesta 1

0

Bien, te daré un ejemplo sencillo de lo que tienes que hacer en el Laravel, la verdad no necesitas la variable $lengthFiles solo obtienes el numero de archivos así:

public function uploadFile(Request $request)
{
  $count = count($request->file());

  if($count > 0){
    foreach($request->file() as $item){
      //acá almacenas cada archivo, un pequeño ejemplo:
      $item->storeAs('files/', 'nombre-del-archivo');
      //tú coloca la lógica que necesites para almacenar cada archivo :) 
    }
  }

Y en tu frond agrega los archivos con un forEach

this.arrayFiles.forEach((item, index) => {
   formDataFile.append('file-'+index, item)
})

Espero te sirva, saludos...

9
  • Hola! Gracias por tu retroalimentación. Seguí al pie tus recomendaciones, sin embargo, no logro cargar todos, solo carga 1 archivo, creo que el problema radica en el Laravel, realicé la prueba desde el Postman, y adjuntando más de 1 archivo, me sale que solo recibe uno con el $count = count($request->file());
    – Dav
    Commented el 4 jul. 2021 a las 4:28
  • @user0972083 primero que nada, una pregunta, ¿estas enviando el headers 'Content-Type': 'multipart/form-data' en tu solicitud? puede ser por múltiples razones, pero revisa primero los headers
    – Josbert
    Commented el 4 jul. 2021 a las 4:42
  • Si puedes, edita tu pregunta y adiciona los datos de tu solicitud, los que te muestra el network de tu navegador, allí mismo podrás ver si realmente se están enviando mas de un archivo ;)
    – Josbert
    Commented el 4 jul. 2021 a las 4:43
  • El parámetro headers 'Content-Type': 'multipart/form-data' lo pongo desde el postman y recibo un error, sin embargo, probaré a ponerlo desde el Angular. Y respondiendo sobre lo que se envía, ya edito y lo pongo
    – Dav
    Commented el 4 jul. 2021 a las 5:01
  • Vale, el encabezado debiera ser bien recibido, desconozco porque Postman te esta dando el error, prueba en Angular como dices, si no funciona, queda por chequear las configuraciones de PHP aunque creo que de ser eso Laravel deberia responder con 413 Payload Too Large pero tal vez deberías revisar eso
    – Josbert
    Commented el 4 jul. 2021 a las 5:20

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.