Skip to content

Commit 47f41e5

Browse files
AJIXuMuKAJIXuMuK
authored
Merge pull request SharePoint#8346 from SharePoint/user/micwilson/media-upload-ga
User/micwilson/media upload ga
2 parents 6f73ca6 + ca7f8d3 commit 47f41e5

13 files changed

+476
-2
lines changed

‎docs/spfx/release-1.15.2.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,11 @@ The SelectMedia action can be configured as shown below:
9090
The action will be rendered as below:
9191

9292

93-
![Concepts](../images/release-notes/114/file-action.jpg)
93+
![Select file button](../images/release-notes/114/file-action.jpg)
9494

9595
The Select Media Action can be used to select Images from your native device. In the browser it uses the file picker to help access relavant files:
9696

97-
![Concepts](../images/release-notes/114/media-panel.jpg)
97+
![Select file panel](../images/release-notes/114/media-panel.jpg)
9898

9999

100100
### Updates to ESLint rules

‎docs/spfx/viva/get-started/actions/media-upload/MediaUploadDocumentation.md

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Media upload in Adaptive Card Extension
3+
description: Media upload is a new action that the SharePoint Adaptive Card Extension framework supports, which enables third party developers to upload data content to sharepoint.
4+
ms.date: 07/20/2022
5+
---
6+
# Media upload in Adaptive Card Extension
7+
8+
> [!NOTE]
9+
> The media upload capability in Adaptive Card Extension will be available in SPFx v1.15.
10+
>
11+
> So make sure that you have installed it before proceeding further.
12+
>
13+
> For more information on installing the SPFx v1.15 Preview, see [SharePoint Framework v1.15 release notes](../../../../release-1.15.md).
14+
>
15+
> This tutorial also assumes that you have already built a SharePoint Adaptive Card Extension.
16+
>
17+
> To learn how to create your first SharePoint Adaptive Card Extension, try out [this tutorial](../../../get-started/build-first-sharepoint-adaptive-card-extension.md).
18+
19+
20+
### Action type for media upload
21+
22+
#### Select Media
23+
24+
This allows users to upload media content via an ACE. The current size limitation is 1MB per image. A user may specify any image type to be uploaded. **Note**: _If an image type is not specified then an error indicating only images can be uploaded will show up._
25+
26+
The ACE action for Select Media is: `VivaAction.SelectMedia`.
27+
28+
The parameters that it takes are as follows:
29+
30+
- `mediaType`: This is set to image by default as audio is still under works.
31+
- `allowMultipleCapture` [OPTIONAL]: This enables multiple files to be added at once.
32+
- This is enabled by default.
33+
- `maxSizePerFile` [OPTIONAL]: The limitation for the file size to be uploaded, suggested limitation is 1mb.
34+
- `supportedFileFormats` [OPTIONAL]: This is a space delimited format on allowed types. If none are supplied then standard image files are used for type checking.
35+
- Any file which is attempted to be upload that doesn't match the allowed type results in an error message stating: _This isn't a file type we support. You can only upload images._
36+
37+
```typescript
38+
{
39+
/**
40+
* Specify the specific media type that should be selected
41+
*/
42+
mediaType: MediaType;
43+
/**
44+
* Allow multiple images to be selected.
45+
*/
46+
allowMultipleCapture?: boolean;
47+
/**
48+
* Max file size that can be uploaded.
49+
*/
50+
maxSizePerFile?: number;
51+
/**
52+
* File formats supported for upload.
53+
*/
54+
supportedFileFormats?: string[];
55+
}
56+
```
57+
58+
### Tutorial and Examples
59+
60+
You can take a look at [this tutorial](./MediaUploadTutorial.md) which goes over a step by step guide on how to create a card with the available media upload action.
61+
62+
1. **Upload an image**
63+
64+
In your template json file add the following action:
65+
66+
```json
67+
"actions": [
68+
{
69+
"type": "VivaAction.SelectMedia",
70+
"id": "Select Media",
71+
"title": "Upload Image",
72+
"parameters": {
73+
"mediaType": "MediaType.Image"
74+
}
75+
}
76+
]
77+
```
78+
79+
1. **Upload multiple images**
80+
81+
In your template json file add the following action:
82+
83+
```json
84+
"actions": [
85+
{
86+
"type": "VivaAction.SelectMedia",
87+
"id": "Select Media",
88+
"title": "Upload Image",
89+
"parameters": {
90+
"mediaType": "MediaType.Image",
91+
"allowMultipleCapture": true
92+
}
93+
}
94+
]
95+
```
96+
97+
1. **Upload only JPG images**
98+
99+
In your template json file add the following action:
100+
101+
```json
102+
"actions": [
103+
{
104+
"type": "VivaAction.SelectMedia",
105+
"id": "Select Media",
106+
"title": "Upload Image",
107+
"parameters": {
108+
"mediaType": "MediaType.Image",
109+
"supportedFileFormats": "jpg"
110+
}
111+
}
112+
]
113+
```
114+
115+
1. **Upload allow only small images to be uploaded**
116+
117+
In your template json file add the following action:
118+
119+
```json
120+
"actions": [
121+
{
122+
"type": "VivaAction.SelectMedia",
123+
"id": "Select Media",
124+
"title": "Upload Image",
125+
"parameters": {
126+
"mediaType": "MediaType.Image",
127+
"supportedFilemaxSizePerFileFormats": 1000
128+
}
129+
}
130+
]
131+
```
132+
133+
### Access media upload action via card-designer card's property pane
134+
135+
If you don't want to write up a new ACE but still wich to see the media upload in action, be sure to explore [this tutorial](./MediaUploadPropertyPane.md) which allows you to explore this through the property pane.
136+
137+
> [!NOTE]
138+
> The media upload action can be added on the card view, buttons ofthe card view, or inside the quick view itself.
139+
140+
### Availability of media upload action
141+
142+
> [!NOTE]
143+
> Currently this feature is not supported in teams mobile and will throw an error indicating that this.
144+
145+
Action | Viva Connection Desktop | Viva Connections Mobile | Browser
146+
------------- | ------------- | ------------- | -------------
147+
Select Media | Supported | Not Supported | Supported

‎docs/spfx/viva/get-started/actions/media-upload/MediaUploadPropertyPane.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Explore Media Upload capability via property pane of card-designer card in Adaptive Card Extension
3+
description: Media Upload is a new action that the SharePoint Adaptive Card Extension framework supports. In this tutorial we will see how we can explore this capability via the property pane of the card-designer card.
4+
ms.date: 07/21/2022
5+
ms.localizationpriority: high
6+
---
7+
8+
# Explore Media Upload capability via property pane of card-designer card in Adaptive Card Extension.
9+
10+
In this tutorial we will see how we can explore this capability via the property pane of the card-designer card.
11+
12+
We will:
13+
14+
- Update the card strings
15+
- Introduce media upload actions on the card view, primary button, and secondary button.
16+
17+
First, figure out the ___domain to the URL of your SharePoint tenant and site you want to use for testing and access the `workbench.aspx` page. For example: `https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx`.
18+
19+
Here, click on the '+' icon in the middle of the page, and add the `card-designer` card on the canvas.
20+
21+
Next, click the pencil icon adjacent to this card to open the property pane.
22+
23+
### Update the card strings
24+
25+
Here, first set the `Card size` to `Large`.
26+
27+
To provide descriptive labels, change `Title` to `Media Upload`, `Heading` to `Media Upload Demo` and `description` to `Demo Media Upload Actions`.
28+
29+
![Adding strings in the property pane of card designer card](./img/mediaUploadPropertyPaneStrings.PNG)
30+
31+
### Adding action on Card View
32+
33+
Under `Actions`, click the drop-down menu of `Card action` and select `Select media` option. By default **Images** is the only media type to be captured.
34+
35+
Set the expected file formats as **png** and **jpg**.
36+
37+
![Set the on-click action to "Select Media" from the drop-down menu of card-view](./img/mediaUploadPropertyPaneCardAction.PNG)
38+
39+
### Adding action on Primary button
40+
41+
Next, for the `Primary Button`, set the `Title` to `Select single media` and from its action drop-down menu, select `Select Media`.
42+
43+
Ensure that `Allow Multiple Capture` is toggled off.
44+
45+
![Set the on-click action to "Select Media" from the drop-down menu for the primary button](./img//mediaUploadPropertyPanePrimaryButtonAction.PNG)
46+
47+
### Adding action on Secondary button
48+
49+
Change the size of the card from Medium to Large.
50+
51+
Ensure that `Allow Multiple Capture` is toggled on.
52+
53+
Finally, for the `Secondary Button`, set the `Title` to `Select multiple media` and from its action drop-down menu, select `Select Media`.
54+
55+
![Set the on-click action to "Select Media" from the drop-down menu for the secondary button and enable multiple file uploading](./img/mediaUploadPropertyPaneSecondaryButtonAction.PNG)
56+
57+
### Try the Select Media action
58+
59+
Now close the property pane and click `Preview` from the top right hand corner of the page:
60+
61+
- Click on the card to open up media upload and exit
62+
- Clicking `Select single media` will pull open the same modal
63+
- Clicking `Select multiple media` will open up the same modal but will allow the user to upload several files at once
64+
65+
![Multiple images uploaded at once](./img/mediaUploadPropertyPaneMultipleImages.PNG)

0 commit comments

Comments
 (0)