Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am writing a unit testing code for the Ajax and Laravel project. I am trying to test one function.
But I get this error in console
Reference Error: formData is not defined
My compltete code in blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="/css/main.css">
<title>فروم</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/amirsaa/easy-Materialize-rtl/materialize-rtl.min.css" rel="stylesheet">
</head>
<body>
<br>
<section class="sec-1">
<div class="row">
<div class="col s11 friend2 center hide-on-large-only" onclick="toggle2(0)"><a class="waves-effect waves-light teal lighten-1 l12 s12 col white-text z-depth-1">لیست دوستان</a></div>
<!--friends list-->
<div class="col l4 s11 white sec-2" style="float: left;">
<div class="col s12 center-align friends-list-title" style="font-size: 16px;">
<i class="material-icons close1 close2 right red-text text-darken-1 hide-on-large-only" onclick="toggle2(0)">close</i>
<span>لیست دوستان</span><br><br><br>
</div>
<!--person1-->
<div class="col s12 friend waves-effect waves-light">
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a>
<span>1نیکی نجفی</span>
<span>سلام </span>
<span class="float-left">13:00</span>
<a class="waves-effect waves-light btn red white-text close7">حذف</a>
</div>
<!--person ends here-->
<div class="col s12 friend waves-effect waves-light">
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a>
<span>2نیکی نجفی</span>
<span>سلام </span>
<span class="float-left">13:00</span>
<a class="waves-effect waves-light btn red white-text close7">حذف</a>
</div>
<!--person ends here-->
<div class="col s12 friend waves-effect waves-light">
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a>
<span>3نیکی نجفی</span>
<span>سلام </span>
<span class="float-left">13:00</span>
<a class="waves-effect waves-light btn red white-text close7">حذف</a>
</div>
<!--person ends here-->
<div class="input-field col s6 center1 waves-effect waves-light">
<i class="material-icons prefix">search</i>
<input id="search" type="text" class="validate">
<label for="search">آیدی هما</label>
</div><br><br>
</div>
<form class="col l7 s12 m12 form1 slideud1" id="addPost" enctype="multipart/form-data" method="post">
@csrf
<div class="row">
<div class="col s10 white">
<i class="material-icons close1 close2 close3 right red-text text-darken-1" onclick="toggle(0)">close</i>
<div class="input-field col s12">
<i class="material-icons prefix">insert_drive_file</i>
<input id="icon_prefix" type="text" class="validate" name="title">
<label for="icon_prefix">عنوان</label>
</div>
<div class="file-field input-field col s6 float-left">
<input type="text" name="category">
<label for="icon_prefix">دسته</label>
</div>
<div class="file-field input-field col s6 float-left">
<div class="btn">
<span>آپلود</span>
<input type="file" name="image_post">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">اینجا بنویس ...</label>
</div>
<br>
<div class="col width-c">
<button class="btn waves-effect waves-light s5" type="submit" id="postAdd" name="action">انتشار
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s2 center-align">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span>
</div>
</div>
</form>
<!--adding a new post ends here-->
@foreach ($posts as $post)
<form class="col l7 m12 form1 form2">
<!--tabs-->
<div class="row row4" style="padding: 0 !important;">
<div class="col l9 m9 s12">
<ul class="tabs">
<li class="tab col s3"><a href="">صفحه ی من</a></li>
<li class="tab col s3"><a href="">جدیدترین ها</a></li>
<li class="tab col s3"><a href="">پربازدیدترین ها</a></li>
</ul>
</div>
</div>
<!--tabs end here-->
<!--shown post-->
<div class="row" >
<div class="col m9 l9 s12 white">
<div class="col l12 part1">
<h6 class="title1">{{ $post->title }}</h6>
<div class="col l12 m12 s12">
<p>{{ $post->body }}</p><br>
</div>
<br> <img src="{{ asset('images/posts/'.$post->image) }}" alt="{{ $post->title }}" class="col l12 m12 s12">
</div>
</div>
<div class="col m3 l3 s12 center-align">
<div class="col s12 row5">
<a class="btn-floating waves-effect waves-light red more_vert left "><i class="material-icons">more_vert</i></a>
<a class="btn-floating waves-effect waves-light red toggle-btn"><i class="material-icons">delete_forever</i></a>
<a class="btn-floating waves-effect waves-light deep-orange toggle-btn"><i class="material-icons">edit</i></a>
<a class="btn-floating waves-effect waves-light purple toggle-btn"><i class="material-icons">send</i></a>
</div>
<br>
<div class="col s12 center">
<a class="btn-floating waves-effect waves-light white inl user2"><img src="{{ asset('images/user/'.$post->user->image) }}" alt="{{ $post->user->name }}" class="user"></a><br><br>
<span class="inl inl3">{{ $post->user->name }}</span><br><br>
<a class=" btn waves-effect waves-light white inl user2 follow1 purple white-text lighten-1">دنبال کن</a><br><br>
</div><br>
<div class="container1">
<div class="like1 inl ">
<a class="waves-effect waves-light btn green inl"><i class="material-icons center">thumb_up</i></a>
<span class="z-depth-1 inl">20</span>
</div>
<br>
<div class="like1 inl">
<a class="waves-effect waves-light btn red inl"><i class="material-icons center">thumb_down</i></a>
<span class="z-depth-1 inl">20</span>
</div>
<br>
<div class="like1 inl">
<a class="waves-effect waves-light btn amber darken-1 inl">دروغ</a>
<span class="z-depth-1 inl">20</span>
</div>
<br>
<div class="like1 eye1 inl">
<span style="padding: 0 !important;">
بازدید : 20
</span><br><br>
<!--change-->
<a class=" btn waves-effect waves-light white inl user2 follow1 follow2 purple white-text lighten-1">پست قبلی</a><br><br>
</div>
</div>
</div>
<div class="cr-container">
<div class="col s6 center comment comment1 z-depth-1 ">
<a class="waves-effect waves-light teal lighten-2 l12 s12 col"><i class="material-icons center white-text comment-icon">comment</i></a>
</div>
<div class="col s6 center reply z-depth-1 click3">
<a class="waves-effect waves-light teal lighten-1 l12 s12 col "><i class="material-icons center white-text center">reply</i></a>
</div>
</div>
</div>
<div class="row row2">
<div class="col s10 white">
<i class="material-icons close1 close2 close4 close6 right red-text text-darken-1 comment2">close</i>
<div class="input-field col s12">
<textarea id="textarea2" class="materialize-textarea"></textarea>
<label for="textarea2">نظرتو بنویس ...</label>
</div>
<br>
<div class="file-field input-field col s12 float-left ">
<div class="btn">
<span>آپلود</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="col width-c"><br><br>
<button class="btn waves-effect waves-light s5" type="submit" name="action">انتشار
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s2 center-align">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span>
</div>
</div>
<!--commenting on original post ends here-->
<div class="row row3" >
<div class="col s10 white">
<div class="col l3 m3 s3">
<i class="material-icons close1 close2 close4 right red-text text-darken-1 comment2">close</i>
<img src="../../images/img1.jpg" alt="" class="width-c width2">
</div>
<div class="col l9 m9 s9">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
</div>
<div class="col s2 center-align">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span><br>
<span>14 اسفند</span><br><br>
<div class="col s12 center reply reply2 z-depth-1 teal lighten-1 click2">
<a class="waves-effect waves-light teal lighten-1 s12 col "><i class="material-icons center white-text center">reply</i></a>
</div>
</div>
<!--replies reply-->
<div class="col s10 white rep1">
<div class="input-field col s12">
<i class="material-icons close1 close2 close5 right red-text text-darken-1">close</i>
<textarea id="textarea2" class="materialize-textarea"></textarea>
<label for="textarea2">نظرتو بنویس ...</label>
</div>
<br>
<div class="file-field input-field col s12 float-left ">
<div class="btn">
<span>آپلود</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="col width-c"><br><br>
<button class="btn waves-effect waves-light s5" type="submit" name="action">انتشار
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s2 center-align rep1">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span>
</div>
<!--replies a reply ends here-->
</div>
<div class="row row3" >
<div class="col s10 white">
<div class="col l3 m3 s3">
<i class="material-icons close1 close2 close4 right red-text text-darken-1 comment2">close</i>
<img src="../../images/img1.jpg" alt="" class="width-c width2">
</div>
<div class="col l9 m9 s9">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
</div>
<div class="col s2 center-align">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span><br>
<span>14 اسفند</span><br><br>
<div class="col s12 center reply reply2 z-depth-1 teal lighten-1 click2">
<a class="waves-effect waves-light teal lighten-1 s12 col "><i class="material-icons center white-text center">reply</i></a>
</div>
</div>
<!--replies reply-->
<div class="col s10 white rep1">
<div class="input-field col s12">
<i class="material-icons close1 close2 close5 right red-text text-darken-1">close</i>
<textarea id="textarea2" class="materialize-textarea"></textarea>
<label for="textarea2">نظرتو بنویس ...</label>
</div>
<br>
<div class="file-field input-field col s12 float-left ">
<div class="btn">
<span>آپلود</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="col width-c"><br><br>
<button class="btn waves-effect waves-light s5" type="submit" name="action">انتشار
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s2 center-align rep1">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span>
</div>
<!--replies a reply ends here-->
</div>
<div class="row row3" style="font-size: 13px; display: block !important;" >
<div class="col s10 white">
<div class="col l3 m3 s3">
<i class="material-icons close1 close2 close4 right red-text text-darken-1 comment2">close</i>
<img src="../../images/img1.jpg" alt="" class="width-c width2">
</div>
<div class="col l9 m9 s9">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
</div>
<div class="col s2 center-align">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span><br>
<span>14 اسفند</span><br><br>
<div class="col s12 center reply reply2 z-depth-1 teal lighten-1 click2">
<a class="waves-effect waves-light teal lighten-1 s12 col "><i class="material-icons center white-text center">reply</i></a>
</div>
</div>
<!--replies reply-->
<div class="col s10 white rep1">
<div class="input-field col s12">
<i class="material-icons close1 close2 close5 right red-text text-darken-1">close</i>
<textarea id="textarea2" class="materialize-textarea"></textarea>
<label for="textarea2">نظرتو بنویس ...</label>
</div>
<br>
<div class="file-field input-field col s12 float-left ">
<div class="btn">
<span>آپلود</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="col width-c"><br><br>
<button class="btn waves-effect waves-light s5" type="submit" name="action">انتشار
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s2 center-align rep1">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span>
</div>
<!--replies a reply ends here-->
</div>
<div class="row row3" style="font-size: 13px; display: block !important;" >
<div class="col s10 white">
<div class="col l3 m3 s3">
<i class="material-icons close1 close2 close4 right red-text text-darken-1 comment2">close</i>
<img src="../../images/img1.jpg" alt="" class="width-c width2">
</div>
<div class="col l9 m9 s9">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
</div>
<div class="col s2 center-align">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span><br>
<span>14 اسفند</span><br><br>
<div class="col s12 center reply reply2 z-depth-1 teal lighten-1 click2">
<a class="waves-effect waves-light teal lighten-1 s12 col "><i class="material-icons center white-text center">reply</i></a>
</div>
</div>
<!--replies reply-->
<div class="col s10 white rep1">
<div class="input-field col s12">
<i class="material-icons close1 close2 close5 right red-text text-darken-1">close</i>
<textarea id="textarea2" class="materialize-textarea"></textarea>
<label for="textarea2">نظرتو بنویس ...</label>
</div>
<br>
<div class="file-field input-field col s12 float-left ">
<div class="btn">
<span>آپلود</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="col width-c"><br><br>
<button class="btn waves-effect waves-light s5" type="submit" name="action">انتشار
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s2 center-align rep1">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>نیکی نجفی</span>
</div>
<!--replies a reply ends here-->
</div>
</form>
@endforeach
</div>
</section>
<script src="/js/forum.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<script>
$(document).ready(function () {
$('#postAdd').click(function(e){
e.preventDefault();
var form = $('#addPost');
formData.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
type: "POST",
url: "{{ route('posts.store') }}",
data: formData,
success: function (response) {
console.log(response)
},
error: function (error) {
console.log(error)
}
})
})
})
</script>
</body>
</html>
You never set the formData variable.
Do you want the input field append to you form?
Does this work?
form.append('file', $('input[type=file]')[0].files[0]);
And replace
data: formData
with in you ajax call.
data: form.serialize(),
Hi @mvd
I think that upload an image with serialize do not work I get this error in network
SQLSTATE[HY000]: General error: 1364 Field 'image' doesn't have a default value (SQL: insert into posts (title, body, user_id, updated_at, created_at) values (1, ?, 1, 2020-05-19 22:47:44, 2020-05-19 22:47:44))
@irankhosravi Inside click add
var formData = new FormData($('#addPost')[0]);
In ajax add
data: formData,
processData: false,
contentType: false,
Please or to participate in this conversation.