понедельник, 14 мая 2012 г.

Upload Control – Работа с элементом управления загрузки множества файлов

Сразу покажу скриншоты, о чём идёт речь:
image
image
Позволяет загружать файлы в папку или библиотеку документов на веб-сервере. В работе не сложен, но есть много нюансов.
Итак, исходный код.
<script type="text/jscript">
    function DocumentUpload() {
        var uploadCtl = document.getElementById("idUploadCtl");
        uploadCtl.MultipleUpload();
    }
</script>

<input type="hidden" name="Cmd" value="Save" />
<input type="hidden" name="putopts" value="true" /> <!-- Overwrite files -->
<input type="hidden" name="Confirmation-URL" value="<%= Page.Request.Url.GetComponents(UriComponents.SchemeAndServer, UriFormat.Unescaped) %>" />
<input type="hidden" name="PostURL" value="" />
<input type="hidden" name="VTI-GROUP" value="0" />
<input type="hidden" name="destination" id="destination" value="/Documents"> <!-- Files destination path, must already exist -->

<asp:Panel runat="server" Width="100%">
    <script>
        try {
            if (new ActiveXObject("STSUpld.UploadCtl"))
                document.write("<OBJECT id=\"idUploadCtl\" name=\"idUploadCtl\" CLASSID=\"CLSID:07B06095-5687-4d13-9E32-12B4259C9813\" WIDTH=\"100%\" HEIGHT=\"350px\"></OBJECT>");
        }
        catch (error) {
        }
    </script>
    <asp:Button runat="server" accesskey="O" id="OKButton" CssClass="ms-ButtonHeightWidth" Text="Загрузить файлы" UseSubmitBehavior="False" OnClientClick="DocumentUpload(); return false;"/>
    <asp:Button runat="server" accesskey="C" id="CancelButton" CssClass="ms-ButtonHeightWidth" Text="Отмена" UseSubmitBehavior="False" style="display: none;"/>
</asp:Panel>
Что мы имеем:
  1. Скрипт запуска загрузки файлов
  2. Набор параметров, организованных как скрытые поля с атрибутом name
  3. Панель с ActiveX и объектом, отображающими основной интерфейс
  4. Две кнопки – ok и отмена
Все пункты являются обязательными. Если чего-то будет не хватать, то вы получите неприятное окно с ошибкой:
image
1. Скрипт. Тут всё понятно. Находим сгенерированный позже объект и вызываем его метод. Начинается загрузка файлов.
2. Параметры.
  • putopts – указывает необходимость перезаписи файлов, при совпадении имён. Иначе файл не будет загружен
  • destination – указывает путь к папке или библиотеке документов куда необходимо загружать файлы
  • PostURL – теоретически, сюда нужно указать url страницы, которой нужно пересылать файлы, чтобы страница сама определила дальнейшую их судьбу; но на практике это не заработало (компонент сам загружает файлы, по пути указанному в destination)
Параметры можно изменять на лету (JavaScript’ом) перед непосредственным вызовом метода загрузки.
3. ActiveX. Единственный момент тут – данный ActiveX компонент (“STSUpld.UploadCtl”) не должен быть отключен в браузере.
4. Кнопки. Данные кнопки должны существовать. Вы можете их не использовать, скрыть и т.п., но они должны быть. Они должны быть с type=”button” (не “submit”) и у них должны быть проставлены свойства AccessKey.
Ещё несколько особенностей (скажем спасибо Wictor Wilén):
  • Все кнопки на странице должны иметь атрибут AccessKey
  • Должна быть кнопка с AccessKey=”O” (для OK) и AccessKey=”С” (для Cancel)
  • Значение для destination изначально не должно быть пустым, при необходимости его можно изменить позже

13 комментариев:

  1. Ответы
    1. Ну... чО попалось то и кинул... :)

      Удалить
  2. Анонимный14 мая 2012 г., 20:45

    А откуда в SP 2010 появился метро дизайн как на скринах ?

    ОтветитьУдалить
    Ответы
    1. Смотрите тут: http://social.technet.microsoft.com/wiki/contents/articles/10597.sharepoint-2010-metro-style-for-sharepoint-sites-en-us.aspx

      Удалить
  3. Hi, thanks for this very helpful post.

    I have one question, though - I cannot seem to get my upload control to redirect to a confirmation page. I have tried setting the "Confirmation-URL" hidden input value to "/Documents/Forms/AllItems.aspx" as well as "http://server/Documents/Forms/AllItems.aspx", but the page never loads anything after the upload has completed.

    ОтветитьУдалить
    Ответы
    1. Hello!

      I didn't found how to make Confirmation-URL and PostURL parameters operational...
      May be they works in SP2007.

      Удалить
    2. Must be SP2007, it's very annoying! Do you have any suggestions how I can find out when the ActiveX control has finished uploading so that I can manually redirect my users? I need to go on and run some C# code against the documents that have been uploaded, but do not know how! Thank you again.

      Удалить
    3. Try to upload files to temporary library and add event receiver to this library.

      Удалить
    4. Hello!
      I found that Confirmation-URL works! But it mixed up with PostURL.
      After files uploaded, user clicks upload button (with another content already) again (to complete upload) and he is being redirected to Confirmation-URL parameter value.

      Удалить
    5. Этот комментарий был удален автором.

      Удалить
    6. Also, you can attach event receiver to upload button which clicks button when STSUpld.UploadCtl changes it's text:

      asp:Button runat="server" accesskey="O" id="OKButton" CssClass="ms-ButtonHeightWidth" OnPropertyChange="if (this.value != 'Загрузить файлы') this.click();" Text="Загрузить файлы" UseSubmitBehavior="False" OnClientClick="DocumentUpload(); return false;"

      (see OnPropertyChange)

      Удалить
  4. Ответы
    1. Надо будет ещё какой-нибудь плагин разобрать...:)

      Удалить