ISSUE 1683 Fix: (DynamicForm) Added the option to edit file name

src/controls/dynamicForm/DynamicForm.tsx

@@ -488,8 +488,9 @@ export class DynamicForm extends React.Component<
     try {
       const spList = await sp.web.lists.getById(listId);
       let item = null;
+      const isEditingItem = listItemId !== undefined && listItemId !== null && listItemId !== 0;
       let etag: string | undefined = undefined;
-      if (listItemId !== undefined && listItemId !== null && listItemId !== 0) {
+      if (isEditingItem) {
         item = await spList.items.getById(listItemId).get();
 
         if (onListItemLoaded) {
@@ -510,6 +511,7 @@ export class DynamicForm extends React.Component<
       const listFields = await this.getFormFields(
         listId,
         contentTypeId,
+        isEditingItem,
         this.webURL
       );
       const tempFields: IDynamicFieldProps[] = [];
@@ -706,6 +708,9 @@ export class DynamicForm extends React.Component<
             defaultValue = JSON.parse(defaultValue);
           } else if (fieldType === "Boolean") {
             defaultValue = Boolean(Number(defaultValue));
+          } else if (fieldType === "File") {
+            const fileName = await this._spService.getFileName(listId, listItemId);
+            defaultValue = fileName;
           }
 
           tempFields.push({
@@ -802,6 +807,7 @@ export class DynamicForm extends React.Component<
   private getFormFields = async (
     listId: string,
     contentTypeId: string | undefined,
+    isEditingItem: boolean,
     webUrl?: string
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): Promise<any> => {
@@ -818,7 +824,7 @@ export class DynamicForm extends React.Component<
         } else {
           apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/contenttypes('${contentTypeId}')/fields?@listId=guid'${encodeURIComponent(
             listId
-          )}'&$filter=ReadOnlyField eq false and Hidden eq false and (FromBaseType eq false or StaticName eq 'Title')`;
+          )}'&$filter=ReadOnlyField eq false and Hidden eq false and (FromBaseType eq false or StaticName eq 'Title' ${isEditingItem ? "or StaticName eq 'FileLeafRef'" : ''})`;
         }
       } else {
         apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/fields?@listId=guid'${encodeURIComponent(

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -525,6 +525,24 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
           {descriptionEl}
           {errorTextEl}
         </div>;
+
+        case 'File':
+          return <div>
+            <div className={styles.titleContainer}>
+              <Icon className={styles.fieldIcon} iconName={"Page"} />
+              {labelEl}
+            </div>
+            <TextField
+              defaultValue={defaultValue}
+              placeholder={placeholder}
+              className={styles.fieldDisplay}
+              onChange={(e, newText) => { this.onChange(newText); }}
+              disabled={disabled}
+              onBlur={this.onBlur}
+              errorMessage={errorText}
+            />
+            {descriptionEl}
+          </div>;
     }
 
     return null;

src/services/SPService.ts

@@ -793,4 +793,24 @@ export default class SPService implements ISPService {
       resolve(listData);
     });
   }
+
+  public async getFileName(listId: string, itemId: number, webUrl?: string): Promise<string> { 
+    try {
+      const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
+
+      const apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/items(${itemId})?@listId=guid'${encodeURIComponent(listId)}'&$select=FileLeafRef`;
+      const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
+      if (data.ok) {
+        const results = await data.json();
+        if (results) {
+          return results.FileLeafRef;
+        }
+      }
+
+      return null;
+    } catch (error) {
+      console.dir(error);
+      return Promise.reject(error);
+    }
+  }
 }