Custom Field Type in SharePoint: Upload File, Image, Video

Custom Field Type: Upload File, Image, Video

In this post I'll explain how you can create a custom field type, which enables end user to upload files, images and videos to document library and attach these files to pages in one step in edit properties of the page.
I build this custom field type according to these requirements, which were:

- The end user wants to attach a file to page in edit properties form.
- The user doesn't want to go first to document library or image library and upload the file and then go back to edit form page and choose the file, he want to use Upload File Control to choose the file from his device in the edit properties form of the page directly.
- The Admin wants to set the maximum size of files that user will upload.
- The Admin wants to set the allowed extensions for uploaded files.
- The Admin specify where these files will be stored inside the site.

Therefore I build a custom field type with these features:
When you define a site column from Upload File Type, you
- Set the URL of the site that contains the document library that you want to store files in.
- Choose the document library that you want to store files in.
- Set the allowed extensions.
- Set the maximum file size.

The value of this field will be string, which represent the URL of the file. To build this custom field we should create the following:

1. The Editor Control, which appear when you define the site column of this custom field type. In this editor we should save the URL of the site, the document library, allowed extensions and maximum file size as the following:

This user control (Editor) should implements IFieldEditor and should inherit UserControl. So we should implement the InitializeWithField function and OnSaveChange as following:

public void InitializeWithField(SPField field)
{
try
{
fldUploadImageField = (UploadImageField)field;

if (Page.IsPostBack) return;

labelDescription.Text = ResourceManager.GetResource("labelDescription");
labelDocLib.Text = ResourceManager.GetResource("ImagelabelDocLib");
labelWebUrl.Text = ResourceManager.GetResource("labelWebUrl");
labelExtensions.Text = ResourceManager.GetResource("labelExtensions");
labelMaxFileSize.Text = ResourceManager.GetResource("labelMaxFileSize");
txtMaxFileSize.Text = ResourceManager.GetResource("txtMaxFileSize"); // as default value to max size
btnLoadDocLibs.Text = ResourceManager.GetResource("btnLoadDocLibs");

if (field != null)
{
txtExtensions.Text = fldUploadImageField.AllowedExtensions;

txtWebUrl.Text = fldUploadImageField.FieldToInsertLink;

fillDocLibraries(ddlDocLib, txtWebUrl.Text.Trim());

txtMaxFileSize.Text = fldUploadImageField.MaxFileSize;

// set values from field properties
ddlDocLib.SelectedValue = fldUploadImageField.DocumentLibraryName;

}



}
catch (Exception ex)
{
labelError.Text += string.Format("Error in InitializeWithField: {0}
", ex);
}
}

2. Creating Field Class which inherits SPFieldText : this class represents the particular field and should contains a properties which represent URL, document library, files allowed extensions and maximum file size as following:

public string DocumentLibraryName
{
get { return GetCustomProperty("DocumentLibraryName") + ""; }
set { SetCustomProperty("DocumentLibraryName", value); }
}

public string FieldToInsertLink
{
get { return GetCustomProperty("FieldToInsertLink") + ""; }
set { SetCustomProperty("FieldToInsertLink", value); }
}

public string AllowedExtensions
{
get { return GetCustomProperty("AllowedExtensions") + ""; }
set { SetCustomProperty("AllowedExtensions", value); }
}

public string MaxFileSize
{
get { return GetCustomProperty("MaxFileSize") + ""; }
set { SetCustomProperty("MaxFileSize", value); }
}

3. A field Control which should inherits from BaseFileFieldControl:
In this class we should implement the following properties and functions:
o Value Property: which is used to set and get the value of the field.
o CreateChildControls: this function is used when the control is drawn in edit mode of the page or in edit properties form.
This function will draw the control as following:

o RenderFieldForDisplay: which is used when the page is in display mode, in this function if the file type is image, then we should render it as image tag and it'll appear in the page as following:

And if the file is video, we should render it as object tag and it'll appear as following:

And if the file is document, we should render it as link tag as following:

o Validate: which is used to validate the value of the fields like maximum file size or validate on file extension.

4.Xml file which contains the information that the WSS needs to correctly render the field as following :