Chapter 4 of 12 ~16 min read

Camera & Filesystem

Side-by-side Cordova vs Capacitor — practical migration with working code.


Camera Plugin Migration

Cordova Camera
// Install: cordova plugin add cordova-plugin-camera

navigator.camera.getPicture(onSuccess, onFail, {
  quality: 80,
  destinationType: Camera.DestinationType.FILE_URI,
  sourceType: Camera.PictureSourceType.CAMERA,
  encodingType: Camera.EncodingType.JPEG,
  mediaType: Camera.MediaType.PICTURE,
  correctOrientation: true
});

function onSuccess(imageURI) {
  var image = document.getElementById('myImage');
  image.src = imageURI;
}
function onFail(message) {
  alert('Failed: ' + message);
}
Capacitor Camera
// Install: npm install @capacitor/camera

import {
  Camera, CameraResultType, CameraSource
} from '@capacitor/camera';

async function takePicture() {
  const image = await Camera.getPhoto({
    quality: 80,
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    correctOrientation: true,
  });
  // image.webPath works directly in <img src>
  const imgEl = document.getElementById('myImage');
  imgEl.src = image.webPath!;
}

// Pick from gallery:
async function pickPhoto() {
  const image = await Camera.getPhoto({
    resultType: CameraResultType.DataUrl,
    source: CameraSource.Photos,
  });
}

Permissions Declaration

Cordova — config.xml
<config-file target="AndroidManifest.xml" parent="/*">
  <uses-permission android:name=
    "android.permission.CAMERA" />
  <uses-permission android:name=
    "android.permission.READ_EXTERNAL_STORAGE"/>
</config-file>
<!-- Injected at build time — fragile -->
Capacitor — direct in AndroidManifest.xml
<!-- android/app/src/main/AndroidManifest.xml -->
<uses-permission
  android:name="android.permission.CAMERA" />
<uses-permission
  android:name="android.permission.READ_MEDIA_IMAGES"/>

<!-- You edit this file directly — no hooks! -->
<!-- Checked into git, always visible -->

Filesystem / File Plugin

Cordova File
// cordova-plugin-file — callback hell
window.resolveLocalFileSystemURL(
  cordova.file.dataDirectory,
  function(dirEntry) {
    dirEntry.getFile('notes.txt', { create: true },
      function(fileEntry) {
        fileEntry.createWriter(function(writer) {
          writer.onwriteend = function() {
            console.log('Saved!');
          };
          var blob = new Blob(['Hello World'], {
            type: 'text/plain'
          });
          writer.write(blob);
        });
      }
    );
  }
);
Capacitor Filesystem
import {
  Filesystem, Directory, Encoding
} from '@capacitor/filesystem';

// Write a file
await Filesystem.writeFile({
  path: 'notes.txt',
  data: 'Hello World',
  directory: Directory.Data,
  encoding: Encoding.UTF8,
});

// Read a file
const result = await Filesystem.readFile({
  path: 'notes.txt',
  directory: Directory.Data,
  encoding: Encoding.UTF8,
});
console.log(result.data);