Im trying to submit a multipart/form-data form through ajax, I've checked many of the post around related to this problem but none of the fixes worked for me, so probably im just missing something, hope you can help me guys!
Here is my form html, im rendering this in a div on my index view and I already have csrf field in my layout header:
<form method="POST" id="createtc" action="{{ route('Tiemposcompensatorios.store') }}" enctype="multipart/form-data" class="form-inline border border-light p-4">
<input id="empleado_id" name="empleado_id" type="hidden" value="">
<div class="form-row">
{!! csrf_field() !!}
<div class="col">
<input type="text" class="form-control" name="descripcion" value="{{ old('descripcion') }}" placeholder="Descripcion">
<small class="form-text text-muted mb-4">
Ingresar solo texto
</small>
{!! $errors->first('descripcion','<span class=error>:message</span>')!!}
</div>
<div class="col">
<input type="number" class="form-control" name="horas" id="horas" value="{{ old('horas') }}" placeholder="Horas">
<small class="form-text text-muted mb-4">
Ingresar solo numeros
</small>
{!! $errors->first('horas','<span class=error>:message</span>')!!}
</div>
<div class="col">
<input id="desde" name="desde" class="form-control datec" type="text" value="{{ old('desde') }}" placeholder="Desde" />
<small class="form-text text-muted mb-4">
Formato AÑO-MES-DIA
</small>
{!! $errors->first('desde','<span class=error>:message</span>')!!}
</div>
<div class="col">
<input id="hasta" name="hasta" class="form-control datec" type="text" value="{{ old('hasta') }}" placeholder="Hasta" />
<small class="form-text text-muted mb-4">
Formato AÑO-MES-DIA
</small>
{!! $errors->first('hasta','<span class=error>:message</span>')!!}
</div>
<div class="col">
<label for="autorizacion">Horas Autorizadas:</label>
<input type="file" class="form-control-file" id="autorizacion" name="autorizacion">
</div>
<div class="col-auto">
<button class="btn btn-info my-4 btn-block" type="submit">Guardar</button>
</div>
</div>
</form>
Here is my js code:
$('body').on('submit', '#createtc', function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
setStore(formData);
});
function setStore(data) {
$.ajax({
type: 'POST',
url : "/Tiemposcompensatorios/store",
data: data,
contentType: false,
processData: false,
}).done(function (data) {
$('.forms').html(data);
}).fail(function () {
alert('Empleado could not be stored.');
});
}
Here is my controller code:
public function store(CreateTiemposcompensatorioRequest $request)
{
$request->autorizacion->store('tiempos');
Tiemposcompensatorio::create($request->all());
$tiemposcompensatorios = Tiemposcompensatorio::where('empleado_id','=',$request->empleado_id)->paginate(5);
if ($request->ajax()) {
return view('tiemposcompensatorios.list', compact('tiemposcompensatorios'))->render();
}
}
Im getting an method not allowed error for 'POST' in the browser console, next an image of the error in the console:
I just solved it, cause I'm using resource controller the url for the store action is just 'Tiemposcompensatorios' and not 'Tiemposcompensatorios/store'.
function setStore(data) {
$.ajax({
type: 'POST',
url : "Tiemposcompensatorios",
data: data,
contentType: false,
processData: false,
}).done(function (data) {
$('.forms').html(data);
}).fail(function () {
alert('Empleado could not be stored.');
});
}
Thanks for your help guys!