การใช้งาน File Plugin กับการบันทึกรูปภาพใน app ionic material

Android File System Layout

    $cordovaFile.getFreeDiskSpace()
      .then(function (success) {
         // success in kilobytes
      }, function (error) {
          // error
      });


    // CHECK
    $cordovaFile.checkDir(cordova.file.dataDirectory, "dir/other_dir")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });


    $cordovaFile.checkFile(cordova.file.dataDirectory, "some_file.txt")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });


    // CREATE
    $cordovaFile.createDir(cordova.file.dataDirectory, "new_dir", false)
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

    $cordovaFile.createFile(cordova.file.dataDirectory, "new_file.txt", true)
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });


    // REMOVE
    $cordovaFile.removeDir(cordova.file.dataDirectory, "some_dir")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

    $cordovaFile.removeFile(cordova.file.dataDirectory, "some_file.txt")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

    $cordovaFile.removeRecursively(cordova.file.dataDirectory, "")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });


    // WRITE
    $cordovaFile.writeFile(cordova.file.dataDirectory, "file.txt", "text", true)
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

    $cordovaFile.writeExistingFile(cordova.file.dataDirectory, "file.txt", "text")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });


    // READ
    $cordovaFile.readAsText(cordova.file.dataDirectory, $scope.inputs.readFile)
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });


    // MOVE
    $cordovaFile.moveDir(cordova.file.dataDirectory, "dir", cordova.file.tempDirectory, "new_dir")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

    $cordovaFile.moveFile(cordova.file.dataDirectory, "file.txt", cordova.file.tempDirectory)
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });


    // COPY
    $cordovaFile.copyDir(cordova.file.dataDirectory, "dir", cordova.file.tempDirectory, "new_dir")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

    $cordovaFile.copyFile(cordova.file.dataDirectory, "file.txt", cordova.file.tempDirectory, "new_file.txt")
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

cordova plugin add cordova-plugin-file

<ion-view view-title="Profile">
    <ion-content ng-class="{expanded:$scope.isExpanded}">
        <div class="hero slide-up" style="background-image: url('img/profile-bg.jpg');">
            <div class="content">
                <div id="avatar_img" class="avatar" ng-click="changeprofile()"
                     style="background-image: url('{{fileProfile}}');"
                ></div>
                <h3><a class="light">{{member_user}}</a></h3>
                <h4>{{member_phone}}</h4>
            </div>
        </div>
        <div class="padding">
            File URI: {{fileProfile}}<br>
            FreeDiskSpace: {{diskPreeSpace}}<br>
            Data File: {{dataFile}}
            <br>
            <img id="show_img_avatar" src="" style="width:200px;height: 200px;">
        </div>
    </ion-content>
</ion-view>

.controller('ProfileCtrl', function(
    $scope, $stateParams, $timeout,
    ionicMaterialMotion, ionicMaterialInk, $ionicPlatform,
    $cordovaSpinnerDialog, $cordovaToast, $cordovaActionSheet, $cordovaCamera,
    $cordovaFile) {

    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.isExpanded = false;
    $scope.$parent.setExpanded(false);
    $scope.$parent.setHeaderFab(false);
    $scope.$parent.hasShadow();


    // กำหนดตัวแปรสำหรับค่าเริ่มต้นของข้อมูลหน้าโพรไลฟ์
    $scope.member_user = '';
    $scope.member_phone = '';

    // กำหนดให้แสดงเมนูสมาชิก
    $scope.$parent.setMemberMenu(true);

    // สร้างฟังก์ชั่นสำหรับเรียกใช้ Toast plugin
    $scope.showToast = function(str, duration, position){
        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            return $cordovaToast
                .show(str, duration, position)
                .then(function(success) {
                    // success
                }, function (error) {
                    // error
                });
        });
    };

    var db = null;

    $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
        // ตรวจสอบและทำการเชื่อมต่อกับ db
        db = window.sqlitePlugin.openDatabase({
            name: 'my.db', location: 'default'
        }, function (db) {
            // เชื่อมต่อ db สำเร็จ
            $scope.showToast('Open DB Success','long','bottom');

            // แสดง spin dialog plugin จะใช้หรือไม่ก็ได้ นำมาใช้เผื่อใครไปประยุกต์เพิ่ม
            $cordovaSpinnerDialog.show(null,"รอสักครู่..กำลังโหลดข้อมูล"); // แสดง loading
            $timeout(function() { // ซ่อนอัตโนมัติใน 300 มิลลิวินาที
                $cordovaSpinnerDialog.hide();
            }, 300);

            // เริ่มทำงานของคำสั่ง db
            db.transaction(function (tx) {
                // เตรียมคำสั่ง sql ดึงข้อมูลสมาชิกอิงจาก member_id ที่เราเก็บไว้ใน $scope หลัก
                var query = "SELECT member_user, member_phone" +
                    " FROM member WHERE member_id = ?";
                // ดึงค่า member_id จาก $scope หลักด้วยฟังก์ชั่น getMemberID()
                var id_member = $scope.$parent.getMemberID();

                // ทำคำสั่ง sql ดึงข้อมูลตาม member_id
                tx.executeSql(query, [id_member], function (tx, resultSet) {
                        // ถ้าพบข้อมูล
                        if(resultSet.rows.length){
                            // นำข้อมูลที่ได้ มาไว้ในตัวแปร member_user และ member_phone
                            // เพื่อแสดงในหน้า profile
                            $scope.member_user = resultSet.rows.item(0).member_user;
                            $scope.member_phone = resultSet.rows.item(0).member_phone;
                        }
                        $cordovaSpinnerDialog.hide();
                    },
                    function (tx, error) {
                        $scope.showToast('SELECT error: ' + error.message,'long','bottom');
                    });
            }, function (error) {
                $scope.showToast('transaction error: ' + error.message,'long','bottom');
            }, function () {
                $scope.showToast('transaction ok','long','bottom');
            });
        }, function (error) {
            $scope.showToast('Open database ERROR: ' + JSON.stringify(error),'long','bottom');
        });
    });

    // สร้างตัวแปรสำหรับ เก็บค่าตำแหน่งของไฟล์รูปที่เราได้
    $scope.fileProfile = "";
    
    // กำหนด options การตั้งค่าการแสดงเมนูตัวเลือกใน action sheet
    var options = {
        title: 'เปลี่ยนรูปโพรไฟล์?',
        buttonLabels: ['ถ่ายรูป', 'เลือกจากอัลบั้ม'],
        addCancelButtonWithLabel: 'ยกเลิก',
        androidEnableCancelButton : true,
        winphoneEnableCancelButton : true
    };

    // สร้างฟังก์ชั่นสำหรับแสดง action sheet ที่เราเรียกใช้ในไฟล์ profile.html
    $scope.changeprofile = function(){

        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            // เรียกให้ action sheet แสดง
            $cordovaActionSheet.show(options)
                .then(function(btnIndex) {
                    // เมื่อแสดงแล้ว และเลือกเมนู หรือยกเลิก คืนค่า key
                    var index = btnIndex;
                    //alert(index);// ทดสอบแสดงค่า key

                    var pic_source = Camera.PictureSourceType.CAMERA;
                    if(index==1){
                        pic_source = Camera.PictureSourceType.CAMERA;
                    }
                    if(index==2){
                        pic_source = Camera.PictureSourceType.SAVEDPHOTOALBUM;
                    }

                    if(index!=3){

                        var options = {
                            quality: 100,
                            destinationType: Camera.DestinationType.FILE_URI,
                            sourceType: pic_source,
                            allowEdit: true,
                            encodingType: Camera.EncodingType.JPEG,
                            targetWidth: 200,
                            targetHeight: 200,
                            mediaType: Camera.MediaType.PICTURE,
                            popoverOptions: CameraPopoverOptions,
                            saveToPhotoAlbum: false,
                            correctOrientation:true
                        };

                        $cordovaCamera.getPicture(options).then(function(imageData) {
                            $scope.fileProfile = imageData;
                            // var imageAvatar = document.getElementById('avatar_img');
                            // imageAvatar.style.backgroundImage = "url('"+imageData+"')";

                            $scope.dataFile = "";
                            var dataFileVal = "";
                            var nameAvatarFile = 'avatar'+$scope.sesMemberID+'.jpg';
                            $scope.diskPreeSpace = null;
                            $cordovaFile.getFreeDiskSpace()
                                .then(function (dataFreeSpace) {
                                    $scope.diskPreeSpace = dataFreeSpace;
                                    // alert(dataFreeSpace);
                                    // success in kilobytes
                                }, function (error) {
                                    // error
                                });

                            // เช็คว่ามีโฟลเดอร์ avatar ไหม
                            $cordovaFile.checkDir(cordova.file.dataDirectory,
                                "avatar")
                                .then(function (success) { // ถ้ามีโฟลเดอร์ avatar
                               //     alert("OK checkDRI:"+JSON.stringify(success));

                                    // เช็คว่ามีไฟล์ตามตัวแปร nameAvatarFile อยู่ในโฟลเดอร์ avatar ไหม
                                    $cordovaFile.checkFile(cordova.file.dataDirectory,
                                        'avatar/'+nameAvatarFile)
                                        .then(function (success) { // ถ้ามีไฟล์
                                       //     alert("OK checkFILE:"+JSON.stringify(success));

                                            // ทำการลบไฟล์เดิมทิ้งก่อน
                                            $cordovaFile.removeFile(cordova.file.dataDirectory,
                                                    'avatar/'+nameAvatarFile)
                                                .then(function (success) {
                                                //    alert("OK removeFILE:"+JSON.stringify(success));

                                                    // หา path ไฟล์ และชื่อไฟล์ ที่ถ่ายมาใหม่ หรือเลือกจากรูปในอัลบั้ม
                                                    // ได้ srcDir คือโฟลเดอร์ srcFile คือชื่อไฟล์
                                                    var srcDir = imageData.substring(0, imageData.lastIndexOf('/') + 1);
                                                    var srcFile = imageData.substring(imageData.lastIndexOf('/') + 1, imageData.length);
                                                    if(srcFile.indexOf('?')!=-1){ // ถ้าชื่อไฟล์มีเครื่องหมาย ? ต่อท้ายให้ตัดออก
                                                        srcFile = srcFile.substring(0, srcFile.lastIndexOf('?'));
                                                    }
                                                    // path และชื่อไฟล์ที่ copy มาใหม่
                                                    var destFile = 'avatar/'+nameAvatarFile;

                                                  //  alert("Copying from : " + srcDir + srcFile);
                                                //    alert("Copying to : " + cordova.file.dataDirectory + destFile);

                                                    // ทำการ copy ไฟล์จากโฟลเดอ์ cache หรือไฟล์ที่ได้จากการถ่ายรูปใหม่ หรือเลือกรูป
                                                    $cordovaFile.copyFile(srcDir, srcFile,
                                                        cordova.file.dataDirectory, destFile).then(function(success) {
                                                 //       alert("OK copyFILE:"+JSON.stringify(success));
                                                        var avatarData = cordova.file.dataDirectory + destFile;
                                                        $scope.fileProfile = avatarData+'?'+(new Date().getTime());
                                                        // แสดงรูป
                                                        document.getElementById('show_img_avatar').src = avatarData+'?'+(new Date().getTime());
                                                    }, function(error) {
                                                        // alert("ERR copyFILE:"+JJSON.stringify(error));
                                                    });

                                                }, function (error) {
                                                    // alert("ERR removeFILE:"+JSON.stringify(success));
                                                });


                                        }, function (error) { // ถ้ายังไม่เคยมีไฟล์ตามตัวแปร nameAvatarFile อยู่ในโฟลเดอร์ avatar
                                           // alert("ERR checkFILE: "+JSON.stringify(error));

                                            // หา path ไฟล์ และชื่อไฟล์ ที่ถ่ายมาใหม่ หรือเลือกจากรูปในอัลบั้ม
                                            // ได้ srcDir คือโฟลเดอร์ srcFile คือชื่อไฟล์
                                            var srcDir = imageData.substring(0, imageData.lastIndexOf('/') + 1);
                                            var srcFile = imageData.substring(imageData.lastIndexOf('/') + 1, imageData.length);
                                            if(srcFile.indexOf('?')!=-1){ // ถ้าชื่อไฟล์มีเครื่องหมาย ? ต่อท้ายให้ตัดออก
                                                srcFile = srcFile.substring(0, srcFile.lastIndexOf('?'));
                                            }
                                            // path และชื่อไฟล์ที่ copy มาใหม่
                                            var destFile = 'avatar/'+nameAvatarFile;

                                            //  alert("Copying from : " + srcDir + srcFile);
                                            //    alert("Copying to : " + cordova.file.dataDirectory + destFile);

                                            // ทำการ copy ไฟล์จากโฟลเดอ์ cache หรือไฟล์ที่ได้จากการถ่ายรูปใหม่ หรือเลือกรูป
                                            $cordovaFile.copyFile(srcDir, srcFile,
                                                cordova.file.dataDirectory, destFile).then(function(success) {
                                                //       alert("OK copyFILE:"+JSON.stringify(success));
                                                var avatarData = cordova.file.dataDirectory + destFile;
                                                $scope.fileProfile = avatarData+'?'+(new Date().getTime());
                                                // แสดงรูป
                                                document.getElementById('show_img_avatar').src = avatarData+'?'+(new Date().getTime());
                                            }, function(error) {
                                                // alert("ERR copyFILE:"+JJSON.stringify(error));
                                            });

                                        });



                                    // success
                                }, function (error) { // ถ้ายังไม่เคยมีโฟลเดอร์ avatar
                                    if(error.code==1){ // แจ้ง error ว่าไม่พบโฟลเดอร์

                                        // สร้างโฟลเดอร์ชื่อ avatar ขึ้นมาใหม่
                                        $cordovaFile.createDir(cordova.file.dataDirectory,
                                            "avatar", false)
                                            .then(function (success) {

                                                // หา path ไฟล์ และชื่อไฟล์ ที่ถ่ายมาใหม่ หรือเลือกจากรูปในอัลบั้ม
                                                // ได้ srcDir คือโฟลเดอร์ srcFile คือชื่อไฟล์
                                                var srcDir = imageData.substring(0, imageData.lastIndexOf('/') + 1);
                                                var srcFile = imageData.substring(imageData.lastIndexOf('/') + 1, imageData.length);
                                                if(srcFile.indexOf('?')!=-1){ // ถ้าชื่อไฟล์มีเครื่องหมาย ? ต่อท้ายให้ตัดออก
                                                    srcFile = srcFile.substring(0, srcFile.lastIndexOf('?'));
                                                }
                                                // path และชื่อไฟล์ที่ copy มาใหม่
                                                var destFile = 'avatar/'+nameAvatarFile;

                                                //  alert("Copying from : " + srcDir + srcFile);
                                                //    alert("Copying to : " + cordova.file.dataDirectory + destFile);

                                                // ทำการ copy ไฟล์จากโฟลเดอ์ cache หรือไฟล์ที่ได้จากการถ่ายรูปใหม่ หรือเลือกรูป
                                                $cordovaFile.copyFile(srcDir, srcFile,
                                                    cordova.file.dataDirectory, destFile).then(function(success) {
                                                    //       alert("OK copyFILE:"+JSON.stringify(success));

                                                    var avatarData = cordova.file.dataDirectory + destFile;
                                                    $scope.fileProfile = avatarData+'?'+(new Date().getTime());
                                                    // แสดงรูป
                                                    document.getElementById('show_img_avatar').src = avatarData+'?'+(new Date().getTime());
                                                }, function(error) {
                                                    // alert("ERR copyFILE:"+JJSON.stringify(error));
                                                });


                                            }, function (error) {
                                         //       alert("ERR:"+JSON.stringify(error));
                                                // error
                                            });

                                    }
                                    // error
                                });

                        }, function(err) {
                            // error
                        });
                    }


                });
        });

    };

    $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
        // กำหนดรูปแบบชื่อรูปโพรไฟล์ของสมาชิกแต่ละตนคือ avatar{ไอดีสมาชิก}.jpg
        var nameAvatarFile = 'avatar'+$scope.sesMemberID+'.jpg';
        // เช็คว่ามีรูปโพรไฟล์ของสมาชิกที่กำลังใช้งานอยู่หรือไม่
        $cordovaFile.checkFile(cordova.file.dataDirectory, 'avatar/'+nameAvatarFile)
            .then(function (success) {
            //    alert("checkFILE: "+JSON.stringify(success));
            //   alert(cordova.file.dataDirectory+success.fullPath);
                var avatarData = cordova.file.dataDirectory+'avatar/'+nameAvatarFile;
                $scope.fileProfile = avatarData+'?'+(new Date().getTime());
                document.getElementById('show_img_avatar').src = avatarData+'?'+(new Date().getTime());
            }, function (error) {
            //    alert("ERR checkFILE: "+JSON.stringify(error));
            });
    });



    $timeout(function() {
        ionicMaterialMotion.slideUp({
            selector: '.slide-up'
        });
    }, 300);

    $timeout(function() {
        ionicMaterialMotion.fadeSlideInRight({
            startVelocity: 3000
        });
    }, 700);

    ionicMaterialInk.displayEffect();
})

.controller('ProfileCtrl', function(
    $scope, $stateParams, $timeout,
    ionicMaterialMotion, ionicMaterialInk, $ionicPlatform,
    $cordovaSpinnerDialog, $cordovaToast, $cordovaActionSheet, $cordovaCamera,
    $cordovaFile) {

C:\phonegap\learn004>phonegap build android