@goldenpine/react-form-builder2 0.20.3-build.22 → 0.20.3-build.23

package/lib/form-elements/index.js

@@ -866,7 +866,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           src: this.state.previewImg,
           height: "100",
           className: "image-upload-preview"
-        }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
+        }), /*#__PURE__*/_react["default"].createElement("button", {
           className: "btn btn-image-clear",
           onClick: this.clearImage
         }, /*#__PURE__*/_react["default"].createElement("i", {
@@ -904,9 +904,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           className: "upload-text"
         }, this.props.data.message_under_camera_icon), /*#__PURE__*/_react["default"].createElement("div", {
           className: "btn-browse"
-        }, this.props.data.label_after_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", {
-          className: "preview-container"
-        }, /*#__PURE__*/_react["default"].createElement("img", {
+        }, this.props.data.label_after_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
           onLoad: function onLoad() {
             return URL.revokeObjectURL(_this13.state.previewImg);
           },
@@ -919,7 +917,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           onClick: this.clearImage
         }, /*#__PURE__*/_react["default"].createElement("i", {
           className: "fas fa-times"
-        }), " Remove Photo")))));
+        }), " ", this.props.data.label_after_photo_clear_icon)))));
       }
     }
   }]);
@@ -1007,6 +1005,61 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.data.upload_layout === 'standard') {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
+          className: "btn btn-outline-secondary",
+          onClick: this.saveFile
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-download"
+        }), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-container"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: fileInputStyle
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          name: name,
+          type: "file",
+          accept: this.props.data.fileType || '*',
+          className: "image-upload visually-hidden",
+          onChange: this.displayFileUpload,
+          "data-clearlabel": this.props.data.label_after_file_clear_icon,
+          disabled: this.props.read_only,
+          id: name
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-control",
+          style: {
+            position: 'relative'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("label", {
+          className: "btn btn-outline-secondary",
+          htmlFor: name
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-file"
+        }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "file-upload-preview"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'inline-block',
+            marginRight: '5px'
+          }
+        }, this.state.fileUpload.name), /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'inline-block',
+            marginLeft: '5px'
+          }
+        }, this.state.fileUpload.size.length > 6 ? "  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn btn-file-upload-clear",
+          onClick: this.clearFileUpload
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " ", this.props.data.label_after_file_clear_icon)))));
+      }
+
+      // non-standard layout: use "upload-card" style like Camera
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
@@ -1020,27 +1073,27 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
       }), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: fileInputStyle
+        style: fileInputStyle,
+        className: "upload-card"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         name: name,
         type: "file",
         accept: this.props.data.fileType || '*',
-        className: "image-upload visually-hidden",
+        className: "visually-hidden",
         onChange: this.displayFileUpload,
         "data-clearlabel": this.props.data.label_after_file_clear_icon,
         disabled: this.props.read_only,
         id: name
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-control",
-        style: {
-          position: 'relative'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "btn btn-outline-secondary",
-        htmlFor: name
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        htmlFor: name,
+        className: "upload-card-content"
       }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-file"
-      }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "fas fa-cloud-upload-alt upload-icon"
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "upload-text"
+      }, this.props.data.message_under_file_icon), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn-browse"
+      }, this.props.data.label_after_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "file-upload-preview"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {

package/lib/form-elements-edit.js

@@ -172,6 +172,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         canHaveOptionCorrect = _this$props$element.canHaveOptionCorrect,
         canHaveOptionValue = _this$props$element.canHaveOptionValue;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
+      var canHaveUploadLayout = this.state.element.element === 'Camera' || this.state.element.element === 'FileUpload';
       var this_files = this.props.files.length ? this.props.files : [];
       if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
         this_files.unshift({
@@ -372,7 +373,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         defaultValue: this.props.element.src,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'src', 'value')
-      }))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), canHaveUploadLayout && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label bold"
@@ -410,7 +411,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         htmlFor: "uploadLayoutDropZone"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "upload-layout-dropzone"
-      }))))), /*#__PURE__*/_react["default"].createElement("div", {
+      })))))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",

package/lib/toolbar.js

@@ -443,6 +443,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'file_upload_',
+        upload_layout: 'standard',
         label_after_file_icon: intl.formatMessage({
           id: 'place-holder-display-label-after-file-icon'
         }),
@@ -546,6 +547,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         elementOptions.label_after_photo_clear_icon = item.label_after_photo_clear_icon;
       }
       if (elementKey === 'FileUpload') {
+        elementOptions.upload_layout = item.upload_layout;
         elementOptions.label_after_file_icon = item.label_after_file_icon;
         elementOptions.message_under_file_icon = item.message_under_file_icon;
         elementOptions.label_after_file_clear_icon = item.label_after_file_clear_icon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldenpine/react-form-builder2",
-  "version": "0.20.3-build.22",
+  "version": "0.20.3-build.23",
   "description": "A complete form builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",