Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. neithanmo
    N
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 1
    • Best 0
    • Groups 0

    neithanmo

    @neithanmo

    0
    Reputation
    13
    Profile views
    1
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    neithanmo Follow

    Latest posts made by neithanmo

    • How to upload photos just taken with the cordova camera plugin

      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 !!

      posted in Framework
      N
      neithanmo