DataGrid - How to use the DevExtreme FileUploader in the edit form

This example illustrates how to use FileUploader in the DataGrid's edit form.

Files to Look At

• jQuery
  • index.html
  • script.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • App.vue
• React
  • App.js
• ASP.Net Core
  • Index.cshtml

Implementation Details

The example consists of the backend service (BackendApp) and a client-side application (jQuery/Angular/React/Vue).

The backend service accepts POST requests from the FileUploader component, saves uploaded images, and hosts static files.

The client-side application displays a page with the DataGrid component. The Picture field in the grid contains image file names. The cellTemplate property allows you to display images in the column cells as illustrated in the Column Template demo. Use the editCellTemplate property to implement the file upload UI for the Picture field in the edit form.

How to Launch the Example

Open and run the BackendApp project in Visual Studio. Then, run the client-side application.

Documentation

• Getting Started with DataGrid
• Getting Started with File Uploader