Skip to content

Example 01

Jump to bottom Edit New page
blackcity edited this page Jul 2, 2013 · 5 revisions

###Zero configuration Backload. has a very rich set of configuration options. It can be entirely configured within the web.config file or alternatively a config file linked to the web.config. But, you do not have to set any option if you are happy with the defaults (For convenience we only use Backloads. bundling feature in order to link the scripts and styles of the jQuery file upload plugin to the page, see: global.asax and _layout.cshtml). Note: It is strongly recommend taking a look on how the client side jQuery File Upload plugin uses templating (see html source code). You can easily style the plugin by adding or removing styles in the template or even add new functionality to the plugin.

####Basic setup information

  1. Make sure, you have write permissions to the default upload folder "~/files".
  2. Reference the Backload. assembly (Backload.dll).
  3. Include the client side jQuery File Upload Plugin files. You can use Backloads. bundeling feature (see global.asax and _Layout.cshtml).
  4. Initialize the client side plugin with the url of the default upload handler:
// Upload directly to the built-in server side upload controller. This is the default upload controller of Backload.
var fileUploadUrl = "/Backload/UploadHandler";

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    url: fileUploadUrl
});

To use the bundeling feature of Backload add the following lines to global.asax and the view (resp. _layout.cshtml):

// global.asax:
// Use bundeling for client files (scripts (js) and styles (css)). You can include/exclude the image gallery provided by 
// the default jQuery file upload ui demo implementaion
// Comment this out, if you manually include the files in your page
// Overload: RegisterBundles(BundleTable.Bundles, inclImageGallery, pathToScripts, pathToStyles) 
// Example: Backload...RegisterBundles(BundleTable.Bundles, false, "~/Scripts/FileUpload/", "~/Content/FileUpload/css/");
Backload.Configuration.FileUploadBundles.RegisterBundles(BundleTable.Bundles, false);

// _layout.cshtml (or a view):
<head>
  ...
  @Styles.Render("~/bundles/fileupload/jqueryui/css")
  ...
</head>
<body>
  ...
  @Scripts.Render("~/bundles/fileupload/jqueryui/js")
</body>

####Description This basic example demonstrates the minimum setup required to upload files to the default upload files folder (~/files). When you add a reference to the Backload. assembly, the default upload handler (url: "/Backload/UploadHandler") will handle incoming uploads. In a later example, we will show you, how to use your own controllers or use Backloads. eventing, in order to execute your business logic with incoming uploads.

Code

Code examples: Example01

License

Backload. (Standard version): Copyright 2013, Steffen Habermehl, License (Standard version): MIT license
Professional and Enterprise (source code) version are available under a commercial license.
Follow us on Twitter: @Backload_MVC

Add a custom footer
Add a custom sidebar
Clone this wiki locally