How to use ProfilePictureUploader Component

IOS

• iOS requires the following usage description be added and filled out for your app in Info.plist:

    <key>NSCameraUsageDescription</key>
    <string>To capture photos and videos within the app.</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>To save captured photos to the device's photo library.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>To select and display photos from the device's photo library.</string>

• add depedencies yarn add @capacitor/camera, yarn add cordova-plugin-file and yarn add cordova-plugin-file-transfer@https://github.com/apache/cordova-plugin-file-transfer to your project on the frontend

Android

• Android requires the following permissions be added to your AndroidManifest.xml:

    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Custom Action

If you want build a custom action layout for ProfilePictureUploader Component, you can use renderAction props and put the jsx element. Example:

    <ProfilePictureUploader
        renderAction={
            <Button
                variant="outlined"
                className={style.customButton}
                startIcon={
                    <img
                        src="/images/uploadToCloud.png"
                        alt="upload to cloud"
                        width="35"
                        height="auto"
                    />
                }
            >
                Upload Photo
            </Button>
        }
    />