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

• 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

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.

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

• Getting Started with DataGrid
• Getting Started with File Uploader