Hello
I am trying to upload a picture that I just take with the Cordova camera plugin.
this plugin has two option, passing either the path to the picture or the encoded image through the onSuccess callback. Of course, passing the encoded image is very expensive, so I chose passing it as a path.
but how can I upload the image using only the path?? I can’t create or even open the image in order to have access to the image bytes.
Additionally, I created an Uploader component which just wrapped the QUploader component and I am able to upload pictures with it.
but What I want is upload the picture I just take directly during the onSuccess camera’s callback.

for example:

<template>
  <div class="row justify-center items-center">
    <q-btn icon="add_a_photo" size="sm" color="primary" round @click="captureImage" />
  </div>
</template>

<script>
export default {
  name: 'Camera',
  data () {
    return {
      imageSrc: '',
      opts: undefined
    }
  },

  methods: {
    defaultCameraOptions () {
      var opts = {
          quality: 80,
          destinationType: Camera.DestinationType.FILE_URI,
          sourceType: Camera.PictureSourceType.CAMERA,
          mediaType: Camera.MediaType.PICTURE,
          encodingType: Camera.EncodingType.JPEG,
          cameraDirection: Camera.Direction.BACK,
          allowEdit: true,
          correctOrientation: true,  //Corrects Android orientation quirks
          targetWidth: 300,
          targetHeight: 400
      }
      return opts
    },

    captureImage (file) {
      if(this.opts === undefined){
        this.opts = this.defaultCameraOptions()
      }
      navigator.camera.getPicture(this.cameraOnSuccess, this.cameraOnError, this.opts)
    },

    cameraOnSuccess (imageUrl) {
      this.$store.dispatch('camera/newImage', imageUrl)
      console.log('path ' + imageUrl)
      // Notify to the parent or any listener that there is a new picture
      this.emitEvent(imageUrl)
    },

    emitEvent (url) {
      console.log('emitting new picture event')
      this.$emit('newpicture', url)
    },

    cameraOnError (msg) {
      console.log('error trying to access the camera ' + msg)
    }
  }
}
</script>

above, my camera component which would emit an event once the picture has been taken successfully, the parent layout would be connect to that event like this:

<camera ref="cameraRef" @newpicture="processPicture"></camera>

the processPicture(path) will receive the path to where the picture was saved.
and it is where I want to implement the uploading procedure directly, without having to open my QUploader component and select that picture.
so that, my processPicture method could be something like(it is not working, because the server is receiving an string)

     processPicture (path) {
          console.log('path ' + path)
          // path file:///storage/emulated/0/Android/data/myApp.app/cache/1566412024593.jpg
          var endpoint = 'myEndpoint....'
          // Fills the form data to be uploaded to the server with the picture
          const fd = new FormData() // I know, It won't work
          fd.append('file', path)
          axiosInstance.defaults.headers.common['authorization'] = 'Bearer ' + localStorage.getItem('token')
          axiosInstance.post(settingsInstance[0].baseAPIURL + endpoint, fd, 
          {
            headers: { 'Content-Type': 'multipart/form-data' }
          })
          .then(res => {
            console.log('photo uploading done !')
          }).catch((err) => alert(err) )
        }

Does anybody have some ideas? What might be the best approach?

Thanks !!