DataGrid for DevExtreme - How to use FileUploader in the Edit Form

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

Files to Review

• jQuery
  • index.html
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • HomeContent.vue
• React
  • App.tsx
  • FileUploaderEditor.tsx
  • FileUploaderWithPreview.tsx
• 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

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)