Skip to content

Commit

Permalink
Review Upload JSP tag docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Desislava Mihaylova committed Feb 16, 2016
1 parent 51c1f6a commit 248ee60
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 84 deletions.
2 changes: 1 addition & 1 deletion docs/controls/data-management/grid/appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ position: 5

# Appearance

[Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) supports various options for you to apply to your project by setting its layout and appearance that best match your needs.
The [Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) supports various options for you to apply to your project by setting its layout and appearance that best match your needs.

## Scrolling

Expand Down
2 changes: 1 addition & 1 deletion docs/controls/data-management/grid/data-binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ position: 3

# Remote Data Binding

[Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) features a rapid templating engine and a built-in dataSource, which allow you to set up the widget very quickly and use it in your project.
The [Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) features a rapid templating engine and a built-in dataSource, which allow you to set up the widget very quickly and use it in your project.

## Bind to Remote Data

Expand Down
2 changes: 1 addition & 1 deletion docs/controls/data-management/grid/excel-export.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ position: 8

# Excel Export

Since Kendo UI Q3 2014 (2014.3.1119) the Grid widget provides a built-in Excel export functionality.
As of the Kendo UI Q3 2014 (2014.3.1119) release, the Grid widget provides a built-in Excel export functionality.

## Set Up

Expand Down
2 changes: 1 addition & 1 deletion docs/controls/data-management/grid/pdf-export.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ position: 9

# PDF Export

Since [Kendo UI Q3 2014 (2014.3.1119)](http://www.telerik.com/support/whats-new/kendo-ui/release-history/q3-2014) the Grid widget provides a built-in PDF export functionality.
As of the [Kendo UI Q3 2014 (2014.3.1119) release](http://www.telerik.com/support/whats-new/kendo-ui/release-history/q3-2014) the Grid widget provides a built-in PDF export functionality.

## Set Up

Expand Down
4 changes: 2 additions & 2 deletions docs/controls/data-management/grid/print-export.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Print the existing web page, but use a print stylesheet to hide the parts of the
The example below demonstrates how to retrieve the Grid HTML, inject it in a new browser window, and trigger the printing of the new page. It also addresses some other important things you must keep in mind as follows:

* If the Grid is scrollable, some rows or columns may not be visible on the printed paper. Make sure that during printing the Grid has no set height, and the scrollability of the data area is disabled.
* Depending on the column width, some of the cell content may not be fully visible. This problem is resolved by forcing an automatic `table-layout` to the Grid table, which disables the ellipsis (...).
* Depending on the column width, some of the cell content may not be fully visible. This problem is resolved by forcing an automatic `table-layout` to the Grid table, which disables the ellipsis (`...`).
* Browsers repeat table headers on each printed page automatically. However, when the Grid is scrollable, it renders a separate table for the header area. Since the browser cannot understand the relationship between the two Grid tables, it will not repeat the header row. This problem is resolved by cloning the header row inside the data table.

Printing a Grid with locked (frozen) columns is likely to produce misaligned columns, or rows, or a broken overall layout. In such cases it is advisable to use a separate print-friendly page with no frozen columns.
Expand All @@ -38,7 +38,7 @@ Printing a Grid with locked (frozen) columns is likely to produce misaligned col
</script>

//JavaScript

function printGrid() {
var gridElement = $('#grid'),
printableContent = '',
Expand Down
2 changes: 1 addition & 1 deletion docs/controls/data-management/grid/walkthrough.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ position: 1

# Walkthrough

[Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) is a powerful piece of the Kendo UI framework and an essential part of almost any user interface. The Grid control is quick to set up and is packed with features like sorting, grouping, paging, and editing.
The [Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) is a powerful piece of the Kendo UI framework and an essential part of almost any user interface. The Grid control is quick to set up and is packed with features like sorting, grouping, paging, and editing.

## Initialize the Grid

Expand Down
62 changes: 46 additions & 16 deletions docs/jsp/tags/upload/metadata.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,50 @@
---
title: Metadata
title: Handling of Metadata
page_title: Handling of Metadata | Upload JSP Tag
description: "Use the synchronous and asynchronous operational modes of the Upload JSP tag in Kendo UI."
slug: metadata_upload_uiforjsp
position: 3
---

Asynchronous uploading usually means that you lose the association betwen the files and the context that they originate from.
# Handling of Metadata

Take an e-mail application for example. The save handler must associate the uploaded files to a particular message.
Asynchronous uploading usually means that you lose the association between the files and the context that they originate from. Take an e-mail application, for example. The save handler must associate the uploaded files to a particular message. The message and the file might even be processed on different servers in a load balancing or a cloud-based scenario.

The message and the file even might be processed on different servers in a load balancing or a cloud-based scenario.
## Send and Receive Metadata

## Sending metadata to the save action
### Send Metadata to the Save Action

You can add metadata directly on the client. This is useful when the data is not known in advance.

1. Add an input field for description. We will send its value to the save handler.
Below are listed the steps for you to follow when configuring the sending of metadata to the `save` action in the Kendo UI Upload.

**Step 1** Add an `input` field for description. Send its value to the `save` handler.

###### Example

<input type="text" id="fileDescription" />

2. Declare a handler for the upload event and attach a data object to the passed event.
**Step 2** Declare a handler for the `upload` event and attach a data object to the passed event.

###### Example

function onUpload(e) {
e.data = {
fileDescription: $("#fileDescription").val()
};
}

3. Attach the event handler.
**Step 3** Attach the event handler.

###### Example

<kendo:upload name="files" upload="onUpload">
<kendo:upload-async autoUpload="true" saveUrl="${saveUrl}" removeUrl="${removeUrl}"/>
</kendo:upload>

4. Process the file and the associated description
**Step 4** Process the file and the associated description.

###### Example

@RequestMapping(value = "/events/save", method = RequestMethod.POST)
public @ResponseBody String save(@RequestParam List<MultipartFile> files,
Expand All @@ -43,13 +57,15 @@ You can add metadata directly on the client. This is useful when the data is not
return "";
}

## Receiving metadata from the save handler
### Receive Metadata from the Save Handler

The `save` handler can sometimes produce a result that needs to be routed back to the page. The Upload requires the response to be in JSON format with the Content-Type set to `"text/plain"`. Any non-empty response that is not JSON is treated as a server error.

The save handler can sometimes produce a result that needs to be routed back to the page.
Below are listed the steps for you to follow when configuring the receiving of metadata from the `save` action in the Kendo UI Upload.

The Upload requires the response to be in JSON format with Content-Type set to "text/plain". Any non-empty response that is not JSON will be treated as a server error.
**Step 1** Build the response.

1. Build the response
###### Example

// When returning JSON the mime-type must be set to text/plain
@RequestMapping(value = "/async/save", method = RequestMethod.POST, produces = "text/plain")
Expand All @@ -60,16 +76,30 @@ The Upload requires the response to be in JSON format with Content-Type set to "
return "{ \"status\": \"OK\" }";
}

2. Declare a handler for the [success event](/api/web/upload#success) and process the response
**Step 2** Declare a handler for the [`success` event](/api/javascript/ui/upload#success) and process the response.

###### Example

function onSuccess(e) {
alert("Status: " + e.response.status);
}

3. Attach the event handler
**Step 3** Attach the event handler.

###### Example

<kendo:upload name="files" success="onSuccess">
<kendo:upload-async autoUpload="true" saveUrl="${saveUrl}" removeUrl="${removeUrl}"/>
</kendo:upload>

The same approach is applicable for the remove handler as well.
The same approach is applicable for the `remove` handler as well.

## See Also

Other articles on Telerik UI for JSP and on the Upload:

* [Overview of the Upload JSP Tag]({% slug overview_upload_uiforjsp %})
* [Modes of Operation of the Upload JSP Tag]({% slug modesofoperation_upload_uiforjsp %})
* [Overview of the Kendo UI Upload Widget]({% slug overview_kendoui_upload_widget %})
* [Telerik UI for JSP API Reference Folder](/api/jsp/autocomplete/animation)
* [Telerik UI for JSP Tags Folder]({% slug overview_autocomplete_uiforjsp %})
93 changes: 67 additions & 26 deletions docs/jsp/tags/upload/modes.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,58 @@
---
title: Modes
title: Modes of Operation
page_title: Modes of Operation | Upload JSP Tag
description: "Use the synchronous and asynchronous operational modes of the Upload JSP tag in Kendo UI."
slug: modesofoperation_upload_uiforjsp
position: 2
---
# Upload Modes

The Upload supports two modes of operation - synchronous and asynchronous.
# Modes of Operation

This help topic explains how to use these modes with the Spring MVC framework.
Please review the main [Upload Modes](/web/upload/modes) help topic for general information.
The Kendo UI Upload supports two modes of operation&mdash;synchronous and asynchronous. This article explains how to use these modes with the Spring MVC framework.

## Synchronous mode
For general information, refer to the article on the [widget's modes of operation]({% slug modes_upload_widget %}).

In this mode the upload is executed as part of the form submit (synchronously). No dedicated action methods are required.
## Synchronous Mode

1. Add a form declaration and set a controller action.
In the synchronous mode, the upload is executed synchronously, as part of the form submit. No dedicated action methods are required.

### Configuration

Below are listed the steps for you to follow when configuring the synchronous mode of operation for the Kendo UI Upload.

**Step 1** Add a `form` declaration and set a `controller` action.

###### Example

<form method="post" action="<c:url value='/web/upload/' />">
</form>

2. Add the Upload inside the form. The only required setting is a Name.
**Step 2** Add the Upload inside the form. The only required setting is `name`.

###### Example

<kendo:upload name="files" />

3. Add a submit and reset buttons to the form.
**Step 3** Add a submit and reset buttons to the form.

###### Example

<input type="submit" value="Send" class="t-button" />
<input type="reset" value="Reset" class="t-button" />

4. The form should look like this:
**Step 4** The form should look like the one demonstrated in the example below.

###### Example

<form method="post" action="<c:url value='/web/upload/' />">
<kendo:upload name="files" />
<input type="submit" value="Send" class="t-button" />
<input type="reset" value="Reset" class="t-button" />
</form>

5. Process the files in the action. It requires no special server handling compared to a regular input.
**Step 5** Process the files in the action. It requires no special server handling compared to a regular input.

###### Example

@RequestMapping(value = {"/", "/index"}, method = RequestMethod.POST)
public String save(@RequestParam List<MultipartFile> files, Model model) {
Expand All @@ -43,22 +61,27 @@ In this mode the upload is executed as part of the form submit (synchronously).
return "web/upload/results";
}

## Asynchronous mode
## Asynchronous Mode

In this mode the files are uploaded to a controller action without interrupting the user interaction with the page.

### Save handler
### Save Handler

Below are listed the steps for you to follow when configuring the saving of the handler in the asynchronous mode of operation of the Kendo UI Upload.

1. Add the upload to the view:
**Step 1** Add the Upload to the view.

###### Example

<kendo:upload name="files">
<kendo:upload-async saveUrl="${saveUrl}"/>
</kendo:upload>

The name attribute is required and must be unique.
It will be used as a form field name in the requests to the server.
The `name` attribute is required and must be unique. It is used as a `form` field name in the requests to the server.

**Step 2** Implement the **Save** controller action.

2. Implement the Save controller action:
###### Example

@RequestMapping(value = "/async/save", method = RequestMethod.POST)
public @ResponseBody String save(@RequestParam List<MultipartFile> files) {
Expand All @@ -70,17 +93,23 @@ In this mode the files are uploaded to a controller action without interrupting
return "";
}

### Remove handler
### Remove Handler

Users can remove files after they are uploaded asynchronously. To enable this feature, a `Remove` action is needed.

Below are listed the steps for you to follow when configuring the removing of the handler in the asynchronous mode of operation of the Kendo UI Upload.

Users can remove files even after they've been uploaded asynchronously. To enable this feature you need a Remove action.
**Step 1** Specify a `Remove` action.

1. Specify a Remove action
###### Example

<kendo:upload name="files">
<kendo:upload-async saveUrl="${saveUrl}" removeUrl="${removeUrl}"/>
</kendo:upload>

2. Implement the Remove action. It takes a fileNames parameter of type string[]
**Step 2** Implement the `Remove` action. It takes a `fileNames` parameter of type `string[]`.

###### Example

@RequestMapping(value = "/async/remove", method = RequestMethod.POST)
public @ResponseBody String remove(@RequestParam String[] fileNames) {
Expand All @@ -91,14 +120,26 @@ Users can remove files even after they've been uploaded asynchronously. To enabl
return "";
}

> The Remove action can be used as an attack vector if implemented poorly. Always sanitize the file names and verify that the user has the appropriate permissions before actually deleting any files.
> **Important**
>
> The `Remove` action can be used as an attack vector if implemented poorly. Always sanitize the file names and verify that the user has the appropriate permissions before actually deleting any files.
### Disable Automatic Upload

### Disabling automatic upload
The selected files are uploaded immediately by default. You can change this behavior by setting `AutoUpload` to `false`.

The selected files will be uploaded immediately by default.
You can change this behavior by setting AutoUpload to false.
###### Example

<kendo:upload name="files">
<kendo:upload-async autoUpload="false" saveUrl="${saveUrl}" removeUrl="${removeUrl}"/>
</kendo:upload>

## See Also

Other articles on Telerik UI for JSP and on the Upload:

* [Overview of the Upload JSP Tag]({% slug overview_upload_uiforjsp %})
* [Sending and Receiving Metadata with the Upload JSP Tag]({% slug metadata_upload_uiforjsp %})
* [Overview of the Kendo UI Upload Widget]({% slug overview_kendoui_upload_widget %})
* [Telerik UI for JSP API Reference Folder](/api/jsp/autocomplete/animation)
* [Telerik UI for JSP Tags Folder]({% slug overview_autocomplete_uiforjsp %})
Loading

0 comments on commit 248ee60

Please sign in to comment.