diff --git a/concepts/05 UI Components/FileUploader/00 Overview.md b/concepts/05 UI Components/FileUploader/00 Overview.md deleted file mode 100644 index 9f86619d80..0000000000 --- a/concepts/05 UI Components/FileUploader/00 Overview.md +++ /dev/null @@ -1,272 +0,0 @@ -The FileUploader UI component enables an end user to upload files to the server. An end user can select files in the file explorer or drag and drop files on the page's FileUploader area. - -#include btn-open-demo with { - href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileSelection/" -} - -The following code adds the FileUploader to your page. Use the [accept](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/accept.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#accept') property to restrict the file types that can be uploaded to the server. This property is like the underlying `` element's *"accept"* attribute and accepts the same values described here. - ---- -##### jQuery - - -
- - - $(function() { - $("#fileUploaderContainer").dxFileUploader({ - // ... - accept: "image/*" - }); - }); - -##### Angular - - - - - - - import { DxFileUploaderModule } from "devextreme-angular"; - // ... - export class AppComponent { - // ... - } - @NgModule({ - imports: [ - // ... - DxFileUploaderModule - ], - // ... - }) - -##### Vue - - - - - -##### React - - - import React from 'react'; - - import 'devextreme/dist/css/dx.light.css'; - - import FileUploader from 'devextreme-react/file-uploader'; - - function App() { - return ( - - - ); - } - export default App; - ---- - -A user can upload only one file at a time. Set the [multiple](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/multiple.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#multiple') property to **true** to allow users to upload several files at once. - ---- -##### jQuery - - - $(function() { - $("#fileUploaderContainer").dxFileUploader({ - multiple: true - }); - }); - -##### Angular - - - - - - - import { DxFileUploaderModule } from "devextreme-angular"; - // ... - export class AppComponent { - // ... - } - @NgModule({ - imports: [ - // ... - DxFileUploaderModule - ], - // ... - }) - -##### Vue - - - - - -##### React - - - import React from 'react'; - - import 'devextreme/dist/css/dx.light.css'; - - import FileUploader from 'devextreme-react/file-uploader'; - - function App() { - return ( - - - ); - } - export default App; - ---- - ---- -##### jQuery - -If you need to access the selected files at runtime, get the value of the [value](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/value.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#value') property. The following command returns an array, whose members are each an instance implementing the File interface. - - - const files = $("#fileUploaderContainer").dxFileUploader("option", "value"); - -##### Angular - -Bind the [value](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/value.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#value') property of the FileUploader UI component to a component property. After that, you can access the file array within any method. - - - import { DxFileUploaderModule } from "devextreme-angular"; - // ... - export class AppComponent { - // ... - value: any[] = []; - getSelectedFiles () { - return this.value; - } - } - @NgModule({ - imports: [ - // ... - DxFileUploaderModule - ], - // ... - }) - - - - - -##### Vue - -Bind the [value](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/value.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#value') property of the FileUploader UI component to a component property. After that, you can access the file array within any method. - - - - - - -##### React - -Bind the [value](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/value.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#value') property of the FileUploader UI component to a component property. After that, you can access the file array within any method. - - - import React, {useState} from 'react'; - import FileUploader from 'devextreme-react/file-uploader'; - - function App() { - const [value, setValue] = useState([]); - const changeValue = (e) => { - setValue(e.value); - } - const getSelectedFiles = () => { - return value; - } - return ( - - ); - } - - export default App; - ---- - -The FileUploader can operate in two different modes, each demanding a different client- and server-side configuration. See the [Client-Side Settings](/concepts/05%20UI%20Components/FileUploader/20%20Upload%20Files/05%20Client-Side%20Settings '/Documentation/Guide/UI_Components/FileUploader/Upload_Files/Client-Side_Settings/') article for more details. - -#####See Also##### -#include common-link-configurewidget -- **Upload Files - Server Side**: [ASP.NET](/concepts/05%20UI%20Components/FileUploader/20%20Upload%20Files/10%20Server-Side%20Implementation%20in%20ASP.NET '/Documentation/Guide/UI_Components/FileUploader/Upload_Files/Server-Side_Implementation_in_ASP.NET/') | [PHP](/concepts/05%20UI%20Components/FileUploader/20%20Upload%20Files/20%20Server-Side%20Implementation%20in%20PHP '/Documentation/Guide/UI_Components/FileUploader/Upload_Files/Server-Side_Implementation_in_PHP/') -- [File Validation](/concepts/05%20UI%20Components/FileUploader/40%20File%20Validation.md '/Documentation/Guide/UI_Components/FileUploader/File_Validation/') -- [FileUploader API Reference](/api-reference/10%20UI%20Components/dxFileUploader '/Documentation/ApiReference/UI_Components/dxFileUploader/') - -[tags]dxfileuploader, file uploader, fileUploader, overview, accepted file types, multiple files, access files in code diff --git a/concepts/05 UI Components/FileUploader/00 Overview/00 Overview.md b/concepts/05 UI Components/FileUploader/00 Overview/00 Overview.md new file mode 100644 index 0000000000..b96b2a98c8 --- /dev/null +++ b/concepts/05 UI Components/FileUploader/00 Overview/00 Overview.md @@ -0,0 +1,3 @@ +FileUploader is a UI component that allows users upload files to the server. Users can either select files in the file explorer or drag and drop them onto the FileUploader area on the page. + +In this overview, you can find a map of FileUploader elements, information about key features, and what to explore next. \ No newline at end of file diff --git a/concepts/05 UI Components/FileUploader/00 Overview/05 Elements.md b/concepts/05 UI Components/FileUploader/00 Overview/05 Elements.md new file mode 100644 index 0000000000..02f76ab3d7 --- /dev/null +++ b/concepts/05 UI Components/FileUploader/00 Overview/05 Elements.md @@ -0,0 +1,8 @@ +FileUploader elements + +1. [An element that opens the upload dialog](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#dialogTrigger) +2. [Drop zone](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#dropZone) +3. [Allowed file extensions](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#allowedFileExtensions) +4. [Maximum file size](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#maxFileSize) + +*Points 3 and 4 are simply a visual representation of the linked properties.* \ No newline at end of file diff --git a/concepts/05 UI Components/FileUploader/00 Overview/10 Key Features.md b/concepts/05 UI Components/FileUploader/00 Overview/10 Key Features.md new file mode 100644 index 0000000000..326abbb81d --- /dev/null +++ b/concepts/05 UI Components/FileUploader/00 Overview/10 Key Features.md @@ -0,0 +1,8 @@ +- **Uploading Options** +[Upload](/Documentation/Guide/UI_Components/FileUploader/Upload_Files/Client-Side_Settings/) files instantly or confirm upload with built-in buttons. Upload files [in chunks](/Documentation/Guide/UI_Components/FileUploader/Upload_Files/Client-Side_Settings/#Chunk_Upload) (requires [server-side setup](https://demos.devexpress.com/ASPNetMvc/Demo/FileUploader/ChunkUploading)) or when an [HTML form is submitted](/Documentation/Guide/UI_Components/FileUploader/Upload_Files/Client-Side_Settings/#Upload_Mode). + +- **File Restrictions** +[Restrict](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#accept) types of files and specify[allowed file extensions](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#allowedFileExtensions). Set [maximum](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#maxFileSize)/[minimum](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#minFileSize) file size. Allow users to select either one file or [multiple](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#multiple) files at a time. + +- **Validation** +All DevExtreme component [validation](/Documentation/Guide/UI_Components/FileUploader/File_Validation/) options are available for FileUploader. Configure [validation errors](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#validationErrors) and check if FileUploader [is dirty](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#isDirty). Files are validated on the client, but [server-side validation](https://demos.devexpress.com/ASPNetMvc/Demo/FileUploader/Validation/) is also necessary. \ No newline at end of file diff --git a/concepts/05 UI Components/FileUploader/00 Overview/15 Explore More.md b/concepts/05 UI Components/FileUploader/00 Overview/15 Explore More.md new file mode 100644 index 0000000000..43c3bad33e --- /dev/null +++ b/concepts/05 UI Components/FileUploader/00 Overview/15 Explore More.md @@ -0,0 +1,3 @@ +- [API](/api-reference/10%20UI%20Components/dxFileUploader '/Documentation/ApiReference/UI_Components/dxFileUploader/') + +- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileSelection/) \ No newline at end of file diff --git a/concepts/05 UI Components/FileUploader/20 Upload Files/05 Client-Side Settings/05 Upload Mode.md b/concepts/05 UI Components/FileUploader/20 Upload Files/05 Client-Side Settings/05 Upload Mode.md index 9e3a41f24a..2595e3c935 100644 --- a/concepts/05 UI Components/FileUploader/20 Upload Files/05 Client-Side Settings/05 Upload Mode.md +++ b/concepts/05 UI Components/FileUploader/20 Upload Files/05 Client-Side Settings/05 Upload Mode.md @@ -93,7 +93,6 @@ The following examples show how to configure the FileUploader for each upload mo components: { DxFileUploader }, - data() { return { //... @@ -237,7 +236,6 @@ The following examples show how to configure the FileUploader for each upload mo components: { DxFileUploader }, - data() { return { //... diff --git a/images/FileUploader/file-uploader-elements.png b/images/FileUploader/file-uploader-elements.png new file mode 100644 index 0000000000..425ddb7617 Binary files /dev/null and b/images/FileUploader/file-uploader-elements.png differ