Best way to update avatar after Dropzone upload

Hey guys, I'm trying to figure out the best way to update my avatar asynchronously after I upload an image via Dropzone.

This is what my routes and controller look like:

Route::post('{id}/avatar', 'Auth\AuthController@postAvatar');

in my AuthController POST request I return the new name of the avatar:

protected function postAvatar($id, Request $request)
{
        $this->validate($request, [
             'file' => 'required|mimes:jpg,jpeg,png'
         ]);

        //get uploaded file
        //'file' param name is determined in Dropzone options script
        $file = $request->file('file');

        //add timestamp to original file name
        $name = time() . $file->getClientOriginalName();

        //move uploaded image to specific directory changing the name
        $file->move("img/avatars", $name);

        //retrieve authenticated user
        $user = User::findOrfail($id);
        $user->avatar = $name;
        $user->save();
        return $name;
 }

The question I have is how do I catch the return name when the JQuery docs state that 1.) A JQuery post() method NEVER catches data and 2.) the POST request is being made via the Blade form

thanks

tgif

10 years ago

Level 4

Update: ok so I figured out how to get the return value using Dropzone events:

<script>
Dropzone.options.addAvatarForm = {
    init: function() {
        this.on("success", function(file, response) {
        console.log(response);
        alert(response);
});
</script>

1 like

tgif

10 years ago

Best Answer

Level 4

Update 2: ok so this updates my avatar after upload:

<script>
    Dropzone.options.addAvatarForm = 
    {
        paramName: 'file',
        maxFilesize: 1,
        acceptedFiles: '.jpg, .jpeg, .png',
        maxFiles: 1,
        init: function() 
        {
            this.on("success", function(file, response)
            {
                var path = "img/avatars/" + response;
                $("#user-avatar").attr("src", path );
            });
        }
    }
</script>

wew

4 likes

Please or to participate in this conversation.