将数据和文件以一种形式上传到Laravel中的Ajax

Question

I'm using Bootstrap Modal for my registration page. The user should be able to input his image as well as information on this form.

HTML

<form method="POST">    
    <center>
        <img name="user_image" id="proPic" src="images/Profile_ICON.png">
    </center>
    <center>
        <label for="inputImg" id="upload_link"> Upload Image </label>
        <input type="file" id="inputImg" accept="image/*">
    ​</center>
    <input type="text" class="registrationForm" name="username" id="username" placeholder="Username">
    <center>
        <span id="user_name_error" class="error"></span>
    </center>
    <input type="text" class="registrationForm" name="email" id="email" placeholder="Email ID">
    <center>
        <span id="user_email_error" class="error"></span>
    </center>
    <input type="text" class="registrationForm" name="user_mobile_number" id="user_mobile_number" placeholder="Mobile Number">
    <center>
        <span id="user_mobile_error" class="error"></span>
    </center>
    <input type="text" class="registrationForm" name="user_address" id="user_address" placeholder="Address">
    <center>
        <span id="user_address_error" class="error"></span>
    </center>
    <input type="password" class="registrationForm" name="password" id="password" placeholder="Password">
    <center>
        <span id="user_password_error" class="error"></span>
    </center>
    <input type="password" class="registrationForm" name="user_confirm_password" id="user_confirm_password" placeholder="Confirm Password">
    <center>
        <span id="user_confirm_error" class="error"></span>
    </center>
    <button type="button" id="registrationBtn">REGISTER</button>
</form>

js/AJAX/jQuery

$("#registrationBtn").click(function(){
    var data = {
        'username':$('#username').val(),
        'email':$('#email').val(),
        'user_mobile_number':$('#user_mobile_number').val(),
        'user_address':$('#user_address').val(),
        'password':$('#password').val(),
        'user_confirm_password':$('#user_confirm_password').val()
    };

    $.ajax({
        url: "/signUp",
        method: 'POST',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        data: data,
        //dataType: 'json',
        success: function(data){
            $('#Modal-Register').modal('hide');
            $('#Modal-Login').modal('show');
        },
        error: function(data){
            var errors = data.responseJSON;

            if (errors.hasOwnProperty('username')){
                $('#user_name_error').html(errors.username);
            }
            else {
                $('#user_name_error').html('');
            }

            if(errors.hasOwnProperty('email')){
                $('#user_email_error').html(errors.email);
            }
            else {
                $('#user_email_error').html('');
            }

            if(errors.hasOwnProperty('user_mobile_number')){
                $('#user_mobile_error').html(errors.user_mobile_number);
            }
            else {
                $('#user_mobile_error').html('');
            }

            if(errors.hasOwnProperty('user_address')){
                $('#user_address_error').html(errors.user_address);
            }
            else {
                $('#user_address_error').html('');
            }

            if(errors.hasOwnProperty('password')){
                $('#user_password_error').html(errors.password);
            }
            else {
                $('#user_password_error').html('');
            }

            if(errors.hasOwnProperty('user_confirm_password')){
                $('#user_confirm_error').html(errors.user_confirm_password);
            }
            else {
                $('user_confirm_error').html('');
            }
        }
    });
});

controller

class UserController extends Controller{
    public function signUp(Request $request){
        $this->validate($request,[
            'username' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'user_mobile_number' => 'required|max:255',
            'user_address' => 'required',
            'password' => 'required|min:6',
            'user_confirm_password' => 'required|same:password'
        ]);

        $user = new User;
        $user->username=$request->input('username');
        $user->email=$request->input('email');
        $user->user_mobile_number =$request->input('user_mobile_number');
        $user->user_address=$request->input('user_address');

        $password = Hash::make($request->input('password'));
        $user->password = $password;

        if ($user->save()){
            echo "Successfully registered";
        }
        else{
            echo "Failed to register";
        }
    }
}

How do Integrate adding of profile picture to this code?

Answer 1

Here's how i would do it

• Create a separate Ajax call to handle the upload of the image
• When the image is uploaded you return a reference to the image (id?) and place it in a hidden <input type="hidden" value="image_id">
• Add the image to the User when you submit your form. $user->add_image($image)

This of course requires an Image model and a relationship between User and Image (one to one?) and an add_image function on the User model

Answer 2

First of all add enctype="multipart/form-data" to your form and add name="photo" to your

   <input type="file"> 

Like this

    <input type="file" name="photo"/>

and add the following to your controller

  $path = $request->photo->storeAs('images', 'filename.jpg');

This will save the image to your storage folder