Solspace user registration and avatar uploading

Question

I have a particular configuration. I'm using an <exp:user:register> form to register a user while at the same time adding a donation to a shopping cart using exp-ressso Store module. Basically I have two forms. One of them gets submitted in Ajax (the Registration one), while copying over some values from the Store one. When the submit succeeds also the <exp:store:checkout>form gets submitted.

I would have previously added the donation to the cart by using <exp:store:product tag, reload the page with a #expanded hash in order to jquery .show the actual checkout form.

I like the fact that in two passages, the users of the charity website I'm developing have the chance to register and submit the donation.

Since I will be posting also a "donors list" page, I would like my users to be able to upload their avatar picture/logo which I will later post on the listing page. I was wondering I can I achieve this without having to rely on <exp:user:edit> tag in a subsequent page/moment.

Here's my markup code:

 {exp:channel:entries channel="cartoline" category="1"}     
{exp:store:product
entry_id="{entry_id}"
form_class="importo-donazione importo"
form_id="importo"
return="cartoline/cartolina_autore#expand"
}
<input type="text" id="item_qty" name="item_qty" value="350,00"/>
<input type="submit" name="dona-ora" value="Dona ora!" />
{/exp:store:product} 
{/exp:channel:entries}

and later on

    <section id="form">
     <div  class="wrapper">
         <h2>Inserisci i tuoi dati e procedi con la donazione</h2>

       {exp:store:cart}

    {if no_items}
        <p>La tua donazione è stata annullata. Clicca <a href="{path="cartoline/cartolina_autore"}" style="color: #fff;">qui</a> per indicare un nuovo importo per questa donazione</p>
    {/if}

<p class="thanks">Hai scelto di destinare <span>{order_total}</span> alla nostra causa! Grazie!</p>

{/exp:store:cart}

<div class="hidden">
{exp:store:checkout 
payment_method="Paypal_Express" 
return="thanks/ORDER_HASH" 
require="billing_first_name|order_email"
form_id="store"
}
            </fieldset>
            <fieldset>
             <label for="order_custom1">Ragione sociale</label>
             <input class="username" type="text" value="{billing_first_name}" name="billing_first_name"/>
             </fieldset>
             <fieldset>
             <label for="{order_email}">email</label>
             <input class="email" type="text" value="{order_email}" name="order_email"/>
             <input type="hidden" name="XID" value="{XID_HASH}" />
             <input id="store-submit" type="submit" name="submit" value="invia" />
             </fieldset>

{items}
{exp:channel:entries 
    entry_id="{entry_id}" 
    disable="pagination|categories|member_data|category_fields|custom_fields"
    channel_short_name= "cartoline"}
{/exp:channel:entries}
{/items} 
             <input type="submit" name="empty_cart" value="Annulla" />


    {/exp:store:checkout}
    </div>
    <div class="register-form">
    {exp:user:register
    form:id="registrazione"
    return="site/index"
    }
    <input class="username" type="text" value="" name="username"/>
    <input class="email" type="text" value="" name="email"/>
    <input class="logo" type="file" name="logo" value=""/>
    <input type="hidden" name="password" id="password" value="centronemo24" />
    <input type="hidden" name="password_confirm" id="password_confirm" value="centronemo24" />
    <input type="submit" value="procedi" name="submit"/> 
    {if no_results}
        <p style="clear: both;">Ti sei già registrato per una donazione. Se vuoi farne un'altra, registrati come altro utente <a href="{path="logout"}">Logout</a></p>
    {/if}
    </div>
    {/exp:user:register}

And this is the relevant jquery

$(document).ready(function() {

$("#store .email").blur(function(){
    $("#registrazione .email").val(this.value);
});
$("#store .username").blur(function(){
    $("#registrazione .username").val(this.value);
});
$("#store .logo").blur(function(){
    $("#registrazione .logo").val(this.value);
});
// Get the hash of the page
var hashstring = window.location.hash.substring(1);
var found = false;
var checkedout = false;

// Do a hash exist?
if (hashstring.length > 0) 
{
    // Split the hash by '&'-sign (in case you have more variables in the hash, as I have)
    var a = hashstring.split("&");

    // Loop through the values
    for (i = 0; i < a.length; i++)
    {
        // Split the string by '=' (key=value format)
        var b = a[i].split("=");

        // If the key is 'expand' (which tells us if the page is reloaded)
        if(b[0] == 'expand')
        {
            found = true;
        }


    }
}    

if(found)
{

$('#form').show();
$(document.body).animate({
    'scrollTop':   $('#form').offset().top
}, 2000);
$('#importo').hide();

$('#registrazione').on('submit', function(e) {
  e.preventDefault();

  $.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    data: $(this).serialize(),
    success: function() {
      // duplicate fields from first form into second form
      // as per whatever code you've already written

      // submit second form
      $('#store-submit').click();
    }
  });
});

I would like to add a field or something, in order to populate the avatar. I might also consider using a "guest" channel to post images and usernames along with e-mails, but since the member channel seems the most natural destination…

Do you have any thoughts? Thank you.

Answer 1

You can upload an avatar images during registration with {exp:user:register} by using a file field with a name="" of avatar_filename:

 <input type="file" name="avatar_filename" />

However in general (not just with Solspace User but any form), uploading a file using AJAX may require a special javascript/jQuery plugin, such as AjaxFileUpload. Simply using .serialize() might not be enough: files are handled differently than simple form fields.

Answer 2

This sounds much harder than it needs to be. Have you thought about using Store's native member registration features?

https://exp-resso.com/docs/checkout_tag.html#registering_members

You can still use Solspace User to handle the update profile pages etc, but just use Store for the initial member registration during checkout.

Also I'd avoid uploading an avatar at the same time as checking out, payment processing etc. It's just too much that could go wrong in a single request. Why don't you just ask the customer to optionally upload an avatar after they make payment? That way it can be an optional extra if they want their avatar to be shown.