CODEWITHSUNDEEP
nativescriptnativescript-vue
myoda999
myoda999

Reputation: 355

How to get file from Image in NativeScript and upload it to server

I have an component that displays and image either taken by camera or selected from gallery. The point is when a user clicks the upload button i should send that Image to my server, but i am having difficulties extracting the file from the Image component.

 <Image ref="profileImage" borderRadius="100" width="150" height="150" marginTop="20" stretch="aspectFill" :src="profileImage" />

And i have two functions for picking an image or capturing one

  capture: function() {
    var isAvailable = camera.isAvailable();
    if (isAvailable) {
      var options = {
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: false,
        cameraFacing: 'front'
      };
      var self = this;
      var imageModule = require("tns-core-modules/ui/image");
      camera.requestPermissions().then(
        function success() {
          camera.takePicture(options)
            .then(function(imageAsset) {
              self.profileImage = imageAsset;
            }).catch(function(err) {
              console.log("Error -> " + err.message);
            });
        },
        function failure() {
          // permission request rejected
        }
      );
    }
  },
  pick() {
    var self = this;
    let context = imagepicker.create({
      mode: 'single',
      mediaType: 'image'
    });
    context.authorize()
      .then(function() {
        return context.present();
      })
      .then(selection => {
        selection.forEach(selected => {
          self.profileImage = selected;
        });
      }).catch(function(e) {
        console.log('error in selectPicture', e);
      });

  },

What i need to do next is get the uploaded image and send it to server but i can't seem to find an options for that, i have the src of the and that's it in this case...

Upvotes: 1

Views: 896

Answers (1)

Manoj
Manoj

Reputation: 21908

You can simply get ImageSource from ImageAsset and write it as file in data or temp directory, then upload it to server.

const imageSourceModule = require("tns-core-modules/image-source");
const fileSystemModule = require("tns-core-modules/file-system");

function uploadAsset(asset) {
   imageSourceModule.fromAsset(asset)
      .then(function(imageSource) {
          var folderDest = fileSystemModule.knownFolders.documents();
          var pathDest = fileSystemModule.path.join(folderDest.path, "test.png");
          var saved = imageSource.saveToFile(pathDest, "png");
          if (saved) {
             console.log("Image saved successfully!");
             // Now file is written at path `pathDest`
          }
      }).catch(function(err) {
         console.log(err);
      });
}

....

uploadAsset(profileImage);

Learn more at docs

Upvotes: 2

Related Questions