Upload Files Lightbox (Edit Mode)


Home: Socialtext Style Customization Guide
Up: Styling The Lightboxes
Previous: Page Already Exists Lightbox
Next: Manage Attachments Lightbox


uploadfileseditmode.png

HTML Snippet

<div id="st-attachmentsqueue-interface">
  <form onsubmit="return false;">
    <div id="st-attachmentsqueue-overlay" class="popup-overlay"></div>
    <div id="st-attachmentsqueue-dialog">
      <div id="st-attachmentsqueue-title">Upload Files</div>
        <p id="st-attachmentsqueue-message">
          Click "Browse" to find the file you want to upload.
          When you click "Add file" this file will be added to
          the list of attachments for this page, and uploaded
          when you save the page.
        </p>
        <p id="st-attachmentsqueue-fileprompt">
          <input id="st-attachmentsqueue-filename" size="60" type="file" name="file"/>
        </p>
        <div id="st-attachmentsqueue-error">&nbsp;</div>
        <div id="st-attachmentsqueue-list"></div>
        <div id="st-attachmentsqueue-uploadmessage">&nbsp;</div>
        <div id="st-attachmentsqueue-embed">
          <label for="st-attachmentsqueue-embedcheckbox" id="st-attachmentsqueue-embedlabel">
            <input class="checkbox" type="checkbox" id="st-attachmentsqueue-embedcheckbox" name="embedcb" value="1" checked="checked"/>
            <input type="hidden" id="st-attachmentsqueue-embedfield" name="embed" value="1"/>
            <span id="st-attachmentsqueue-embedmessage">
              Add a link to the attachment at the top of the page?
              Images will appear in the page when the page is saved.
            </span>
          </label>
        </div>
        <div id="st-attachmentsqueue-unpack">
          <label for="st-attachmentsqueue-unpackcheckbox" id="st-attachmentsqueue-unpacklabel">
            <input class="checkbox" type="checkbox" id="st-attachmentsqueue-unpackcheckbox" name="unpackcb" value="1" />
            <input type="hidden" id="st-attachmentsqueue-unpackfield" name="unpack" value="0"/>
            <span id="st-attachmentsqueue-unpackmessage">
              Expand zip archive and attach individual files to the page
            </span>
          </label>
        </div>
        <div id="st-attachmentsqueue-buttons">
          <div id="st-attachmentsqueue-close">
            <table class="button-table">
              <tr>
                <td>
                  <div class="button-straight">
                    <div class="button-straight-right-top">
                      <div class="button-straight-left-bottom">
                        <div class="button-straight-right-bottom">
                          <div class="button-content">
                            <a id="st-attachmentsqueue-closebutton" href="#" title="">Done</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div id="st-attachmentsqueue-uploadbutton">
          <table class="button-table">
            <tr>
              <td>
                <div class="button-straight">
                  <div class="button-straight-right-top">
                    <div class="button-straight-left-bottom">
                      <div class="button-straight-right-bottom">
                        <div class="button-content">
                          <a id="st-attachmentsqueue-submitbutton" href="#" title="">Add file</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div id="st-attachmentsqueue-holder" style="display: none"></div>

    <div id="st-attachmentsqueue-listtemplate" style="display: none">
      <span class="st-attachmentsqueue-listlabel">Files To upload: </span>
      <!-- json -->
    </div>
  </form>
</div>

CSS Selectors

See Standard Button for the CSS selectors for the buttons.

#st-attachmentsqueue-interface
#st-attachmentsqueue-overlay
div.popup-overlay
#st-attachmentsqueue-dialog
#st-attachmentsqueue-title
#st-attachmentsqueue-message
#st-attachmentsqueue-fileprompt
#st-attachmentsqueue-filename
#st-attachmentsqueue-error
#st-attachmentsqueue-list
#st-attachmentsqueue-uploadmessage
#st-attachmentsqueue-embed
#st-attachmentsqueue-embedlabel
#st-attachmentsqueue-embedcheckbox
#st-attachmentsqueue-embedmessage
#st-attachmentsqueue-unpack
#st-attachmentsqueue-unpacklabel
#st-attachmentsqueue-unpackcheckbox
#st-attachmentsqueue-unpackmessage
#st-attachmentsqueue-buttons
#st-attachmentsqueue-closebutton
#st-attachmentsqueue-uploadbutton
#st-attachmentsqueue-submitbutton
#st-attachmentsqueue-listlabel