¿como enviar un archivo cargando mediante un input-file que esta hecho en el diagramador de laravel BLADE al backend?


Lo que deseo es enviar un archivo cargando mediante un input-file al backend que lo tengo en nodejs, no tengo muy clara la ide como debo hacerlo y se me producen errores, alguien me podria indicar como podria hacerlo o que sitios web podria visitar para enterarme exclusivamente mas sobre esta funcionalidad que le quiero dar a mi sistema, por favor.

Estoy estoy utilizando el motor de laravel blade para hacer diagramar todo el frontend y utilizando su propia arquitectura de laravel para que se conecte con el backend mediante Guzzle a las propias rutas que ya estan establecidas en node. El por que hacer hacerlo asi?, por que queria separar todo lo que era la Backend del frontend, y no sea una arquitectura monolitica, loco talvez, pero posible.

introducir la descripción de la imagen aquí

donde form.blade.php es el formulario donde se cargo los datos, index.blade.php es la vista principal y js.blade.php donde se realiza toda la logica de esa parte de esa tabla de la BD.

form.blade.php

<div class="form-group required">   <label for="avatar" class="col-sm-4 control-label">                     <font style="vertical-align: inherit;">                         <font style="vertical-align: inherit;">Entrada de archivo</font>                     </font>                 </label>   <div class="col-xs-4">     <input type="file" name="avatar" id="avatar">     <p class="help-block">       <font style="vertical-align: inherit;">         <font style="vertical-align: inherit;">           Ingrese al archivo que deseé guardar.         </font>       </font>     </p>   </div> </div>

index.blade.php

@extends('base.layout')  @section('titulo', $  recurso->titulo) @section('titulo_pagina', $  recurso->titulo . ' de la Palabra : "' .$  palabra->palabraOriginaria.'"') @section('breadcrumb')  <ol class="breadcrumb">   <li><a href="{{ route('palabra') }}"><i class="fa fa-arrow-left"></i> Volver a Palabras</a></li> </ol> @stop @section('contenido') <div class="box" <div class="box-body">   <table id="tabla-principal" class="table table-bordered table-hover">     <thead>       <tr>         <th>#</th>         <th>Nombre</th>         <th>Descripcion</th>         <th>Tamaño</th>         <th></th>         <th></th>       </tr>     </thead>     <tbody>        @foreach ($  archivosList as $  idx=>$  archivo) @if ($  archivo!=null)       <tr>          <td>{{ $  idx + 1 }}.</td>         <td>{{ $  archivo->nombre }}</td>         <td>{{ $  archivo->descripcion }}</td>         <td>{{ $  archivo->size }}</td>         @if($  recurso->puedeModificar)         <td class="text-center">           <button type="button" class="btn btn-xs btn-warning open-form-archivo" value="{{ $  archivo->id }}" name="{{ $  archivo->nombre }}">                             <i class="fa fa-pencil"></i> <span class="hidden-xs">Editar</span> 						</button>         </td>         @endif @if($  recurso->puedeEliminar)         <td class="text-center">           <button type="button" class="btn btn-xs btn-danger open-confirm-delete" value="{{ $  archivo->id }}" name="{{ $  archivo->nombre }}">                             <i class="fa fa-trash"></i> <span class="hidden-xs">Eliminar</span> 						</button>         </td>         @endif        </tr>       @endif @endforeach       </tbody>   </table>    @if($  recurso->puedeCrear)   <div class="row">     <div class="col-xs-12 text-left">       <button type="button" class="btn btn-sm btn-primary open-form-archivo" value=""> 					Nuevo 				</button>     </div>   </div>   @endif </div> </div>   @include('archivo.form') @stop @section('scripts') @include('archivo.js') @stop

js.blade.php

// evento click en el elemento con id 'btn-save-archivo' $  (document).on('click', '#btn-save-archivo', function() {   loadMask('content-form-archivo');    $  .ajax({       url: '{{ route('       archivo.save ') }}',       type: 'POST',       data: {         id: $  ("#id").val(),         idPalabra: $  ("#idPal").val(),         nombre: $  ("#nombre").val(),         tipoArchivo: $  ("#archivo_seleccionada").val(),         descripcion: $  ("#descripcion").val(),         size: $  ("#tamaño").val(),        },       success: function(response) {         location.reload(); // recarga la pagina       }     }    ); });

ArchivoController.php

<?php  namespace App\Http\Controllers;  use Illuminate\Http\Request; use App\Http\Services\SessionService; use App\Http\Services\ArchivoService; use App\Http\Services\PalabraService; use App\Http\Services\PalabraArchivoService; use App\Http\Services\CriterioService;  class ArchivoController extends Controller {     protected $  archivoService;     protected $  palabraService;     protected $  palabraArchivoService;     protected $  criterioService;   	public function __construct(ArchivoService $  archivoService, PalabraArchivoService $  palabraArchivoService, PalabraService $  palabraService, CriterioService $  criterioService ) {         $  this->archivoService = $  archivoService;         $  this->palabraArchivoService = $  palabraArchivoService;         $  this->palabraService = $  palabraService;         $  this->criterioService=$  criterioService; 	}  	public function index(Request $  request, $  idPalabra) {          $  recurso = SessionService::recursoPath($  request->getPathInfo());         $  archivosList = $  this->archivoService->listarArchivosDePalabra($  idPalabra);         $  criteriosList = $  this->criterioService->listarCriterios();         $  palabra = $  this->palabraService->obtenerPalabra(['id' => $  idPalabra]);         // dd($  idPalabra);         return view('archivo.index', [             'archivosList' => $  archivosList,             'criteriosList' => $  criteriosList,             'recurso' => $  recurso,             'palabra' => $  palabra,             'idPalabra'=> $  idPalabra,              ]);         }      public function form(Request $  request) {         return response()->json($  this->archivoService->obtenerArchivo($  request->all()));     }      public function save(Request $  request) {         return response()->json($  this->archivoService->guardarArchivo($  request->all()));     }  	public function delete(Request $  request) { 		return response()->json($  this->archivoService->eliminarArchivo($  request->all()));     }      public function cargado(Request $  request){         return response()->json($  this->archivoService->cargarArchivo($  request->all())); 	}  }

ArchivoService.php

<?php  namespace App\Http\Services;  class ArchivoService extends GuzzleHttpRequestService {  	private function recursoApi($  archivoPalabra = false) {         return config('app.recurso_archivo'). ($  archivoPalabra ? '/archivoPalabra' : '');;         // return config('app.recurso_archivo'). ($  archivoPalabra ? '/archivoPalabra' : ''); 	}      public function listarArchivosDePalabra($  idPalabra){ 		return $  this->get($  this->recursoApi(true),$  idPalabra); 	}  	public function obtenerArchivo($  params) { 		return $  this->get($  this->recursoApi(), $  params['id']);     }      public function listarArchivos(){         return $  this->get($  this->recursoApi()); 	}      public function guardarArchivo($  params){         if (empty($  params['id'])) {             $  params['usuarioRegistro'] = $  this->getUsuario();             $  resultado = $  this->post($  this->recursoApi(), $  params);         } else {             $  params['usuarioModificacion'] = $  this->getUsuario();             $  resultado = $  this->put($  this->recursoApi(), $  params, $  params['id']);         }         return $  resultado;     }       public function cargarArchivo($  params)     {  	}  	public function eliminarArchivo($  params) { 		$  params['activo'] = false; 		$  params['usuarioModificacion'] = $  this->getUsuario();         $  resultado = $  this->put($  this->recursoApi(), $  params, $  params['id']);         return $  resultado; 	}  }

rutas en la que se conectan al api

web.php

 // archivo  Route::get( '/archivo/archivoPalabra/{idPalabra}', 'ArchivoController@index')->name('archivo');  Route::post('/archivo/form', 'ArchivoController@form')->name('archivo.form');  Route::post( '/archivo/save', 'ArchivoController@save')->name('archivo.save'); Route::post('/archivo/delete', 'ArchivoController@delete')->name('archivo.delete'); Route::post( '/archivo/cargado', 'ArchivoController@cargado')->name( 'archivo.cargado');