How to configure a Direct Uploader into one step

There may be times in which you'd like your Direct Uploader to be a single step, versus the 3 steps that it is out of the box. luckily, this is relatively easy to accomplish!

First off, you will need to create and configure your direct uploader, per the initial instructions (found here).

Next you will need to shuffle some of the HTML codes around from the Direct Uploader's Customize section.

First up, let's move the HTML code from the About tab, over to the Upload tab. However, there are a few caveats with this:

You'll likely want to remove the title from the About tab.
You'll also need to remove the Next button from the Upload tab code.

<div class="row">
    <div class="col-md-12">
        <div class="st-form-group">
            <h2 class="st-title st-title-h2">Step 1</h2>
			<h2 class="st-title st-title-h3">Upload Your Content</h2>
        </div>
    </div>
</div>#{{#config.show_progress_bar}}
<div class="row">
    <div class="col-md-12">
        <div class="st-form-group">
            <div class="st-progress" data-role="progressbar" data-autobind="true" data-max-value="100" data-min-value="0">
                <div class="st-progress-bar" role="progressbar" style="width: 50%;"></div>
            </div>
        </div>
    </div>
</div>
#{{/config.show_progress_bar}}<div class="leftCol">    #{{#config.media.display}}
    <div class="row">
        <div class="col-md-12">#{{{fileUploadTpl}}}</div>
    </div>
    #{{/config.media.display}}    #{{#config.comment.display}}
    <div class="row">
        <div class="col-md-12">
            <div class="st-form-group">
                <input type="text" class="st-form-control floatlabel" name="comment" value="#{{formData.comment}}" placeholder="Comment" />
            </div>
        </div>
    </div>
    #{{/config.comment.display}}
</div><div class="rightCol">    <div class="row">
        #{{#config.email.display}}
        <div class="col-md-12">
            <div class="st-form-group">
                <input type="text" class="st-form-control floatlabel" name="email" value="#{{formData.email}}" placeholder="Email" />
            </div>
        </div>
        #{{/config.email.display}}
        
        #{{#config.firstname.display}}
        <div class="col-md-12">
            <div class="st-form-group">
                <input type="text" class="st-form-control floatlabel" name="firstname" value="#{{formData.firstname}}" placeholder="First Name" />
            </div>
        </div>
        #{{/config.firstname.display}}        #{{#config.lastname.display}}
        <div class="col-md-12">
            <div class="st-form-group">
                <input type="text" class="st-form-control floatlabel" name="lastname" value="#{{formData.lastname}}" placeholder="Last Name"/>
            </div>
        </div>
        #{{/config.lastname.display}}
        
        <div class="col-md-12">
            <div class="st-form-group">
                <input type="text" class="st-form-control" name="custom-data-handle" value="" placeholder="@SocialHandle" />
            </div>
        </div>        <div class="col-md-12">
            <div class="st-form-group">
                <input type="text" class="st-form-control" name="custom-data-location" value="" placeholder="Location (City, State/Province)" />
            </div>
        </div>
         #{{#config.terms_and_conditions.display}}
        <div class="col-md-12">
            <div class="st-form-group checkboxes">
                <label>
                    <input type="checkbox" name="terms_and_conditions" class="st-form-control" value="1" #{{#formData.terms_and_conditions}}checked#{{/formData.terms_and_conditions}} />
                    I agree to the <a href="#{{config.terms_and_conditions_url}}" target="_blank">Terms and Conditions</a>
                </label>
            </div>
        </div>
        #{{/config.terms_and_conditions.display}}        #{{#config.recaptcha.display}}
        <div class="col-md-12">
            <div class="st-form-group">
                <input type="hidden" name="recaptcha" />
                <div class="stackla-recaptcha-wrapper"></div>
            </div>
        </div>
        #{{/config.recaptcha.display}}    </div></div><div class="row">
    <div class="col-md-12">
        <div class="st-form-group right">
            <button type="button" data-action="next" data-form-complete="true" class="st-btn st-btn-primary">Submit</button>
        </div>
    </div>
</div>

Next, let's move the HTML code from the Thank You tab, over to the About tab:

<div id="thank-you-page displayed"></div><div class="row">
    <div class="col-md-12">
        <div class="st-form-group">
            <h2 class="st-title st-title-h2">Step 2</h2>
			<h2 class="st-title st-title-h3">Complete</h2>
        </div>
    </div>
</div>#{{#config.show_progress_bar}}
<div class="row">
    <div class="col-md-12">
        <div class="st-form-group">
            <div class="st-progress" data-role="progressbar" data-autobind="true" data-max-value="100" data-min-value="0">
                <div class="st-progress-bar" role="progressbar" style="width: 100%;"></div>
            </div>
        </div>
    </div>
</div>
#{{/config.show_progress_bar}}<div class="row">
    <div class="col-md-12">
        <div class="st-form-group">        #{{^postStatus}}
        <div class="post-error">
            <p>Oooops, There was an error when sending your data, please try again later.</p>
        </div>
        #{{/postStatus}}        #{{#postStatus}}
        <div class="thank-you-message">
            <p>Thank You! Your image has been submitted to the team.</p>
        </div>
        #{{/postStatus}}
        </div>
    </div>
</div>

For any further questions or queries, please submit a request and our support team will get back to you.