Get Started!

File Uploading & Selection

Using the built-in File manager and the File Region in EDIT mode.

General

When a page is in EDIT mode there are tools for uploading files and selecting them, which are very similar to the way the Image and Video uploading & Selection works.

The editor allows for a file to be uploaded and associated with a specific piece of data, such as a WebPage or Product. And the user can insert links to the uploaded files in their content, just as you would with an image.

In other situations you'll want to offer an editable area that allows the user to upload and select files for downloading, such as a brochure, and render the linkable files behind a CTA or just as a listing to keep consistency. In these situations the File Region helps.

File Regions

These regions, similar to enabling the simple or full regions used by PlainText & RichText, respectively, require a hand-full of data- attributes be added to an element which represents the active area in EDIT mode :

  • data-mercury="file" - Set the Mercury region flag

  • data-item-id - The Id of the associated DataItem

  • data-item-type - The DataItem's Full Name

  • data-field - The Client Id of the Form field to carry the value

  • data-src - The currently selected File's absolute URL

  • data-feedback - Optional jQuery selector to an element which displays the name of the selected file

You'll also need to add an id to the element.

The example shown in the image is rendered from the following Markup :

Example File Region p-r

<p>
  <i class="fa fa-li fa-file"></i>
  <a href="<%=FileName%>"
     target="_blank"
     id="download_file"
     data-mercury="file"
     data-item-id="<%=oDataItem.nId%>"
     data-item-type="MyApp.MyTypes.MyType"
     data-field="<%=hFile.ClientID%>"
     data-src="<%=FileName%>"
     data-feedback="#download_feedback">
    <code>Double Click to Change</code>
  </a>  
  <small id="download_feedback"
         class="text-muted file-name-feedback">
    <%=oFileItem.cFileName%>
  </small>
</p>

<asp:hiddenfield runat="server"
                 id="hFile"
                 clientidmode="autoid">
</asp:hiddenfield>

The image includes a simple paragraph, below the file name feedback, which for brevity isn't included in the sample html.

The code-behind for the file region would need to populate the hiddenfield with the Path to the existing file :

protected override void initialize_EDIT()
{
  base.initialize_EDIT();

  hFile.Value = oFileItem.FilePath;
}

Saving the value. Within initialize_SAVE you need to fix the control and save the new value :

protected override void initialize_SAVE()
{
  base.initialize_SAVE();

  FixHiddenControl(hFile);

  if( hFile.Value == "" ) { return; }

  var url = hFile.Value;
  var fileName = url;

  // Clean off hostname
  var idx = fileName.LastIndexOf("/");
  if( idx > 0 && idx < fileName.Length ) { 
    fileName = fileName.Substring(idx+1);        
  }

  url = url.Replace("//", "/"); 

  // Save 

  oFileItem.FilePath = url;
}