Custom Fields

Custom fields for you CMS Pages, RainLab.Blog and Rainlab.User

Back to Custom Fields Support

Jan van de Laar
Jan van de Laar

Hi I just purchased your plugin. Now I want to let the logged in user update his fields. But nothing is saved and the mediafider button is not visible on frontend. However my first intention was to create an uploadform so for the photo so that user can only use his own images. Is that possible?

Last updated

Vladimir
Vladimir

Here's an example of what you wanted:

Add the custom fields

https://i.ibb.co/pbTCf7z/Manual.png

Add the user.htm Page

    title = "user"
    url = "/user"
    layout = "default"
    is_hidden = 0
    robot_index = "index"
    robot_follow = "follow"

    [session]
    security = "all"

    [account]
    paramCode = "code"
    forceSecure = 0
    requirePassword = 0
    ==
    <?php
    use RainLab\User\Models\User as UserModel;

    function onSave()
    {

        $data = post();

        $rules = [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'confirmed|min:8',
        ];

        $validation = Validator::make($data, $rules);

        if ($validation->fails()) {
            throw new ValidationException($validation);
        }

        $id = input('id');

        $user = UserModel::where('id', $id)->first();

        $user->fill($data);

        if (Request::hasFile('photo')) {

            $mediafilename = '/media/avatars/' . $user->name . '/' . Request::file('photo')->getClientOriginalName();
            $filename = 'avatars/' . $user->name . '/' . Request::file('photo')->getClientOriginalName();

            Storage::put($mediafilename, file_get_contents(Request::file('photo')->getRealPath()));

            $user->setField('usercustomfields', [[
                "first" => input('first'),
                "second" => input('second'),
                "photo" => $filename,
            ]]);

        } else {

            $user->setField('usercustomfields', [[
                "first" => input('first'),
                "second" => input('second'),
                "photo" => input('notchangephoto'),

            ]]);

        }

        $user->save();

        Flash::success('Successfully saved!');

        if (array_key_exists('password', $data) && strlen($data['password'])) {

            Auth::login($user->reload(), true);

        }

    }
    ?>
    ==
    <section id="demo" class="section demos bg-gray">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center section-title">

                    <br>
                    {% if not user %}

                    {% component 'account' %}

                    {% endif %}

                    {% if user %}

                    <div id="customfields">
                        {% partial 'user' %}
                    </div>

                    <p>Hello {{ user.name }}</p>

                    <a data-request="onLogout" data-request-data="redirect: '/user'">Sign out</a>

                    {% else %}
                    <p>Nobody is logged in</p>
                    {% endif %}

                </div>
            </div>
        </div>
    </section>

Add the user.htm Partial

    [session]
    security = "all"
    ==
    <form class="" data-request="onSave"  data-request-flash data-request-files  data-request-validate data-request-update="user: '#customfields'">

        <input name="id" type="text"  id="accountName" value="{{ user.id }}" hidden>

        <div class="form-group">
            <label for="accountName">Full Name</label>
            <input name="name" type="text" class="form-control" id="accountName" value="{{ user.name }}">
            <span data-validate-for="name"></span>
        </div>

        <div class="form-group">
            <label for="accountEmail">Email</label>
            <input name="email" type="email" class="form-control" id="accountEmail" value="{{ user.email }}">
            <span data-validate-for="email"></span>
        </div>      

        <div class="form-group">
            <label for="accountPassword">New Password</label>
            <input name="password" type="password" class="form-control" id="accountPassword">
            <span data-validate-for="password"></span>
        </div>

        <div class="form-group">
            <label for="accountPasswordConfirm">Confirm New Password</label>
            <input name="password_confirmation" type="password" class="form-control" id="accountPasswordConfirm">
            <span data-validate-for="password_confirmation"></span>
        </div>

        <div class="form-group">
            <label for="accountName">First test field</label>
            <input name="first" type="text" class="form-control" id="accountName" value="{{ user.getField('first') }}">
            <span data-validate-for="first"></span>
        </div>

        <div class="form-group">
            <label for="accountName">Second test field</label>
            <input name="second" type="text" class="form-control" id="accountName" value="{{ user.getField('second') }}">
            <span data-validate-for="second"></span>
        </div>

        <div class="form-group">
            <label for="accountName">Photo</label>
            <input type="file" name="photo" class="form-control" accept="image/*" >

        </div>

        <div class="form-group">
            {% if user.getField('photo') %}
            <img style="width: 200px; height: : 100%"  src="{{ user.getField('photo') | media }}">
            {% endif  %}
        </div>

        <input name="notchangephoto" type="text"  value="{{ user.getField('photo') }}" hidden>

        <div class="form-group">
            <button type="submit" class="btn btn-default">Save</button>
        </div>
    </form>

Result

https://www.youtube.com/watch?v=HxyGjuDv78I

1-2 of 2