This example illustrates a simple scenario on how to use the dxFileUploader component in the dxDataGrid's edit form. The example consists of two parts. The first part is a backend service written in ASP.NET Core (BackendApp). It accepts POST requests of the FileUploader component, saves uploaded images, and hosts static files. The second part is a client-side application (jQuery/Angular/React/Vue/ASP.NET Core). It displays a page with the DataGrid component.
DataGrid has the Picture
field which holds an associated image file name. We use cellTemplate to display images as illustrated in the following demo: Column Template.
To implement the file upload UI/logic, we use editCellTemplate for the Picture
field.
The server part for the file uploading is implemented as a separate backend solution located in the BackendApp directory.
Note: Open the BackendApp
project in Visual Studio first. When project dependencies are restored, launch it. Then, open/run the client-side part to test the example.