@extends('layout/template')

@section('content')
    <h1>Images</h1>
    <p>Add Images to your gallery</p>
    <div class="col-md-12">
        <form action="php/upload.html" method="post" enctype="multipart/form-data">
            <input type="file" name="files[]" id="filer_input" multiple="multiple">

        </form>
        <a href="#" class="btn btn-outline-success">Publish Gallery</a>
    </div>
@endsection



@section('js')
    <link href="/css/jquery.filer.css" type="text/css" rel="stylesheet" />
    <link href="/css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />


    <script src="/js/jquery.filer.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#filer_input').filer({
                addMore: true,
                showThumbs: true,
                fileMaxSize: 10,
                uploadFile: {
                    url: null, //URL to which the request is sent {String}
                    data: null, //Data to be sent to the server {Object}
                    type: 'POST', //The type of request {String}
                    enctype: 'multipart/form-data', //Request enctype {String}
                    synchron: false, //Upload synchron the files
                    beforeSend: null, //A pre-request callback function {Function}
                    success: null, //A function to be called if the request succeeds {Function}
                    error: null, //A function to be called if the request fails {Function}
                    statusCode: null, //An object of numeric HTTP codes {Object}
                    onProgress: null, //A function called while uploading file with progress percentage {Function}
                    onComplete: null, //A function called when all files were uploaded {Function}
                },
                onRemove: function () {
                    alert("ToDo this feature dont work");
                    return false;
                }
            });
        });
    </script>
@endsection