Image picker

.hintrc

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": "off",
+    "no-inline-styles": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "frame-title": "off"
+      }
+    ]
+  }
+}

docs/documentation/docs/controls/ImagePicker.md

@@ -0,0 +1,67 @@
+# HoverReactionsBar
+
+This control allows you to select or Upload Image from SharePoint, Ondrive or Stock Images.
+
+## ImagePicker
+
+![imagepicker](../assets/ImagePicker00.png)
+
+![imagepicker](../assets/ImagePicker01.png)
+
+![imagepicker](../assets/ImagePicker02.png)
+
+![imagepicker](../assets/ImagePicker03.png)
+
+![imagepicker](../assets/ImagePicker04.png)
+
+![imagepicker](../assets/ImagePicker05.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { ImagePicker } from '@pnp/spfx-controls-react/lib/ImagePicker';
+```
+
+- Use the `ImagePicker` control in your code as follows:
+
+```Typescript
+
+  <ImagePicker
+  onFileSelected={handleFileSelected}
+  onDeleteFile={handleDeleteFile}
+  selectedFileUrl={selectedImageUrl}
+  context={appContext}
+ >
+```
+
+- With the `onFileSelect` property you can get the selected image:
+
+  ```typescript
+  const handleFileSelected = React.useCallback(async (file: IFilePickerResult) => {
+    console.log("file", file);
+  }, []);
+  ```
+
+- With the `onDelete` property you can execute a callback after delete the image:
+
+```typescript
+const onDeleteFile = React.useCallback(async () => {
+  console.log("onDeleteFile");
+}, []);
+```
+
+## Implementation
+
+The HoverReactionsBar control can be configured with the following properties:
+
+| Property        | Type                                              | Required | Description             |
+| --------------- | ------------------------------------------------- | -------- | ----------------------- |
+| onFileSelected  | onFileSelect: (file: IFilePickerResult ) => void; | yes      | OnSelectedFile Callback |
+| onDeleteFile    | onDeleteFile: () => void                          | no       | onDeleteFile CallBack   |
+| selectedFileUrl | string                                            | no       | Default Selected Image  |
+| context         | BaseComponentContext                              | yes      | Context                 |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ImagePicker)

package.json

@@ -79,6 +79,7 @@
     "react": "17.0.1",
     "react-accessible-accordion": "^5.0.0",
     "react-dom": "17.0.1",
+    "react-dropzone": "^14.2.3",
     "react-mentions": "^4.3.0",
     "react-quill": "2.0.0",
     "regexify-string": "^1.0.16",

src/DynamicForm.ts

@@ -1 +1,2 @@
-export * from './controls/dynamicForm/index';
+export * from './controls/dynamicForm/index';
+export * from './controls/dynamicForm/index';

src/ImagePicker.ts

@@ -0,0 +1 @@
+export * from './controls/imagePicker/index';

src/controls/imagePicker/IFilePickerResult.ts

@@ -0,0 +1,35 @@
+export interface IFilePickerResult {
+    /**
+     * Selected file name with extension.
+     */
+    fileName: string;
+    /**
+     * Selected file name without extension.
+     */
+    fileNameWithoutExtension: string;
+    /**
+     * Absolute file URL. Undefined in case of file upload.
+     */
+    fileAbsoluteUrl: string;
+
+    /**
+     * Size of a selected file (in bytes). Undefined in all cases but file upload
+     */
+    fileSize?: number;
+
+    /**
+     * Absolute not modified file SharePoint URL.
+     */
+    spItemUrl?: string;
+
+    /**
+     * Downloads file picker result content.
+     */
+    downloadFileContent: () => Promise<File>;
+
+    /**
+     * Preview
+     */
+    previewDataUrl?: string;
+  }
+

src/controls/imagePicker/IImagePickerProps.ts

@@ -0,0 +1,8 @@
+import { IImageFile } from './models/IImageFile';
+
+export interface IImagePickerProps {
+onImageSelected: (image: IImageFile) => void;
+isOpen: boolean;
+onDismiss: () => void;
+
+}

src/controls/imagePicker/ImagePicker.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+
+import strings from "ControlStrings";
+import { useAtom } from "jotai";
+
+import {
+  Button,
+  Image,
+} from "@fluentui/react-components";
+import {
+  Delete16Regular,
+  Image20Regular,
+} from "@fluentui/react-icons";
+import { BaseComponentContext } from "@microsoft/sp-component-base";
+
+import { contextState } from "./atoms/contextState";
+import { IFilePickerResult } from "./IFilePickerResult";
+/* import { RenderSpinner } from "./RenderSpninner/RenderSpinner"; */
+import { SelectFromSharePoint } from "./selectFromSharePoint";
+import { useImagePickerStyles } from "./useImagePickerStyles";
+
+export interface IImagePickerProps {
+  onFileSelected: (file: IFilePickerResult) => void;
+  onDeleteFile: () => void;
+  selectedFileUrl: string;
+  context: BaseComponentContext;
+}
+
+/**
+ * Renders the preview image component.
+ *
+ * @param props - The component props.
+ * @param props.selectedImageFileUrl - The URL of the selected image file.
+ * @returns The JSX element representing the preview image component.
+ */
+const RenderPreviewImage = (props: { selectedImageFileUrl: string }): JSX.Element => {
+  const { selectedImageFileUrl } = props;
+
+  const maxWidth = 200;
+  const maxHeight = 200;
+  const styles = useImagePickerStyles();
+
+  if (!selectedImageFileUrl) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.renderImageContainer}>
+        <Image
+          src={selectedImageFileUrl}
+          fit="cover"
+          style={{ minWidth: maxWidth, maxWidth: maxWidth, height: maxHeight }}
+          alt="Selected Image"
+        />
+      </div>
+    </>
+  );
+};
+
+/**
+ * Renders an image picker component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ImagePicker
+ *   onFileSelected={handleFileSelected}
+ *   onDeleteFile={handleDeleteFile}
+ *   selectedFileUrl={selectedImageUrl}
+ *   context={appContext}
+ * />
+ * ```
+ */
+
+export const ImagePicker: React.FunctionComponent<IImagePickerProps> = (
+  props: React.PropsWithChildren<IImagePickerProps>
+) => {
+  const { onFileSelected, onDeleteFile, selectedFileUrl, context } = props;
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const styles = useImagePickerStyles();
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [appContext, setAppContext] = useAtom(contextState);
+
+  React.useEffect(() => {
+    setAppContext({
+      ...appContext,
+      context: context,
+    });
+  }, []);
+
+  const [selectedImageFileUrl, setSelectedImageFileUrl] = React.useState<string>(selectedFileUrl);
+
+  const onDismiss = (): void => {
+    setIsOpen(false);
+  };
+
+  const isFileSelected = React.useMemo(() => {
+    return !!selectedImageFileUrl;
+  }, [selectedImageFileUrl]);
+
+  const onDeleteFileCLick = React.useCallback(() => {
+    setSelectedImageFileUrl(undefined);
+    onDeleteFile();
+  }, []);
+
+  const styleButtonDelete: React.CSSProperties = { display: !isFileSelected ? "none" : "inline-flex" };
+
+  if (!context) return null;
+
+  return (
+    <>
+      <div className={styles.root} ref={ref}>
+        <div className={styles.buttonContainer}>
+          <Button icon={<Image20Regular />} shape="circular" onClick={() => setIsOpen(true)}>
+            {strings.ImagePickderSelectLabel}
+          </Button>
+          <Button
+            icon={<Delete16Regular />}
+            shape="circular"
+            style={styleButtonDelete}
+            onClick={() => onDeleteFileCLick()}
+          >
+            {strings.ImagePickerDeleteImageLabel}
+          </Button>
+        </div>
+        <SelectFromSharePoint
+          isOpen={isOpen}
+          onDismiss={onDismiss}
+          onFileSelected={async (file: IFilePickerResult) => {
+            onFileSelected(file);
+            setSelectedImageFileUrl(file.previewDataUrl);
+
+            onDismiss();
+          }}
+        />
+        {<RenderPreviewImage selectedImageFileUrl={selectedImageFileUrl} />}
+      </div>
+    </>
+  );
+};