React: Implement FileUploader in DataGrid edit form with modern TypeScript patterns

- Implement proper TypeScript typing with DataGridTypes and Employee interface
- Use modern React patterns: useCallback, memo, proper ref handling
- Add FileUploaderEditor and FileUploaderWithPreview components
- Add error handling and retry functionality
- Include proper CSS styling for uploaded images
- Remove old implementation files and use clean modern structure
- Add DevExtreme CSS import to main.tsx

Author: AlisherAmonulloev

React/src/App.css

@@ -1,4 +1,22 @@
 .main {
   margin: 50px;
   width: 90vw;
+}
+
+.uploadedImage {
+  max-width: 100px;
+  max-height: 100px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.retryButton {
+  margin-top: 10px;
+}
+
+.dx-datagrid-edit-form .uploadedImage {
+  max-width: 150px;
+  max-height: 150px;
 }

React/src/App.tsx

@@ -1,17 +1,77 @@
-import { useCallback, useState } from 'react';
+import { useState, useCallback } from 'react';
+import DataGrid, { type DataGridTypes } from 'devextreme-react/data-grid';
+import { Column, Editing, Popup, Form } from 'devextreme-react/data-grid';
+import { Item } from 'devextreme-react/form';
+import { useEvent } from './utils';
+import { cellRender, FileUploaderEditor } from './FileUploaderEditor';
+import { employees, type Employee } from './data';
 import './App.css';
-import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import Button from 'devextreme-react/button';
 
 function App(): JSX.Element {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
+  const [retryButtonVisible, setRetryButtonVisible] = useState<boolean>(false);
+
+  const onEditCanceled = useEvent((_e: DataGridTypes.EditCanceledEvent<Employee, number>): void => {
+    if (retryButtonVisible) {
+      setRetryButtonVisible(false);
+    }
+  });
+
+  const onSaved = useEvent((_e: DataGridTypes.SavedEvent<Employee, number>): void => {
+    if (retryButtonVisible) {
+      setRetryButtonVisible(false);
+    }
+  });
+
+  const editCellRender = useCallback(
+    (cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>): JSX.Element => (
+      <FileUploaderEditor 
+        cellInfo={cellInfo} 
+        retryButtonVisible={retryButtonVisible} 
+        setRetryButtonVisible={setRetryButtonVisible} 
+      />
+    ),
+    [retryButtonVisible]
+  );
+
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
-    </div>
+    <DataGrid
+      id="gridContainer"
+      dataSource={employees}
+      keyExpr="ID"
+      showBorders={true}
+      onEditCanceled={onEditCanceled}
+      onSaved={onSaved}
+    >
+      <Editing mode="popup" allowUpdating={true}>
+        <Popup title="Employee Info" showTitle={true} width={700} />
+        <Form>
+          <Item itemType="group" colCount={2} colSpan={2}>
+            <Item dataField="Prefix" />
+            <Item dataField="FirstName" />
+            <Item dataField="LastName" />
+            <Item dataField="Position" />
+            <Item dataField="BirthDate" />
+            <Item dataField="HireDate" />
+          </Item>
+          <Item itemType="group" caption="Photo" colCount={2} colSpan={2}>
+            <Item dataField="Picture" colSpan={2} />
+          </Item>
+        </Form>
+      </Editing>
+      <Column
+        dataField="Picture"
+        width={70}
+        allowSorting={false}
+        cellRender={cellRender}
+        editCellRender={editCellRender}
+      />
+      <Column dataField="Prefix" width={70} caption="Title" />
+      <Column dataField="FirstName" />
+      <Column dataField="LastName" />
+      <Column dataField="Position" />
+      <Column dataField="BirthDate" dataType="date" />
+      <Column dataField="HireDate" dataType="date" />
+    </DataGrid>
   );
 }
 

React/src/FileUploaderEditor.tsx

@@ -0,0 +1,56 @@
+import React, { useRef, useCallback, type Dispatch, type SetStateAction } from "react";
+import { type FileUploaderRef } from "devextreme-react/file-uploader";
+import Button from "devextreme-react/button";
+import { FileUploaderWithPreview } from "./FileUploaderWithPreview";
+import { backendURL } from "./constants";
+import type { DataGridTypes } from "devextreme-react/data-grid";
+import type { Employee } from "./data";
+
+interface FileUploaderEditorProps {
+  cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>;
+  setRetryButtonVisible: Dispatch<SetStateAction<boolean>>;
+  retryButtonVisible: boolean;
+}
+
+export const cellRender = (data: DataGridTypes.ColumnCellTemplateData<Employee, number>): JSX.Element => {
+  return <img src={backendURL + data.value} alt="employee pic" style={{ maxWidth: '100%', height: 'auto' }} />;
+};
+
+export const FileUploaderEditor = React.memo<FileUploaderEditorProps>(({ 
+  cellInfo, 
+  setRetryButtonVisible, 
+  retryButtonVisible 
+}) => {
+  const fileUploaderRef = useRef<FileUploaderRef>(null);
+  
+  const onClick = useCallback((): void => {
+    // The retry UI/API is not implemented. Use a private API as shown at T611719.
+    const fileUploaderInstance = fileUploaderRef.current?.instance();
+    if (fileUploaderInstance) {
+      // @ts-expect-error: Accessing private API for retry functionality
+      for (let i = 0; i < fileUploaderInstance._files.length; i++) {
+        // @ts-expect-error: Accessing private API for retry functionality
+        delete fileUploaderInstance._files[i].uploadStarted;
+      }
+      fileUploaderInstance.upload();
+    }
+  }, []);
+
+  return (
+    <>
+      <FileUploaderWithPreview 
+        setRetryButtonVisible={setRetryButtonVisible} 
+        cellInfo={cellInfo} 
+        fileUploaderRef={fileUploaderRef} 
+      />
+      <Button 
+        className="retryButton" 
+        text="Retry" 
+        visible={retryButtonVisible} 
+        onClick={onClick} 
+      />
+    </>
+  );
+});
+
+FileUploaderEditor.displayName = 'FileUploaderEditor';

React/src/FileUploaderWithPreview.tsx

@@ -0,0 +1,76 @@
+import { useRef, type Dispatch, type SetStateAction, type RefObject, memo } from "react";
+import FileUploader, { type FileUploaderRef } from "devextreme-react/file-uploader";
+import { useEvent } from "./utils";
+import { backendURL } from "./constants";
+import type { FileUploaderTypes } from "devextreme-react/file-uploader";
+import type { DataGridTypes } from "devextreme-react/data-grid";
+import type { Employee } from "./data";
+
+interface FileUploaderPreviewProps {
+  cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>;
+  setRetryButtonVisible: Dispatch<SetStateAction<boolean>>;
+  fileUploaderRef: RefObject<FileUploaderRef>;
+}
+
+export const FileUploaderWithPreview = memo<FileUploaderPreviewProps>(({ 
+  setRetryButtonVisible, 
+  cellInfo, 
+  fileUploaderRef 
+}) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+  
+  const onValueChanged = useEvent((e: FileUploaderTypes.ValueChangedEvent): void => {
+    const files = e.value;
+    if (files && files.length > 0) {
+      const reader = new FileReader();
+      reader.onload = function (args) {
+        if (typeof args.target?.result === 'string' && imgRef.current) {
+          imgRef.current.setAttribute('src', args.target.result);
+        }
+      };
+      reader.readAsDataURL(files[0]); // convert to base64 string 
+    }
+  });
+
+  const onUploaded = useEvent((e: FileUploaderTypes.UploadedEvent): void => {
+    if (e.request?.responseText) {
+      cellInfo.setValue("images/employees/" + e.request.responseText);
+      setRetryButtonVisible(false);
+    }
+  });
+
+  const onUploadError = useEvent((e: FileUploaderTypes.UploadErrorEvent): void => {
+    const xhttp = e.request;
+    if (xhttp && xhttp.status === 400) {
+      e.message = e.error?.responseText || "Upload error";
+    }
+    if (xhttp && xhttp.readyState === 4 && xhttp.status === 0) {
+      e.message = "Connection refused";
+    }
+    setRetryButtonVisible(true);
+  });
+
+  return (
+    <>
+      <img 
+        ref={imgRef} 
+        className="uploadedImage" 
+        src={`${backendURL}${cellInfo.value}`} 
+        alt="employee pic" 
+        style={{ maxWidth: '100%', height: 'auto', marginBottom: '10px' }}
+      />
+      <FileUploader 
+        ref={fileUploaderRef} 
+        multiple={false} 
+        accept="image/*" 
+        uploadMode="instantly"
+        uploadUrl={backendURL + "FileUpload/post"} 
+        onValueChanged={onValueChanged}
+        onUploaded={onUploaded} 
+        onUploadError={onUploadError} 
+      />
+    </>
+  );
+});
+
+FileUploaderWithPreview.displayName = 'FileUploaderWithPreview';

React/src/orig_constants.ts renamed to React/src/constants.ts

@@ -98,16 +98,5 @@ export const employees: Employee[] = [{
   "BirthDate": "1985/06/05",
   "HireDate": "2008/03/24",
   "Notes": "Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!",
-  "Address": "2211 Bonita Dr."
-}, {
-  "ID": 30,
-  "FirstName": "Kent",
-  "LastName": "Samuelson",
-  "Prefix": "Dr.",
-  "Position": "Ombudsman",
-  "Picture": "images/employees/02.png",
-  "BirthDate": "1972/09/11",
-  "HireDate": "2009/04/22",
-  "Notes": "As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.    He is a classically trained musician and is a member of the Chamber Orchestra.",
-  "Address": "12100 Mora Dr"
-}];
+  "Address": "3800 S Lamar Blvd."
+}];

React/src/orig_data.ts renamed to React/src/data.ts

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import 'devextreme/dist/css/dx.material.blue.light.compact.css';
 import './index.css';
 import App from './App.tsx';