Hi,

Here first post with laravel4 with love

Some Tips:
you can enable/disable upload function multiple:true, autoSubmit:false,showStatusAfterSuccess:false
smart validation check with/without upload
, otherwise submit form after check if is valid them upload the files
“preview_image” filed to get uploaded file name (maybe you need it)
set allowed types in ajax code and laravel code

HTML:

    <!-- jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <!-- uploadfile -->
    <link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet">
    <script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script>

    <!-- validationEngine -->
    <script src="http://www.position-relative.net/creation/formValidator/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>

    <script src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">

    <form id="myform" action="" method="post" enctype="multipart/form-data">
            <input type="hidden" name="preview_image" id="preview_image" value="">
            <div id="mulitplefileuploader">Upload</div>
            <span class="submit_form">Submit Form</span>
    </form>

jQuery:

  $(document).ready(function() {
$(document).ready(function() {
 
        var settings = $("#mulitplefileuploader").uploadFile({
            url: "{{ URL::to('upload') }}",
            method: "POST",
            allowedTypes:"jpg,png,gif",
            fileName: "myfile",
            autoSubmit:false,
            showStatusAfterSuccess:false,
            onSubmit:function(files)
            {
                $('').attr({
                    type: 'text',
                    name: 'myfile[]',
                    value: files
                }).appendTo('#myform');
            },
            onSuccess:function(files,data,xhr)
            {
                $('#myform').submit();
            },
            onError: function(files,status,errMsg)
            {
                $("#status").html("Something Wrong");
            }
        });
 
        $('.submit_form').click(function() {
 
            var validate = $("#myform").validationEngine('validate');
            var has_file = $(".ajax-file-upload-statusbar").length //check if there files need upload
 
            if(validate){
                if(has_file != false){
                    settings.startUpload();
                }else{
                    $('#myform').submit();
                }
            }
        });

PHP:

        public function postUpload(){

            $destinationPath = base_path(). '/' . "upload" . '/';

            if(Input::hasFile('myfile')){

                $file = Input::file('myfile'); // your file upload input field in the form should be named 'file'

                // Declare the rules for the form validation.
                $rules = array('myfile'  => 'mimes:jpg,jpeg,bmp,png');
                $data = array('myfile' => Input::file('myfile'));

                // Validate the inputs.
                $validation = Validator::make($data, $rules);

                if ($validation->fails())
                {
                    return Response::json('error', 400);
                }

                if(is_array($file))
                {
                    foreach($file as $part) {
                        $filename = $part->getClientOriginalName();
                        $part->move($destinationPath, $filename);
                    }
                }
                else //single file
                {
                    $filename = $file->getClientOriginalName();
                    $uploadSuccess = Input::file('myfile')->move($destinationPath, $filename);
                }

                if( $uploadSuccess ) {
                    return Response::json('success', 200);
                } else {
                    return Response::json('error', 400);
                }

            }
        }

Resources:
jQuery-Validation-Engine

jquery-upload-file

Categorized in:

Laravel, Website Development,

Tagged in:

,