nSPListUpload

nSPListUpload is an easy to use pure HTML WebPart for OOB SharePoint lists that lets you create fields that let users provide URLs or attach/upload files.

Table of Contents

  1. Overview / Features
  2. Screenshots
  3. Compatibility
  4. How To Use
    1. Configure The List
    2. Add nSPListUpload To The List
    3. List Configuration Options

Overview / Features

I needed a list where users would provide the URL to a file or image. I wanted the user to be able to provide either a URL to a file that already exists online or upload a file and then the field would use it's path as the URL.

OOB SharePoint lets you attach a file to an item but there was no way to require it. So the user was left with either manually uploading the file somewhere or attaching it to the list and then using its URL for the field.

This was not as elegant as I liked so nSPListUpload was born.

With nSPListUpload the NewForm.aspx and EditForm.aspx forms for a list will show a file browse input for the field along with a textarea. If the user selects a file it will attach the file to the list and use the attached file's URL as the field value.

Screenshots

Screenshot Description
This is before you use nSPListUpload. The "Read More File", "Background Image File", "Posting URL or File", and "Headshot URL or Image File" are the fields I want to change.
This is after you use nSPListUpload. All the fields with "file" will have a file browse input added. Fields that have URL will also let the user provide a URL directly.
This is as you're filling a NewForm.aspx or EditForm.aspx. Images will render in the form.
For NewForm.aspx the page will redirect to do some post-processing after the item is saved.
This is the DispForm.aspx.
This is the EditForm.aspx. Fields that had attached files will let you delete them.

Compatibility

I only have a trial version of SharePoint 2010 Foundation on a VM with IE 11 and Chrome 43 so that is all I've been able to test on. If anyone tests on other SP versions and/or browsers and is willing to test for me that would be appreciated.

How To Use

To use nSPListUpload you need to add fields to a list with specific strings in the field name and then add a WebPart to the NewForm.aspx, EditForm.aspx, and optionally DispForm.aspx.

Configure The List

  1. add a field to your list with "file" (case insensitive) in the field name
  2. check the table below for other configuration options

Add nSPListUpload To The List

  1. download and upload the nSPListUpload.1.0.html or nSPListUpload.1.0.min.html file to your SharePoint site
  2. add a CEWP Web Part to the bottom of NewForm.aspx, EditForm.aspx, and optionally DispForm.aspx and reference

List Configuration Options

Include In Field Name Action/Result
image image fields will render the image in the form
url lets the user direct enter a URL along with uploading a file

** Note: options are case insensitive*