@pnp/spfx-controls-react 3.17.0-beta.6991023 → 3.17.0-beta.7003036

package/CHANGELOG.json

@@ -4,10 +4,14 @@
       "version": "3.17.0",
       "changes":{
         "new": [],
-        "enhancements": [],
+        "enhancements": [
+          "`DyanmicForm`: Added file handling [#1625](https://github.com/pnp/sp-dev-fx-controls-react/pull/1625)"
+        ],
         "fixes": []
       },
-      "contributions": []
+      "contributions": [
+        "[Guido Zambarda](https://github.com/GuidoZam)"
+      ]
     },
     {
       "version": "3.16.0",

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## 3.17.0
 
+### Enhancements
+
+- `DyanmicForm`: Added file handling [#1625](https://github.com/pnp/sp-dev-fx-controls-react/pull/1625)
+
+### Contributors
+
+Special thanks to our contributor: [Guido Zambarda](https://github.com/GuidoZam).
+
 ## 3.16.0
 
 ### New control(s)

package/lib/common/telemetry/version.js

@@ -1,2 +1,2 @@
-export var version = "3.17.0-beta.6991023";
+export var version = "3.17.0-beta.7003036";
 //# sourceMappingURL=version.js.map

package/lib/controls/dynamicForm/DynamicForm.d.ts

@@ -21,6 +21,7 @@ export declare class DynamicForm extends React.Component<IDynamicFormProps, IDyn
      */
     render(): JSX.Element;
     private onSubmitClick;
+    private addFileToLibrary;
     private onChange;
     private getFieldInformations;
     private cultureNameLookup;
@@ -30,6 +31,8 @@ export declare class DynamicForm extends React.Component<IDynamicFormProps, IDyn
     private closeValidationErrorDialog;
     private getValidationErrorTitle;
     private getValidationErrorMessage;
+    private renderFileSelectionControl;
+    private getFileIconFromExtension;
     private isEmptyNumOrString;
 }
 //# sourceMappingURL=DynamicForm.d.ts.map

package/lib/controls/dynamicForm/DynamicForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../src/controls/dynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,OAAO,eAAe,CAAC;AACvB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,eAAe,CAAC;AAIvB;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,SAAS,CAC9C,iBAAiB,EACjB,iBAAiB,CAClB;IACC,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,MAAM,CAEqC;gBAEvC,KAAK,EAAE,iBAAiB;IA8BpC;;OAEG;IACI,iBAAiB,IAAI,IAAI;IAUhC;;OAEG;IACI,MAAM,IAAI,GAAG,CAAC,OAAO;IAiF5B,OAAO,CAAC,aAAa,CAsPnB;IAGF,OAAO,CAAC,QAAQ,CAkDd;IAGF,OAAO,CAAC,oBAAoB,CAyR1B;IAEF,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,WAAW,CAqBjB;IAEF,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,aAAa,CA0CnB;IAEF,OAAO,CAAC,0BAA0B,CAIhC;IAEF,OAAO,CAAC,uBAAuB,CAS7B;IAEF,OAAO,CAAC,yBAAyB,CAS/B;IAEF,OAAO,CAAC,kBAAkB;CAG3B"}
+{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../src/controls/dynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,OAAO,eAAe,CAAC;AACvB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,eAAe,CAAC;AAIvB;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,SAAS,CAC9C,iBAAiB,EACjB,iBAAiB,CAClB;IACC,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,MAAM,CAEqC;gBAEvC,KAAK,EAAE,iBAAiB;IA8BpC;;OAEG;IACI,iBAAiB,IAAI,IAAI;IAUhC;;OAEG;IACI,MAAM,IAAI,GAAG,CAAC,OAAO;IAsF5B,OAAO,CAAC,aAAa,CA4QnB;IAEF,OAAO,CAAC,gBAAgB,CAwDvB;IAGD,OAAO,CAAC,QAAQ,CAkDd;IAGF,OAAO,CAAC,oBAAoB,CAyR1B;IAEF,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,WAAW,CAqBjB;IAEF,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,aAAa,CA0CnB;IAEF,OAAO,CAAC,0BAA0B,CAIhC;IAEF,OAAO,CAAC,uBAAuB,CAS7B;IAEF,OAAO,CAAC,yBAAyB,CAS/B;IAEF,OAAO,CAAC,0BAA0B,CA6CjC;IAED,OAAO,CAAC,wBAAwB,CAsB/B;IAED,OAAO,CAAC,kBAAkB;CAG3B"}

package/lib/controls/dynamicForm/DynamicForm.js

@@ -67,8 +67,10 @@ import * as strings from "ControlStrings";
 import { DefaultButton, PrimaryButton, } from "@fluentui/react/lib/Button";
 import { ProgressIndicator } from "@fluentui/react/lib/ProgressIndicator";
 import { Stack } from "@fluentui/react/lib/Stack";
+import { Icon } from "@fluentui/react/lib/components/Icon/Icon";
 import * as React from "react";
 import SPservice from "../../services/SPService";
+import { FilePicker } from "../filePicker";
 import { DynamicField } from "./dynamicField";
 import styles from "./DynamicForm.module.scss";
 import { Dialog, DialogFooter, DialogType, } from "@fluentui/react/lib/Dialog";
@@ -89,16 +91,16 @@ var DynamicForm = /** @class */ (function (_super) {
             : _this.props.context.pageContext.web.absoluteUrl;
         //trigger when the user submits the form.
         _this.onSubmitClick = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, listId, listItemId, contentTypeId, onSubmitted, onBeforeSubmit, onSubmitError, shouldBeReturnBack_1, fields, objects, _loop_1, this_1, i, len, isCancelled, newETag, iur, error_1, contentTypeIdField, iar, error_2, idField, titleField, contentTypeIdField, library, folderTitle, newFolder, fields_1, folderId, iur, error_3, error_4;
+            var _a, listId, listItemId, contentTypeId, onSubmitted, onBeforeSubmit, onSubmitError, enableFileSelection, validationErrorDialogProps, returnListItemInstanceOnSubmit, shouldBeReturnBack_1, fields, objects, _loop_1, this_1, i, len, isCancelled, newETag, iur, error_1, contentTypeIdField, iar, error_2, idField, titleField, contentTypeIdField, library, folderTitle, newFolder, fields_1, folderId, iur, error_3, error_4;
             var _this = this;
-            var _b, _c, _d, _e, _f;
-            return __generator(this, function (_g) {
-                switch (_g.label) {
+            var _b, _c, _d, _e;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
                     case 0:
-                        _a = this.props, listId = _a.listId, listItemId = _a.listItemId, contentTypeId = _a.contentTypeId, onSubmitted = _a.onSubmitted, onBeforeSubmit = _a.onBeforeSubmit, onSubmitError = _a.onSubmitError;
-                        _g.label = 1;
+                        _a = this.props, listId = _a.listId, listItemId = _a.listItemId, contentTypeId = _a.contentTypeId, onSubmitted = _a.onSubmitted, onBeforeSubmit = _a.onBeforeSubmit, onSubmitError = _a.onSubmitError, enableFileSelection = _a.enableFileSelection, validationErrorDialogProps = _a.validationErrorDialogProps, returnListItemInstanceOnSubmit = _a.returnListItemInstanceOnSubmit;
+                        _f.label = 1;
                     case 1:
-                        _g.trys.push([1, 27, , 28]);
+                        _f.trys.push([1, 31, , 32]);
                         shouldBeReturnBack_1 = false;
                         fields = (this.state.fieldCollection || []).slice();
                         fields.forEach(function (val) {
@@ -138,7 +140,14 @@ var DynamicForm = /** @class */ (function (_super) {
                         if (shouldBeReturnBack_1) {
                             this.setState({
                                 fieldCollection: fields,
-                                isValidationErrorDialogOpen: ((_b = this.props.validationErrorDialogProps) === null || _b === void 0 ? void 0 : _b.showDialogOnValidationError) === true,
+                                isValidationErrorDialogOpen: (validationErrorDialogProps === null || validationErrorDialogProps === void 0 ? void 0 : validationErrorDialogProps.showDialogOnValidationError) === true,
+                            });
+                            return [2 /*return*/];
+                        }
+                        if (enableFileSelection === true && this.state.selectedFile === undefined && this.props.listItemId === undefined) {
+                            this.setState({
+                                missingSelectedFile: true,
+                                isValidationErrorDialogOpen: (validationErrorDialogProps === null || validationErrorDialogProps === void 0 ? void 0 : validationErrorDialogProps.showDialogOnValidationError) === true,
                             });
                             return [2 /*return*/];
                         }
@@ -148,8 +157,8 @@ var DynamicForm = /** @class */ (function (_super) {
                         objects = {};
                         _loop_1 = function (i, len) {
                             var val, fieldType, additionalData, columnInternalName, hiddenFieldName, value_1, uploadedImage;
-                            return __generator(this, function (_h) {
-                                switch (_h.label) {
+                            return __generator(this, function (_g) {
+                                switch (_g.label) {
                                     case 0:
                                         val = fields[i];
                                         fieldType = val.fieldType, additionalData = val.additionalData, columnInternalName = val.columnInternalName, hiddenFieldName = val.hiddenFieldName;
@@ -177,8 +186,8 @@ var DynamicForm = /** @class */ (function (_super) {
                                         if (!(fieldType === "TaxonomyFieldType")) return [3 /*break*/, 3];
                                         objects[columnInternalName] = {
                                             __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
-                                            Label: (_d = (_c = value_1[0]) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "",
-                                            TermGuid: (_f = (_e = value_1[0]) === null || _e === void 0 ? void 0 : _e.key) !== null && _f !== void 0 ? _f : "11111111-1111-1111-1111-111111111111",
+                                            Label: (_c = (_b = value_1[0]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : "",
+                                            TermGuid: (_e = (_d = value_1[0]) === null || _d === void 0 ? void 0 : _d.key) !== null && _e !== void 0 ? _e : "11111111-1111-1111-1111-111111111111",
                                             WssId: "-1",
                                         };
                                         return [3 /*break*/, 14];
@@ -215,7 +224,7 @@ var DynamicForm = /** @class */ (function (_super) {
                                         if (!additionalData) return [3 /*break*/, 11];
                                         return [4 /*yield*/, this_1.uploadImage(additionalData)];
                                     case 10:
-                                        uploadedImage = _h.sent();
+                                        uploadedImage = _g.sent();
                                         objects[columnInternalName] = JSON.stringify({
                                             type: "thumbnail",
                                             fileName: uploadedImage.Name,
@@ -225,24 +234,24 @@ var DynamicForm = /** @class */ (function (_super) {
                                         return [3 /*break*/, 12];
                                     case 11:
                                         objects[columnInternalName] = null;
-                                        _h.label = 12;
+                                        _g.label = 12;
                                     case 12: return [3 /*break*/, 14];
                                     case 13:
                                         objects[columnInternalName] = val.newValue;
-                                        _h.label = 14;
+                                        _g.label = 14;
                                     case 14: return [2 /*return*/];
                                 }
                             });
                         };
                         this_1 = this;
                         i = 0, len = fields.length;
-                        _g.label = 2;
+                        _f.label = 2;
                     case 2:
                         if (!(i < len)) return [3 /*break*/, 5];
                         return [5 /*yield**/, _loop_1(i, len)];
                     case 3:
-                        _g.sent();
-                        _g.label = 4;
+                        _f.sent();
+                        _f.label = 4;
                     case 4:
                         i++;
                         return [3 /*break*/, 2];
@@ -250,126 +259,192 @@ var DynamicForm = /** @class */ (function (_super) {
                         if (!onBeforeSubmit) return [3 /*break*/, 7];
                         return [4 /*yield*/, onBeforeSubmit(objects)];
                     case 6:
-                        isCancelled = _g.sent();
+                        isCancelled = _f.sent();
                         if (isCancelled) {
                             this.setState({
                                 isSaving: false,
                             });
                             return [2 /*return*/];
                         }
-                        _g.label = 7;
+                        _f.label = 7;
                     case 7:
                         newETag = undefined;
                         if (!listItemId) return [3 /*break*/, 12];
-                        _g.label = 8;
+                        _f.label = 8;
                     case 8:
-                        _g.trys.push([8, 10, , 11]);
+                        _f.trys.push([8, 10, , 11]);
                         return [4 /*yield*/, sp.web.lists
                                 .getById(listId)
                                 .items.getById(listItemId)
                                 .update(objects, this.state.etag)];
                     case 9:
-                        iur = _g.sent();
+                        iur = _f.sent();
                         newETag = iur.data["odata.etag"];
                         if (onSubmitted) {
-                            onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false
+                            onSubmitted(iur.data, returnListItemInstanceOnSubmit !== false
                                 ? iur.item
                                 : undefined);
                         }
                         return [3 /*break*/, 11];
                     case 10:
-                        error_1 = _g.sent();
+                        error_1 = _f.sent();
                         if (onSubmitError) {
                             onSubmitError(objects, error_1);
                         }
                         console.log("Error", error_1);
                         return [3 /*break*/, 11];
-                    case 11: return [3 /*break*/, 26];
+                    case 11: return [3 /*break*/, 30];
                     case 12:
                         if (!(contentTypeId === undefined ||
                             contentTypeId === "" ||
-                            !contentTypeId.startsWith("0x0120") ||
-                            contentTypeId.startsWith("0x01"))) return [3 /*break*/, 17];
-                        _g.label = 13;
+                            (!contentTypeId.startsWith("0x0120") &&
+                                contentTypeId.startsWith("0x01")))) return [3 /*break*/, 18];
+                        if (!(contentTypeId === undefined || enableFileSelection === true)) return [3 /*break*/, 14];
+                        return [4 /*yield*/, this.addFileToLibrary(objects)];
                     case 13:
-                        _g.trys.push([13, 15, , 16]);
+                        _f.sent();
+                        return [3 /*break*/, 17];
+                    case 14:
+                        _f.trys.push([14, 16, , 17]);
                         contentTypeIdField = "ContentTypeId";
                         //check if item contenttype is passed, then update the object with content type id, else, pass the object
                         if (contentTypeId !== undefined && contentTypeId.startsWith("0x01"))
                             objects[contentTypeIdField] = contentTypeId;
                         return [4 /*yield*/, sp.web.lists.getById(listId).items.add(objects)];
-                    case 14:
-                        iar = _g.sent();
+                    case 15:
+                        iar = _f.sent();
                         if (onSubmitted) {
                             onSubmitted(iar.data, this.props.returnListItemInstanceOnSubmit !== false
                                 ? iar.item
                                 : undefined);
                         }
-                        return [3 /*break*/, 16];
-                    case 15:
-                        error_2 = _g.sent();
+                        return [3 /*break*/, 17];
+                    case 16:
+                        error_2 = _f.sent();
                         if (onSubmitError) {
                             onSubmitError(objects, error_2);
                         }
                         console.log("Error", error_2);
-                        return [3 /*break*/, 16];
-                    case 16: return [3 /*break*/, 26];
-                    case 17:
-                        if (!contentTypeId.startsWith("0x0120")) return [3 /*break*/, 26];
-                        _g.label = 18;
+                        return [3 /*break*/, 17];
+                    case 17: return [3 /*break*/, 30];
                     case 18:
-                        _g.trys.push([18, 25, , 26]);
+                        if (!contentTypeId.startsWith("0x0120")) return [3 /*break*/, 28];
+                        _f.label = 19;
+                    case 19:
+                        _f.trys.push([19, 26, , 27]);
                         idField = "ID";
                         titleField = "Title";
                         contentTypeIdField = "ContentTypeId";
                         return [4 /*yield*/, sp.web.lists.getById(listId)];
-                    case 19:
-                        library = _g.sent();
+                    case 20:
+                        library = _f.sent();
                         folderTitle = objects[titleField] !== undefined && objects[titleField] !== ""
                             ? objects[titleField].replace(/["|*|:|<|>|?|/|\\||]/g, "_") // Replace not allowed chars in folder name
                             : "";
                         return [4 /*yield*/, library.rootFolder.addSubFolderUsingPath(folderTitle)];
-                    case 20:
-                        newFolder = _g.sent();
-                        return [4 /*yield*/, newFolder.listItemAllFields()];
                     case 21:
-                        fields_1 = _g.sent();
-                        if (!fields_1[idField]) return [3 /*break*/, 23];
+                        newFolder = _f.sent();
+                        return [4 /*yield*/, newFolder.listItemAllFields()];
+                    case 22:
+                        fields_1 = _f.sent();
+                        if (!fields_1[idField]) return [3 /*break*/, 24];
                         folderId = fields_1[idField];
                         // Set the content type ID for the target item
                         objects[contentTypeIdField] = contentTypeId;
                         return [4 /*yield*/, library.items.getById(folderId).update(objects)];
-                    case 22:
-                        iur = _g.sent();
+                    case 23:
+                        iur = _f.sent();
                         if (onSubmitted) {
                             onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false
                                 ? iur.item
                                 : undefined);
                         }
-                        return [3 /*break*/, 24];
-                    case 23: throw new Error("Unable to read the ID of the just created folder or Document Set");
-                    case 24: return [3 /*break*/, 26];
-                    case 25:
-                        error_3 = _g.sent();
+                        return [3 /*break*/, 25];
+                    case 24: throw new Error("Unable to read the ID of the just created folder or Document Set");
+                    case 25: return [3 /*break*/, 27];
+                    case 26:
+                        error_3 = _f.sent();
                         if (onSubmitError) {
                             onSubmitError(objects, error_3);
                         }
                         console.log("Error", error_3);
-                        return [3 /*break*/, 26];
-                    case 26:
+                        return [3 /*break*/, 27];
+                    case 27: return [3 /*break*/, 30];
+                    case 28:
+                        if (!(contentTypeId.startsWith("0x01") && enableFileSelection === true)) return [3 /*break*/, 30];
+                        // We are adding a folder or a Document Set
+                        return [4 /*yield*/, this.addFileToLibrary(objects)];
+                    case 29:
+                        // We are adding a folder or a Document Set
+                        _f.sent();
+                        _f.label = 30;
+                    case 30:
                         this.setState({
                             isSaving: false,
                             etag: newETag,
                         });
-                        return [3 /*break*/, 28];
-                    case 27:
-                        error_4 = _g.sent();
+                        return [3 /*break*/, 32];
+                    case 31:
+                        error_4 = _f.sent();
                         if (onSubmitError) {
                             onSubmitError(null, error_4);
                         }
                         console.log("Error onSubmit", error_4);
-                        return [3 /*break*/, 28];
-                    case 28: return [2 /*return*/];
+                        return [3 /*break*/, 32];
+                    case 32: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.addFileToLibrary = function (objects) { return __awaiter(_this, void 0, void 0, function () {
+            var selectedFile, _a, listId, contentTypeId, onSubmitted, onSubmitError, returnListItemInstanceOnSubmit, idField, contentTypeIdField, library, itemTitle, fileCreatedResult, _b, _c, _d, fields, folderId, iur, error_5;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        selectedFile = this.state.selectedFile;
+                        _a = this.props, listId = _a.listId, contentTypeId = _a.contentTypeId, onSubmitted = _a.onSubmitted, onSubmitError = _a.onSubmitError, returnListItemInstanceOnSubmit = _a.returnListItemInstanceOnSubmit;
+                        _e.label = 1;
+                    case 1:
+                        _e.trys.push([1, 9, , 10]);
+                        idField = "ID";
+                        contentTypeIdField = "ContentTypeId";
+                        return [4 /*yield*/, sp.web.lists.getById(listId)];
+                    case 2:
+                        library = _e.sent();
+                        itemTitle = selectedFile !== undefined && selectedFile.fileName !== undefined && selectedFile.fileName !== ""
+                            ? selectedFile.fileName.replace(/["|*|:|<|>|?|/|\\||]/g, "_") // Replace not allowed chars in folder name
+                            : "";
+                        _c = (_b = library.rootFolder.files).addChunked;
+                        _d = [encodeURI(itemTitle)];
+                        return [4 /*yield*/, selectedFile.downloadFileContent()];
+                    case 3: return [4 /*yield*/, _c.apply(_b, _d.concat([_e.sent()]))];
+                    case 4:
+                        fileCreatedResult = _e.sent();
+                        return [4 /*yield*/, fileCreatedResult.file.listItemAllFields()];
+                    case 5:
+                        fields = _e.sent();
+                        if (!fields[idField]) return [3 /*break*/, 7];
+                        folderId = fields[idField];
+                        // Set the content type ID for the target item
+                        objects[contentTypeIdField] = contentTypeId;
+                        return [4 /*yield*/, library.items.getById(folderId).update(objects)];
+                    case 6:
+                        iur = _e.sent();
+                        if (onSubmitted) {
+                            onSubmitted(iur.data, returnListItemInstanceOnSubmit !== false
+                                ? iur.item
+                                : undefined);
+                        }
+                        return [3 /*break*/, 8];
+                    case 7: throw new Error("Unable to read the ID of the just created folder or Document Set");
+                    case 8: return [3 /*break*/, 10];
+                    case 9:
+                        error_5 = _e.sent();
+                        if (onSubmitError) {
+                            onSubmitError(objects, error_5);
+                        }
+                        console.log("Error", error_5);
+                        return [3 /*break*/, 10];
+                    case 10: return [2 /*return*/];
                 }
             });
         }); };
@@ -438,7 +513,7 @@ var DynamicForm = /** @class */ (function (_super) {
         }); };
         //getting all the fields information as part of get ready process
         _this.getFieldInformations = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, listId, listItemId, disabledFields, respectETag, onListItemLoaded, contentTypeId, spList, item, etag, defaultContentType, listFields, tempFields, order, responseValue, hiddenFields, defaultDayOfWeek, _loop_2, this_2, i, len, installedLanguages, error_5;
+            var _a, listId, listItemId, disabledFields, respectETag, onListItemLoaded, contentTypeId, spList, item, etag, defaultContentType, listFields, tempFields, order, responseValue, hiddenFields, defaultDayOfWeek, _loop_2, this_2, i, len, installedLanguages, error_6;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -568,8 +643,8 @@ var DynamicForm = /** @class */ (function (_super) {
                                         hiddenName = response.value;
                                         termSetId = field.TermSetId;
                                         anchorId = field.AnchorId;
-                                        if (item !== null) {
-                                            item[field.InternalName].forEach(function (element) {
+                                        if (item !== null && item[field.InternalName] !== null && item[field.InternalName].results !== null) {
+                                            item[field.InternalName].results.forEach(function (element) {
                                                 selectedTags_1.push({
                                                     key: element.TermGuid,
                                                     name: element.Label,
@@ -747,8 +822,8 @@ var DynamicForm = /** @class */ (function (_super) {
                         this.setState({ fieldCollection: tempFields, installedLanguages: installedLanguages, etag: etag });
                         return [3 /*break*/, 17];
                     case 16:
-                        error_5 = _b.sent();
-                        console.log("Error get field informations", error_5);
+                        error_6 = _b.sent();
+                        console.log("Error get field informations", error_6);
                         return [2 /*return*/, null];
                     case 17: return [2 /*return*/];
                 }
@@ -789,7 +864,7 @@ var DynamicForm = /** @class */ (function (_super) {
         _this.getFormFields = function (listId, contentTypeId, webUrl
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ) { return __awaiter(_this, void 0, void 0, function () {
-            var context, webAbsoluteUrl, apiUrl, data, results, error_6;
+            var context, webAbsoluteUrl, apiUrl, data, results, error_7;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -821,9 +896,9 @@ var DynamicForm = /** @class */ (function (_super) {
                         _a.label = 3;
                     case 3: return [2 /*return*/, null];
                     case 4:
-                        error_6 = _a.sent();
-                        console.dir(error_6);
-                        return [2 /*return*/, Promise.reject(error_6)];
+                        error_7 = _a.sent();
+                        console.dir(error_7);
+                        return [2 /*return*/, Promise.reject(error_7)];
                     case 5: return [2 /*return*/];
                 }
             });
@@ -849,6 +924,55 @@ var DynamicForm = /** @class */ (function (_super) {
             }
             return errorMessage;
         };
+        _this.renderFileSelectionControl = function () {
+            var _a = _this.state, selectedFile = _a.selectedFile, missingSelectedFile = _a.missingSelectedFile;
+            var labelEl = React.createElement("label", { className: styles.fieldRequired + ' ' + styles.fieldLabel }, strings.DynamicFormChooseFileLabel);
+            return React.createElement("div", null,
+                React.createElement("div", { className: styles.titleContainer },
+                    React.createElement(Icon, { className: styles.fieldIcon, iconName: "DocumentSearch" }),
+                    labelEl),
+                React.createElement(FilePicker, { buttonLabel: strings.DynamicFormChooseFileButtonText, accepts: _this.props.supportedFileExtensions ? _this.props.supportedFileExtensions : [".docx", ".doc", ".pptx", ".ppt", ".xlsx", ".xls", ".pdf"], onSave: function (filePickerResult) {
+                        if (filePickerResult.length === 1) {
+                            _this.setState({
+                                selectedFile: filePickerResult[0],
+                                missingSelectedFile: false
+                            });
+                        }
+                        else {
+                            _this.setState({
+                                missingSelectedFile: true
+                            });
+                        }
+                    }, required: true, context: _this.props.context, hideWebSearchTab: true, hideStockImages: true, hideLocalMultipleUploadTab: true, hideLinkUploadTab: true, hideSiteFilesTab: true, checkIfFileExists: true }),
+                selectedFile && React.createElement("div", { className: styles.selectedFileContainer },
+                    React.createElement(Icon, { iconName: _this.getFileIconFromExtension() }),
+                    selectedFile.fileName),
+                missingSelectedFile === true &&
+                    React.createElement("div", { className: styles.errormessage }, strings.DynamicFormRequiredFileMessage));
+        };
+        _this.getFileIconFromExtension = function () {
+            var fileExtension = _this.state.selectedFile.fileName.split('.').pop();
+            switch (fileExtension) {
+                case 'pdf':
+                    return 'PDF';
+                case 'docx':
+                case 'doc':
+                    return 'WordDocument';
+                case 'pptx':
+                case 'ppt':
+                    return 'PowerPointDocument';
+                case 'xlsx':
+                case 'xls':
+                    return 'ExcelDocument';
+                case 'jpg':
+                case 'jpeg':
+                case 'png':
+                case 'gif':
+                    return 'FileImage';
+                default:
+                    return 'Document';
+            }
+        };
         // Initialize pnp sp
         if (_this.props.webAbsoluteUrl) {
             sp.setup({
@@ -898,6 +1022,11 @@ var DynamicForm = /** @class */ (function (_super) {
         return (React.createElement("div", null,
             fieldCollection.length === 0 ? (React.createElement("div", null,
                 React.createElement(ProgressIndicator, { label: strings.DynamicFormLoading, description: strings.DynamicFormPleaseWait }))) : (React.createElement("div", null,
+                this.props.enableFileSelection === true &&
+                    this.props.listItemId === undefined &&
+                    this.props.contentTypeId !== undefined &&
+                    this.props.contentTypeId.startsWith("0x0101") &&
+                    this.renderFileSelectionControl(),
                 fieldCollection.map(function (v, i) {
                     if (fieldOverrides &&
                         Object.prototype.hasOwnProperty.call(fieldOverrides, v.columnInternalName)) {