The Photo Uploader

TagTray uses the awesome Filestack file uploader to optionally provide your customers with photo upload functionality, and because you'll piggy-back off our account, there is no additional charge for using this service. This means that we're able to handle file uploads not only from computers or phones, but also from every possible cloud source from Google Drive to Dropbox. And, of course, these photos can then be easily incorporated into any of your moderated photo galleries alongside your Instagram, Facebook, and Twitter photos.

And, by using a custom post-upload data entry form, you can also collect information from the customers that submit these photos, including name and email address, if you wish.

All uploaded files are securely stored for you in our durable Amazon S3 file bucket.



Step 1: Add and configure the Filestack JavaScript Library

To incorporate the Filestack JavaScript library into your site, copy and paste this script into your page just before the closing </head> tag (and immediately preceding the TagTray library include.


<script src="//api.filestackapi.com/filestack.js"></script>
<script src="//api.tagtray.com/v3/tagtray.js"></script>

Step 2: Add the Gallery to Your Page

The simplest of galleries with uploader functionality will look something like this:


<div class="tagtray-gallery" data-gallery-code="add your assigned gallery code here" data-fp-upload-type="simple"></div>

In addition to the standard TagTray configuration options, you can configure your uploader using these options below:

Data Attribute Description
data-fp-upload-type Optionally specify simple for the easiest of upload options (everything is handled for you), or select collect-info to add your own info collection form (default = none)
data-fp-upload-message Specify the message that will be displayed beside the upload button (default = 'Submit your own photo to our gallery')
data-fp-success-message Specify the message that will be displayed after a successful upload in the simple mode (default = 'Your photo upload was successful.')
data-fp-success-message-class Specify the CSS class(es) that will be wrapped around the success message in simple mode (default = Bootstrap style 'alert alert-success')
data-fp-button-text Specify the label that will be displayed on the upload button (default = 'Select Photo...')
data-fp-button-class Specify the CSS class(es) that will be wrapped around the upload button (default = Bootstrap style 'btn btn-primary')
data-fp-services The list of services from which to allow uploads. The services will be shown in the provided order. Full list (default = 'COMPUTER,WEBCAM,INSTAGRAM,FACEBOOK,URL,DROPBOX,GOOGLE_DRIVE,CONVERT')
data-fp-crop-ratio Specify a mandated crop area height to width ratio. This can be a float, an integer or a ratio like 1/1 (to enforce a square upload), 4/3 or 16/9. By default it is not specifed.

Step 3: Optional Post-Upload Info Collection Form

Capture Name, eMail Address, and Photo Caption

If you've selected the collect-info upload type option, once a photo has been uploaded from your site, TagTray will attempt to display a DIV wrapped in the class tagtray-file-upload-success. This DIV should contain a form that is used to submit name, email, and optionally photo caption info. Please see this page for a working example, but the skeleton form inside the hidden DIV should look like this:


<div class="tagtray-file-upload-success" style="display: none">

    <h4>Upload Complete</h4>
    <p>Your photo upload was successful. Please submit the following so that we may review and post your
    submission:</p>

    <form action="https://www.tagtray.com/api/registerInkUpload" method="post" id="tagtray_upload_form">
        <input type="hidden" name="key" value="">
        <input type="hidden" name="gallery_code" value="">
        <input type="hidden" name="redirect_to" value="">
        <input type="text" name="email" placeholder="Enter Your Email">
        <input type="text" name="name" placeholder="Enter Your Full Name">
        <button type="submit">Submit Photo For Review</button>
    </form>
</div>

The following form fields are available to you:

email

Used to capture the email address of the photo submitter -- will be displayed in the admin dashboard (but not in the public gallery).

name

Used to capture the full name of the photo submitter -- will be displayed in the admin dashboard (but not in the public gallery).

caption

Used to optionally capture a caption or message to go along with a submitted photo. This text be displayed when the photo is viewed both in the admin dashboard and in the public gallery.

Our full example (using Bootstrap CSS) results in a form like the following screenshot: