• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Using SaveButton
2
3<!--Kit: ArkUI-->
4<!--Subsystem: Security-->
5<!--Owner: @harylee-->
6<!--SE: @linshuqing; @hehehe-li-->
7<!--TSE: @leiyuqian-->
8
9The **SaveButton** component comes with the privilege for saving data, which allows an application to temporarily save data without any authorization.
10
11When it is tapped, the application obtains one-time permission to access the **mediaLibrary** APIs within 1 minute. You can use this component when your application needs to save images or videos to the media library.
12
13This component allows for simpler operations than Pickers, which have to start a system application and have the user select a directory for saving the image or video.
14
15The following figure shows the effect of the **SaveButton** component.
16
17![](figures/SaveButton_effect.png)
18
19## Constraints
20
21- When a user clicks **SaveButton** in the application for the first time, a dialog box will be displayed to request user authorization. If the user clicks **Deny**, the dialog box will be closed and the application does not have the permission. When the user clicks **SaveButton** again, the user authorization dialog box will be displayed again. If the user clicks **Allow**, the dialog box will be closed and the application is granted the temporary save permission. After that, if the user clicks **SaveButton** again, no dialog box will be displayed.
22
23- The interval for calling **onClick()** to trigger a **mediaLibrary** API cannot exceed 1 minute after **SaveButton** is tapped.
24
25- Each time the component is tapped, the application obtains only one-time perform for API calling.
26
27- The **SaveButton** component must be visible and legible to users. You need to properly configure the component attributes such as the size and color to prevent authorization failures. If the authorization fails due to invalid component style, check the device error logs.
28
29- Request the ohos.permission.CUSTOMIZE_SAVE_BUTTON permission from AppGallery Connect if you need to customize the icon and text of the **SaveButton** component.
30
31  > **NOTE**
32  > The ohos.permission.CUSTOMIZE_SAVE_BUTTON permission is restricted and is available only when the default style cannot meet service requirements. For details about how to request this permission, see <!--RP1-->[Requesting Restricted Permissions](declare-permissions-in-acl.md)<!--RP1End-->.
33
34## How to Develop
35
36For example, to save the image in the dialog box shown above, the application only needs to use the image saving feature for a short period of time in the foreground. In this case, you can the **SaveButton** component to obtain temporary permission to save the image without requesting the related permission for the application.
37
381. Import the dependencies.
39
40   ```ts
41   import { photoAccessHelper } from '@kit.MediaLibraryKit';
42   import { fileIo } from '@kit.CoreFileKit';
43   ```
44
452. Set the image asset and add the **SaveButton** component.
46
47   **SaveButton** is a button-like security component consisting of an icon, text, and background. The background is mandatory, and at least one of the icon and text must be selected. You can select icons and text from the existing options or customize them using [setIcon](../../reference/apis-arkui/arkui-ts/ts-security-components-savebutton.md) and [setText](../../reference/apis-arkui/arkui-ts/ts-security-components-savebutton.md). When declaring the API for creating a security component, you can determine whether to pass in parameters. If parameters are passed in, the component is created based on the specified parameters. If no parameter is passed in, a component with default icon, text, and background is created.
48
49   The following example uses the default parameters. For details, see [SaveButton](../../reference/apis-arkui/arkui-ts/ts-security-components-savebutton.md). In addition, all security components inherit the [Security Component Universal Attributes](../../reference/apis-arkui/arkui-ts/ts-securitycomponent-attributes.md), which can be used to customize styles.
50
51   For details about saving images to the media library, see [Saving Media Library Resources](../../media/medialibrary/photoAccessHelper-savebutton.md).
52
53   ```ts
54   import { photoAccessHelper } from '@kit.MediaLibraryKit';
55   import { fileIo } from '@kit.CoreFileKit';
56   import { common } from '@kit.AbilityKit';
57   import { promptAction } from '@kit.ArkUI';
58   import { BusinessError } from '@kit.BasicServicesKit';
59
60   async function savePhotoToGallery(context: common.UIAbilityContext) {
61     let helper = photoAccessHelper.getPhotoAccessHelper(context);
62     try {
63       // Call createAsset() within 1 minute after onClick is triggered to create an image file. After 1 minute have elapsed, the permission for calling createAsset is revoked.
64       let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
65       // Open the file based on its URI. The write process is not time bound.
66       let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
67       // Replace $r('app.media.startIcon') with the image resource file you use.
68       context.resourceManager.getMediaContent($r('app.media.startIcon').id, 0)
69         .then(async value => {
70           let media = value.buffer;
71           // Write data to the file in the media library.
72           await fileIo.write(file.fd, media);
73           await fileIo.close(file.fd);
74           promptAction.openToast({ message: 'Saved to album.'});
75         });
76     }
77     catch (error) {
78       const err: BusinessError = error as BusinessError;
79       console.error(`Failed to save photo. Code is ${err.code}, message is ${err.message}`);
80     }
81   }
82
83   @Entry
84   @Component
85   struct Index {
86     build() {
87       Row() {
88         Column({ space: 10 }) {
89           // Replace $r('app.media.startIcon') with the image resource file you use.
90           Image($r('app.media.startIcon'))
91             .height(400)
92             .width('100%')
93
94           SaveButton()
95             .padding({top: 12, bottom: 12, left: 24, right: 24})
96             .onClick((event: ClickEvent, result: SaveButtonOnClickResult) => {
97               if (result === SaveButtonOnClickResult.SUCCESS) {
98                 const context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
99                 // Obtain temporary permission to save the image without requesting the related permission for the application.
100                 savePhotoToGallery(context);
101               } else {
102                 promptAction.openToast({ message: 'Failed to set the permission.' });
103               }
104             })
105         }
106         .width('100%')
107       }
108       .height('100%')
109       .backgroundColor(0xF1F3F5)
110     }
111   }
112   ```
113