I cannot upload files using Laravel & AJAX and failing to understand why, when i'm checking for $request->hasFile('file_name'), I'm getting null however I'm getting the file path when i am dd ing $request->file_name. I'm attaching the required scripts. Controler:
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'contact_number' => 'required|numeric',
'email' => 'required',
'total_exp' => 'required|numeric',
'skillsets' => 'required',
'current_organization' => '',
'remarks' => '',
'file_name' => 'required|max:2048'
],
[
'name' => 'This field is mandatory',
'contact_number' => 'This field is mandatory',
'email' => 'This field is mandatory',
'total_exp' => 'This field is mandatory',
'skillsets' => 'This field is mandatory',
'total_exp.numeric' => 'Only numberic values allowed',
'contact_number.numeric' => 'Only numberic values allowed'
]);
try{
$career = CareerForm::updateOrCreate([
'name'=>$request->name,
'contact_number'=>$request->contact_number,
'email'=>$request->email,
'total_exp'=>$request->total_exp,
'skillsets'=>$request->skillsets,
'current_organization'=>$request->current_organization,
'remarks'=>$request->remarks,
'file_name' => $request->file_name,
]);
}catch(Exception $e1){echo $e1;}
/*$fileName = time().'.'.$request->file->extension();
$request->file->move(public_path('uploads'), $fileName);*/
//$file = $request->file('file_name')->store('public/documents');
dd($request->hasFile('file_name'));
Storage::disk('local')->put($request->file($request->file)->getClientOriginalName(), 'Contents');
return response()->json([
"success" => true,
"file" => $request->file,
]);
HTML code:
@extends('layouts.app')
@section('content')
<h2>Career Form using AJAX</h2>
<form class="form-signin" id="form_todo" enctype="multipart/form-data">
<h1 class="h3 mb-3 font-weight-normal">Career Form</h1>
<label for="inputEmail" class="sr-only">Name</label>
<input name="name" type="text" id="inputName" class="form-control" placeholder="Name" required="" autofocus="">
@error('name')
<div class="text-red-500 mt-2 text-sm">
{{$message}}
</div>
@enderror
<label for="" class="sr-only">Contact Number</label>
<input name="contact_number" type="" id="c_n" class="form-control" placeholder="Contact Number" required="" autofocus="">
@error('contact_number')
<div class="text-red-500 mt-2 text-sm">
{{$message}}
</div>
@enderror
<label for="" class="sr-only">Email</label>
<input name="email" type="text" id="eml" class="form-control" placeholder="Email" required="" autofocus="">
@error('email')
<div class="text-red-500 mt-2 text-sm">
{{$message}}
</div>
@enderror
<label for="" class="sr-only">Total Experience</label>
<input name="total_exp" type="" id="exp" class="form-control" placeholder="Total Experience" required="" autofocus="">
@error('total_experience')
<div class="text-red-500 mt-2 text-sm">
{{$message}}
</div>
@enderror
<label for="" class="sr-only">Skillsets</label>
<input name="skillsets" type="text" id="skl" class="form-control" placeholder="Skillsets" required="" autofocus="">
@error('skillsets')
<div class="text-red-500 mt-2 text-sm">
{{$message}}
</div>
@enderror
<label for="" class="sr-only">Curent Organization</label>
<input name="current_organization" type="text" id="c_o" class="form-control" placeholder="Current Organizations (Optional)" autofocus="">
@error('current_organization')
<div class="text-red-500 mt-2 text-sm">
{{$message}}
</div>
@enderror
<label for="" class="sr-only">Remarks</label>
<input name="remarks" type="text" id="rem" class="form-control" placeholder="Remarks (Optional)" autofocus="">
@error('remarks')
<div class="text-red-500 mt-2 text-sm">
{{$message}}
</div>
@enderror
<input type="file" id="file_id" name="file_name" class="form-control">
<button class="btn btn-primary btn-block" id="career_btn" type="submit">Submit</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
$("#form_todo").on('submit',function(e) {
//$("#career_btn").click(function(e) {
e.preventDefault();
let name = $('#inputName').val();
let c_n = $('#c_n').val();
let eml = $('#eml').val();
let exp = $('#exp').val();
let skl = $('#skl').val();
let c_o = $('#c_o').val();
let rem = $('#rem').val();
let file_up = $('#file_id').val();
$.ajax({
type: 'POST',
url: "career/store",
data: {
name:name,
contact_number:c_n,
email:eml,
total_exp:exp,
skillsets:skl,
current_organization:c_o,
remarks:rem,
file_name:file_up,
},
success: function(data) {
}
});
});
</script>
@endsection
Model file:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class CareerForm extends Model
{
use HasFactory;
protected $table='career_forms';
protected $fillable = ['name', 'contact_number', 'email', 'total_exp', 'skillsets', 'current_organization', 'remarks','file_name','file_path'];
}
Not uploading the route and the migrations cuz they are fine. Any help will be appreciated.
Please look for the solution below, changing the AJAX code made it work:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
$("#form_todo").on('submit',function(e) {
//$("#career_btn").click(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
type: 'POST',
url: "career/store",
data: formData,
datatype: 'JSON',
contentType: false,
cache: false,
processData: false,
success: function(data) {
}
});
});
</script>
