Using legacy FrontPage functionality in SharePoint and SharePoint Designer to create a file "drop box".

SharePoint is a great tool for information sharing. Document libraries allow your users to upload and collaborate on documents of all sorts. Sometimes, though, you don't want to do things quite the way SharePoint does it.

Does this sound familiar?

"I want a place where users can upload a file, but I don't want them to see what everyone else has uploaded."

Your first thought might be no problem, I'll just set up a document library, but what about that bit about seeing what everyone else has uploaded? Now we're getting a bit messy. Document libraries don't have an "only their own" security option.

And what if this is supposed to be a "drop only" zone, such that they aren't even supposed to get back at their own files? (This is a more common request than you might think). Again, very difficult with the standard SharePoint document libraries. Savvy users can figure out how to get to their files based on the address of the forms folder.

While there are many ways to get around these issues, most of them involve a lot of work customizing the target library and its forms. Fortunately, there are some old, but little known, tools in SharePoint and SharePoint Designer that can make short work of the problem.

It's In There...

You may not realize this (unless you've been around a while, or read the Appendix to my book), but SharePoint is a descendent (at least conceptually) of the FrontPage Server Extensions (FPSE). Although there has been a lot of enhancement since then, many of the functions of these extensions still exist within SharePoint in a compatible way. SharePoint Designer, as a descendent of FrontPage, supports this FPSE functionality.

One of the things you may find surprising about the FPSE, is that most of its features are meant to be defined in "static" HTML pages. Specially crafted comments, called WebBots, were used to signal to the server that extra processing was to take place at either save or render time.

For this project, we're going to make use of the FPSE form handler WebBot to let the user select a file and upload it into a hidden document library on your site.

Making it Happen

The first thing you need, of course, is a place to put the files. As stated earlier, the natural target is a document library. So, let's create a library called DropBox.

Note: Most of these steps will take place in SharePoint Designer.

From the File menu, select New, SharePoint Content:

Select Document Library, and enter a name, such as DropBox. Click OK to create the library

Once the library is created, right-click it and choose Properties. Check the box "Hide from browsers", so that the library doesn't appear in the Quick Launch or All Site Content lists. Set the Use version history to Major Versions. (You want versioning enabled so you don't lose anything if users upload files that have the same name.) Since there won't be a default document type for this library, you can also uncheck the "Use a template" option. Click OK once the settings are correct.

Note: There is one library setting you may wish to make in the browser, to block the library from appearing in SharePoint Search results. Under the Document Library Settings, Advanced Settings, set the Search option to "no".

Once you have created your target library, you create HTML pages to use for your upload form and confirmation page.

From the File menu, select New ->HTML. This will create an html file in the design surface.

From the Toolbox task pane, drag an Input (File) control onto your page.

This will automatically create a Form element to surround it.

Drag an Input (Submit) button into the new form as well.

I'm using the SharePoint Designer split-view of my page to show both the code and visual layout. Now we need to make a slight change to the automatically created Form element. To do this, we'll click in the code area to place the cursor after the post statement. When you hit space, you will be presented with Intellisense options for parameters you can add to the form tag. In this case, we want to add an "enctype" parameter, and set it to "multipart/form-data", as shown below.

Without this change, the form will not be able to handle the binary file information we want to transfer. I'm also going to rename the Submit button to say "Upload" by double-clicking it and changing the Value/label field, and also place it on a new line.

This results in a form that looks like the image below in the editor:

Now that my form has all of the information I want, I'm going to tell it where to place the files. Right-click the form, and select Form Properties. In the Form Properties dialog, select "Send to (Requires FrontPage Server Extensions)". Enter "_private/dropbox.xml" into the File name field. This is not where the files go. Rather, it will be a log of all of the forms that have been submitted. If you add other fields to your form, their values would also be stored in this file.

Now, we click the "Options" button, and click the File Upload tab. Click the Browse button and select our DropBox library. Click OK to implement the changes. (Don't worry about the other fields or tabs for right now.)

The first time you save your form, you may also get an alert telling you that files not saved in _private may be visible to others.

Save the page in the root of your site as "dropbox.htm" (you can move it later).

At this point, you can test the basic functionality of your form. Preview the page in your browser, and try uploading a file. You should see a confirmation page similar to the following:

And if you open the DropBox library in SharePoint Designer, you will see the file there as well (you may need to press the F5 key to referesh the view)

The only problem is that confirmation form - you've just told your user where you put the file.

Creating a Confirmation Page

You can also create a custom confirmation page for your form. Again, this starts as a simple, HTML page, so select File -> New -> HTML.

From the Insert menu, select "Web Component". This will summon a dialog box, in which you will select Advancved Controls as the component type, and Confirmation Field for the actual control:

Click Finish. You will be asked for the name of the control to use. Type Submit1 and click OK. (Submit1 is the name of the upload button in our form.)

Enter the following text after the form field:

complete!

Thank you for your submission. Click here to return to the form.

Highilight "Click here", and press <ctrl>+k. In the insert hyperlink dialog, select the dropbox.htm file. You should end up with something that looks approximately like:

Save the file as "DropConfirm.htm".

Meanwhile, back on the dropbox.htm page, right-click on the form and select Form Properties. Click the Options button, and select the Confirmation Page tab. Click Browse, and select the DropConfirm.htm page you created above.

Click OK to save the change, and also on the Properties dialog. Save the dropbox.htm page, and preview it in the browser. Upload a file, and ensure that your new confirmation page is displayed:

Using Your Dropbox

Once your form and confirmation page are working to your liking, you need to make them available to your users. The best way to do this is to use a "Page Viewer" web part. This web part allows you to display virtually any page within the context of a SharePoint web part page. We're going to use the standard SharePoint web interface to add this part.

To add the web part, Navigate to the page where you want the form to appear, and select Edit Page from the Site Actions menu. Click the Add a Web Part link in the zone you want. From the dialog, select Page Viewer Web Part. (It will usually be in the Miscellaneous section). And click the Add button.

This will add the part to the top of the zone you selected. Click the "open the tool pane" link.

That will open the Page Viewer Web Part's task pane:

Enter the URL path to your dropbox form in the Link field. I suggest using a "root relative" address (i.e. preceding backslash, but without the " http://server ").

In this case, I also changed the web part title, and set fixed height and width settings for the web part in order to prevent scrollbars (these numbers may vary on your site). Click OK to save your changes, and click the Exit Edit Mode link to see your final page. (You may need to check-in the page on MOSS Publishing sites.)

Summary

There you have it! A simple way to give give your users an "upload only" dropbox. You can easily change the destination location for the files, without needing to make any changes to the underlying SharePoint document libraries or their associated forms.

While this example only provided a simple form, you can enhance it with more text, or additional fields for the log file. You can, of course, format the text any way you like, or even make it a stand-alone page, copying all of the chrome from your site (not a trivial task, but possible.)

Until next time, Happy Dropping!