Skip to content

Commit 52f583a

Browse files
micwilson911micwilson911
committed
Merge branch 'user/micwilson/media-upload-ga' of https://github.com/SharePoint/sp-dev-docs into user/micwilson/media-upload-ga
2 parents 6f73ca6 + ae5403d commit 52f583a

12 files changed

+466
-0
lines changed

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
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+
In your template json file add the following action:
64+
```json
65+
"actions": [
66+
{
67+
"type": "VivaAction.SelectMedia",
68+
"id": "Select Media",
69+
"title": "Upload Image",
70+
"parameters": {
71+
"mediaType": "MediaType.Image"
72+
}
73+
}
74+
]
75+
```
76+
77+
1. **Upload multiple images**
78+
In your template json file add the following action:
79+
```json
80+
"actions": [
81+
{
82+
"type": "VivaAction.SelectMedia",
83+
"id": "Select Media",
84+
"title": "Upload Image",
85+
"parameters": {
86+
"mediaType": "MediaType.Image",
87+
"allowMultipleCapture": true
88+
}
89+
}
90+
]
91+
```
92+
93+
1. **Upload only JPG images**
94+
In your template json file add the following action:
95+
```json
96+
"actions": [
97+
{
98+
"type": "VivaAction.SelectMedia",
99+
"id": "Select Media",
100+
"title": "Upload Image",
101+
"parameters": {
102+
"mediaType": "MediaType.Image",
103+
"supportedFileFormats": "jpg"
104+
}
105+
}
106+
]
107+
```
108+
109+
1. **Upload allow only small images to be uploaded**
110+
In your template json file add the following action:
111+
```json
112+
"actions": [
113+
{
114+
"type": "VivaAction.SelectMedia",
115+
"id": "Select Media",
116+
"title": "Upload Image",
117+
"parameters": {
118+
"mediaType": "MediaType.Image",
119+
"supportedFilemaxSizePerFileFormats": 1000
120+
}
121+
}
122+
]
123+
```
124+
125+
### Access media upload action via card-designer card's property pane
126+
127+
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.
128+
129+
> [!NOTE]
130+
> The media upload action can be added on the card view, buttons ofthe card view, or inside the quick view itself.
131+
132+
### Availability of media upload action
133+
134+
> [!NOTE]
135+
> Currently this feature is not supported in teams mobile and will throw an error indicating that this.
136+
137+
Action | Viva Connection Desktop | Viva Connections Mobile | Browser
138+
------------- | ------------- | ------------- | -------------
139+
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)