1# Saving Media Assets
2
3When users wish to save images, videos, or similar files to Gallery, it is not necessary for the application to request the ohos.permission.WRITE_IMAGEVIDEO permission. Instead, the application can use the [SaveButton](#creating-a-media-asset-using-savebutton) or [authorization pop-up](#saving-a-media-asset-using-an-authorization-pop-up) to save the media assets to Gallery.
4
5## Creating a Media Asset Using SaveButton
6
7For details about the **SaveButton** component, see [SaveButton](../../reference/apis-arkui/arkui-ts/ts-security-components-savebutton.md).
8
9This following walks you through on how to create an image using the **SaveButton** security component.
10
11**How to Develop**
12
131. Set the attributes of the security component.
142. Create a button with the security component.
153. Use [MediaAssetChangeRequest.createImageAssetRequest](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#createimageassetrequest11) and [PhotoAccessHelper.applyChanges](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#applychanges11) to create an image asset.
16
17```ts
18import { photoAccessHelper } from '@kit.MediaLibraryKit';
19
20@Entry
21@Component
22struct Index {
23    saveButtonOptions: SaveButtonOptions = {
24    icon: SaveIconStyle.FULL_FILLED,
25    text: SaveDescription.SAVE_IMAGE,
26    buttonType: ButtonType.Capsule
27  } // Set the attributes of the security component.
28
29  build() {
30    Row() {
31      Column() {
32        SaveButton(this.saveButtonOptions) // Create a security component.
33          .onClick(async (event, result: SaveButtonOnClickResult) => {
34             if (result == SaveButtonOnClickResult.SUCCESS) {
35               try {
36                 let context = getContext();
37                 let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
38                 // Ensure that the asset specified by fileUri exists.
39                 let fileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/test.jpg';
40                 let assetChangeRequest: photoAccessHelper.MediaAssetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(context, fileUri);
41                 await phAccessHelper.applyChanges(assetChangeRequest);
42                 console.info('createAsset successfully, uri: ' + assetChangeRequest.getAsset().uri);
43               } catch (err) {
44                 console.error(`create asset failed with error: ${err.code}, ${err.message}`);
45               }
46             } else {
47               console.error('SaveButtonOnClickResult create asset failed');
48             }
49          })
50      }
51      .width('100%')
52    }
53    .height('100%')
54  }
55}
56```
57
58In addition to specifying the asset in the application sandbox directory using **fileUri**, you can add the asset using ArrayBuffer. For details, see the [addResource](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#addresource11-1).
59
60## Saving a Media Asset Using an Authorization Pop-Up
61
62This following walks you through on how to save an image using an authorization pop-up.
63
64**How to Develop**
65
661. Specify the URI of the [application file](../../file-management/app-file-access.md) in the application sandbox.
672. Set parameters such as the file name extension, image file type, title (optional) and image subtype (optional) of the image to save.
683. Call [showAssetsCreationDialog](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#showassetscreationdialog12) to obtain the target [media file URI](../../file-management/user-file-uri-intro.md#media-file-uri) through an authorization pop-up.
694. Write the image content from the application sandbox directory to the file specified by the target URI in the media library.
70
71```ts
72import { photoAccessHelper } from '@kit.MediaLibraryKit';
73import { fileIo } from '@kit.CoreFileKit';
74
75let context = getContext(this);
76let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
77
78async function example() {
79  try {
80    // Specify the URI of the image in the application sandbox directory to be saved.
81    let srcFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/test.jpg';
82    let srcFileUris: Array<string> = [
83      srcFileUri
84    ];
85    // Set parameters such as the file name extension, image file type, title (optional) and image subtype (optional) of the image to save.
86    let photoCreationConfigs: Array<photoAccessHelper.PhotoCreationConfig> = [
87      {
88        title: 'test', // This parameter is optional.
89        fileNameExtension: 'jpg',
90        photoType: photoAccessHelper.PhotoType.IMAGE,
91        subtype: photoAccessHelper.PhotoSubtype.DEFAULT, // This parameter is optional.
92      }
93    ];
94    // Obtain the target URI in the media library based on pop-up authorization.
95    let desFileUris: Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
96    // Write the image content from the application sandbox directory to the file specified by the target URI in the media library.
97    let desFile: fileIo.File = await fileIo.open(desFileUris[0], fileIo.OpenMode.WRITE_ONLY);
98    let srcFile: fileIo.File = await fileIo.open(srcFileUri, fileIo.OpenMode.READ_ONLY);
99    await fileIo.copyFile(srcFile.fd, desFile.fd);
100    fileIo.closeSync(srcFile);
101    fileIo.closeSync(desFile);
102    console.info('create asset by dialog successfully');
103  } catch (err) {
104    console.error(`failed to create asset by dialog successfully errCode is: ${err.code}, ${err.message}`);
105  }
106}
107```
108