Primecore Primecore - 6 months ago 21
Javascript Question

trouble about laravel image uploading ajax

it gives me an error :


Call to a member function getClientOriginalExtension() on null


here is my code

form :

<form id="regForm" role="form" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Title</label>
<input type="text" class="form-control" name="title" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" name="image" id="exampleInputFile">
</div>
</div><!-- /.box-body -->

<div class="box-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>


and this is my ajax script

<script type="text/javascript">
$(document).ready(function(){
//alert($("#email").val());
});
$("#regForm").submit(function(){
var selector = $(this);

var form = selector.serializeArray();
$.ajax({
url: "{{URL::to('admin/snl_add_post')}}",
type: "POST",
data: form,
dataType: "json",
success: function(data){
if(!data.success)
{
$.each(data.errors, function(key, value){
selector.find("input[name="+key+"]").attr({"style":"border:1.5px solid red;"});
});
}
else
{
setTimeout(function(){

// Move to a new location or you can do something else
window.location.href = "{{URL::to('stickers_and_labels')}}";

}, 3000);
}
}
});
return false;
});
</script>


and my controller

public function snl_add_post(){
$response = array();

$rules = array(
'title' => 'required'

);

$validator = Validator::make(Input::all(), $rules);

if($validator->fails()){

$response["errors"] = $validator->messages();

$response["success"] = FALSE;

$response["msg"] = "Invalid Inputs";
}
else
{
$careers = new Careers;

$careers->title = Input::get('title');

$destinationPath = 'images/snl/';

$extension = Input::file('image')->getClientOriginalExtension();

$fileName = rand(11111,99999).'.'.$extension;

Input::file('image')->move($destinationPath, $fileName);

$careers->img_path = 'images/snl/'.$filename;

$careers->save();

if($careers){

$response["success"] = true;
$response["msg"] = "Success";

}else{

$response["success"] = false;
$response["msg"] = "May error";

}
}



return Response::json($response);
}


i think my error is in ajax but i'm not really sure.
any insight would be appreciated.

Answer

Using the Serialize in your call will have only the text content, To have the file and it content you should use the formData

First have a name to your form and use the code below

$("form[name='uploader']").submit(function(e) {
    var formData = new FormData($(this)[0]);

    $.ajax({
       url: "{{URL::to('admin/snl_add_post')}}",
        type: "POST",
        data: formData,
        async: false,
        success: function (msg) 
        {
        },
        cache: false,
        contentType: false,
        processData: false
    });

    e.preventDefault();
});

After this try to print_r(Input::all()); in your controller and you should get the image details too.

Note :

I have given the basic usage you can change the above jQuery according to your need. i.e., usage of settimeout and other options that is needed.