Search code examples
sharepointdocument-library

Improved document upload experience in SharePoint


The default WSS 3.0/SharePoint 2007 SharePoint upload user experience is like this:

  1. Click link for document library. ****PostBack****
  2. Click Upload. ****PostBack****
  3. Click Browse. ****Dialog****
  4. Click on document and click OK. ****Dialog disappears****
  5. Click OK. ****PostBack****
  6. Fill in document properties and click OK. ****PostBack****

Best case, this is a minimum of 1 + 1 + 1 + 2 + 1 + 1 = 7 clicks with 4 postbacks. I'm getting complaints (and agree) that this isn't slick enough.

Does anyone know of an open source solution that improves the user experience for a document upload? The solution would need to support custom field types when entering document properties.

Edit: This needs to be simple and intuitive for users that are not tech-savvy. Copying URLs is not an option.


Solution

  • I had a similar requirement a long while back. I ended up using a CustomAction to extend the Upload UI; and made a modal lightbox popup when the item was clicked; the box's UI included a file upload control and all standard as well as custom fields. The trick was simply using the UrlAction element's "Url" attribute to initiate the script. The upload was handled with a web service.

    The users upload workflow then only requires a single postback (navigating to the doclib itself)

    I called it something to the effect of "Quick Upload".

    Here's an idea of what the Elements.xml looked like

    <?xml version="1.0" encoding="utf-8" ?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <!-- Document Library Toolbar Upload Menu Dropdown -->
       <CustomAction Id="UserInterfaceCustomActions.DocLibUploadToolbar"
        RegistrationType="List"
        RegistrationId="101"
        GroupId="UploadMenu"
        Rights="ManagePermissions"
        Location="Microsoft.SharePoint.StandardMenu"
        Sequence="1000"
        Title="Quick Upload">
        <UrlAction Url="javascript:ShowUploadLightBoxWithCustomFields()"/>
      </CustomAction>
    </Elements>