Using existing Fortify method for Profile Photo update

I was successfully able to utilize the existing Fortify method (App/Actions/Fortify/UpdateUserProfileInformation.php) for updating a user profile with a custom form except for one thing: the profile photo. Everything else works though!

Here is my form code

<form method="POST" action="{{ route('user-profile-information.update') }}" class="ask-form mt40">
            @csrf
            @method('PUT')

            <div class="input-wrap">
                Your Name *
                <input type="text" name="name" value="{{ old('name', $user->name) }}" autofocus required>
                <x-input-error for="name" class="mt-2" />
            </div>

            <div class="input-wrap">
                Your Nickname
                <input type="text" name="nickname" value="{{ old('nickname', $user->nickname) }}">
            </div>

            <div class="input-wrap">
                Email *
                <input type="email" name="email" value="{{ old('email', $user->email) }}" required>
            </div>

            <!-- image upload not working right now -->
            <div class="input-wrap" >
                Upload new image
                <input type="file" id="photo" name="photo" value=" old('photo', $user->profile_photo_path) }}" style="display: inline-block; padding:10px 0px 10px 10px; color: gray;cursor: pointer;">
            </div>        
   
            <span style="font-size: small; color: darkgrey;" class="-mt-10">* required</span>
            <div class="text-right">
                <input type="submit"
                    class="btn gradient color-white color-white plr50 ptb19 text-right"
                    value="Update Profile" />
            </div>
        </form>

Here is the Fortify code (works just fine when the image section is commented out)

 Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'nickname' => ['nullable', 'string', 'max:255'],
            'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
            'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024' ],
        ])->validate();

...and here is the error message when I try to update the profile

Something went wrong!

    - The photo field must be a file of type: jpg, jpeg, png.
    - The photo field has invalid image dimensions.

Here's the kicker: I kept the original profile update page, provided by Jetstream, and the image upload works just fine.

LaryAI

2 years ago

Best Answer

Level 58

It looks like the issue you're encountering is related to the form not being set up to handle file uploads. When you're uploading files in a form, you need to ensure that the form has the enctype attribute set to multipart/form-data. Without this attribute, the file upload will not work properly, and the server will not receive the uploaded file.

Here's how you can modify your form tag to include the enctype attribute:

<form method="POST" action="{{ route('user-profile-information.update') }}" class="ask-form mt40" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <!-- Your other form fields -->

    <div class="input-wrap">
        Upload new image
        <input type="file" id="photo" name="photo" style="display: inline-block; padding:10px 0px 10px 10px; color: gray;cursor: pointer;">
    </div>        

    <!-- Your other form fields -->

    <div class="text-right">
        <input type="submit" class="btn gradient color-white color-white plr50 ptb19 text-right" value="Update Profile" />
    </div>
</form>

Notice the addition of enctype="multipart/form-data" in the form tag. This allows the form to send files to the server.

Additionally, make sure that your validation rules in the Fortify code are correct and that the photo field is properly configured to accept the file types you want. The validation rules you've provided seem to be correct for handling image uploads.

Lastly, ensure that your server is configured to handle the file size you're expecting to upload. The max:1024 rule in your validation means that the file should be no larger than 1MB. If you're trying to upload a file larger than that, you'll need to adjust the validation rule accordingly.

If you've made these changes and are still encountering issues, you may want to check your server's error logs for more detailed information about what might be going wrong.

Please or to participate in this conversation.