mardi 31 juillet 2018

Serialize the Form dynamic image field using ajax in laravel 5.6

Hi i want to serialize the form using ajax in laravel but i'm getting the error i don't know why trying hard on searching the internet but not able to understand what is the error and what is the real problem .

Here is my view

<html lang="en">
<head>
    <meta name="_token" content="" />
    <title>Laravel Multiple File Upload Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li></li>
                @endforeach
            </ul>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success">
            
        </div>
    @endif

    <h3 class="jumbotron">Laravel Multiple File Upload</h3>
    <form method="post"  id="d-form" enctype="multipart/form-data">
        

        <div class="input-group control-group increment" >
            <input type="file" name="filename[]" class="form-control">
            <input type="text" name="descri[]" class="form-control">
            <div class="input-group-btn">
                <button class="btn btn-success" type="button"><i class="glyphicon glyphicon-plus"></i>Add</button>
            </div>
        </div>
        <div class="clone hide">
            <div class="control-group input-group" style="margin-top:10px">
                <input type="file" name="filename[]" class="form-control">
                <input type="text" name="descri[]" class="form-control">
                <div class="input-group-btn">
                    <button class="btn btn-danger" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" style="margin-top:10px">Submit</button>

    </form>
</div>


<script type="text/javascript">
    $(function() {
        $.ajaxSetup({
            headers: {
                'X-XSRF-Token': $('meta[name="_token"]').attr('content')
            }
        });
    });

    $(document).ready(function() {

        $(".btn-success").click(function(){
            var html = $(".clone").html();
            $(".increment").after(html);
        });

        $("body").on("click",".btn-danger",function(){
            $(this).parents(".control-group").remove();
        });
        $("#submit").submit(function(){
            var formdata = $("#d-form").serialize();
            $.ajax({
                type: 'POST',
                url: '/form',
                data: formdata,
                success: function (data) {
                    alert(data);
                },
            });
            stay.preventDefault();
        });

    });



</script>
</body>
</html>

Here is my controller in which i'm getting the images and saving it using json.

<?php

namespace App\Http\Controllers;
use App\Form;
use Illuminate\Http\Request;

class FormController extends Controller
{
    public function create(Request $request)
    {
        $this->validate($request, [
            'filename' => 'required',
            'filename.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'
        ]);
        return view('create');
    }
    public function store(Request $request)

    {

        $this->validate($request, [

            'filename' => 'required',
            'filename.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'

        ]);

        if($request->hasfile('filename'))
        {

            foreach($request->file('filename') as $image)
            {
                $name=$image->getClientOriginalName();
                $image->move(public_path().'/images/', $name);
                $data[] = $name;
            }
        }

        $form= new Form();
        $form->filename=json_encode($data);


        $form->save();

        return  "Your images has been successfully";
    }
}

Finally here is my routes.

Route::get('form','FormController@create');
Route::post('form','FormController@store');



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire