Workaround that allows a supporter to manage the profile picture using the Salsa supporter profile manager. This script *must* be installed into the default template. Installing it in a non-default template will just take up space. You'll know the script is working when you see the upload dialog on the supporter profile page.

upload_profile_picture.html

<?
// Workaround to let supporters manage their profile pictures in the profile manager.
// See https://help.salsalabs.com/entries/97612948
//
var DEFAULT_AVATAR_URL = '/hq/images/support.png';
var avatarUrl = null;
var avatarKey = null;
(function() {
    // This script only works on the profile page.
    if (Request.getURL().indexOf('/profile/profile.jsp') !== -1)  {
        // The current support avatar is the first 'Profile' supporter_picture image.
        // The standard default applies if there's not already a profile image.
        var supporterPictures = DB.getObjects('supporter_picture', {
            conditions: [
                new Condition('supporter_KEY', '=', supporter.supporter_KEY),
                new Condition('type', '=', 'Profile')
            ],
            limit: '1'
        })
        if (supporterPictures.length != 0) {
            //avatarUrl = supporterPictures[0].path;
            avatarKey = supporterPictures[0].supporter_picture_KEY;
            avatarUrl = supporterPictures[0].small_photo_path;
        } else {
            avatarUrl = DEFAULT_AVATAR_URL;
        }
?>
    <script type="text/javascript">
    // Script that inserts the avatar picture HTML when the page is loaded.
    document.addEventListener("DOMContentLoaded", function(event) {
        if (document.location.href.indexOf('/profile/profile.jsp') === -1) return;
        var firstFieldSet = document.getElementsByTagName('fieldset')[0];
        var avatarFieldset = document.getElementById('avatar-fieldset');
        firstFieldSet.parentNode.insertBefore(avatarFieldset, firstFieldSet);
    });
    // Script to validate the avatar form.  Validation fails if there's not a file
    // to upload.
    // @param  [Object]  event  event from the DOM?
    // @return [Boolean] returns true if the form content is valid
    function validateAvatar() {
        var list = document.getElementsByName('file');
        if (list.length == 0) return false;
        if (list[0].value.length == 0) {
            alert("Please choose a file before clicking the Upload button.");
            return false;
        } else {
            return true;
        }
    }
    </script>
    <div style="display: none">
        <fieldset id="avatar-fieldset" class="border">
            <legend>Profile picture</legend>
            <form id='avatar-form' action="/o/<?= salsa.organization_KEY ?>/p/salsa/supporter/common/hq/upload" method="POST" onsubmit ="return validateAvatar()" enctype="multipart/form-data">
                <input type="hidden" name="object" value="supporter_picture">
                <input type="hidden" name="key" value="0">
                <input type="hidden" name="supporter_KEY" value="<?= supporter.supporter_KEY ?>">
                <input type="hidden" name="organization_KEY" value="<?= salsa.organization_KEY ?>">
                <input type="hidden" name="subdirectory" value="images/supporter_pictures/<?= supporter.supporter_KEY ?>">
                <!-- See the table definitions for more types.  Profile pics are the
                     only ones valid in the supporter profile. -->
                <input type="hidden" name="type" value="Profile">
                <input type="hidden" name="createThumbnails" value="true">
                <input type="hidden" name="redirect" value="<?= Request.getURL() ?>">
                <div class="formRow">
                    <img class="avatar-image" src="<?= avatarUrl ?>" title="Your supporter avatar">
                </div>
                <? if (avatarKey != null) { ?>
                    <div class="formRow">
                        <a href="/delete?object=supporter_picture&amp;key=<?= avatarKey ?>" title="Click here to delete this image.  This action can't be undone.">Delete</a>
                    </div>
                <? } ?>
                <div class="formRow">
                    <label for="file">Select a file: &nbsp;</label>
                    <input name="file" type="file">
                </div>
                <div class="formRow">
                    <input value="Upload picture" type="submit">
                </div>
            </form>
        </fieldset>
    </div>
    <?
    }
})();
?>