Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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.
// Workaround to let supporters manage their profile pictures in the profile manager.
// See
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 {
<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;
<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">
<? 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 class="formRow">
<label for="file">Select a file: &nbsp;</label>
<input name="file" type="file">
<div class="formRow">
<input value="Upload picture" type="submit">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.