How to upload picture with ionic2?

#1

Hello everybody. Thirst thanks to skygear team for the great work, but my application work’s very good but the only problem i have is to send Assets!!! Any help please?

#2
#3

send_image

#4

Hi @arsene,

I make up the ionic example to showcase of how to take picture from camera and upload it to skygear as record you may check out https://github.com/skygear-demo/skygear-ionic

Specifically, following code is used to upload the image.

        this.skygearService.getSkygear()
          .then(() => {
            const picture = new skygear.Asset({
              name: "photo.jpeg",
              base64: imageData,
              contentType: 'image/jpeg',
            });
            return skygear.publicDB.save(new Note({
              picture: picture
            }));
          }).then((result) => {
            this.record = result;
            this.photoURL = result.picture.url;
            console.log(result);
          });

Notice that no need to specific "data:image/jpeg;base64," + imageData; as many tutorial on camera. The prefix is purely for display purpose.

I would suggest you can checkout the example project, change to your endpoint. Ensuring that the asset setting is correct and able to upload asset. After that you can sure the 400 is about application code or about configuration.

#5

Time to try it!!! Thanks

#6

conflict

#7

it work with the chat

#8

const cameraOptions: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true
};

this.camera.getPicture(cameraOptions).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64:
  const picture = new skygear.Asset({
    name: "avatar.jpeg",
    base64: imageData,
    contentType: 'image/jpeg',
  });
  const modifiedRecord = new skygear.UserRecord({
    '_id': 'user/' +  skygear.auth.currentUser._id,
    'avatar': picture
  });
  skygear.publicDB.save(modifiedRecord).then((record) => {
    console.log(record); // updated user record
  }).catch((error)=>{
    console.log(error);
  });
}, (err) => {
  // Handle error
});
#9

Hi guys, how to solve this ?

#10

Hi @arsene,

I tried this code and it works well on a new project.

I go into your database schema and found that the avatar field is text field without foreign key reference to the asset type.

This means you have once saved a text value in the asset column. Skygear cannot do the field type migration automatically for you since there may be data loss. That why you see Skyegar throw 409. If you click on the 409 requests and check the Response tab, you should see something like

{ status: 409,


 error: 

  { name: 'IncompatibleSchema',

    code: 114,

    message: 'conflicting schema {TypeString  {0 <nil>} text} => {TypeAsset  {0 <nil>} }' } }

To fix this problem. You can just drop the avatar column at DB Browser and run your script again.

You may go to the https://portal.skygear.io/app/{appname}/database/settings

Connect to PostgreSQL and run the SQL: ALTER TABLE "app_xxxxx"."user" DROP COLUMN "avatar";

#11

i’m unable to send message with Asset in chat :

this.camera.getPicture().then((imageData) => {
  const picture = new skygear.Asset({
    name: "photo.jpeg",
    base64: imageData,
    contentType: 'image/jpeg',
  });
  skygearChat.createMessage(this.data, null,null,picture)
  .then((result)=> {
    console.log('Message sent!', result);
    alert(result);
  }).catch((error)=>{
    console.log(error);
  });
  }, (err) => {
   console.log(err);
 });
#12

just fix it

    const cameraOptions: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation:true,
      saveToPhotoAlbum:true
    };
    this.camera.getPicture(cameraOptions).then((imageData) => {
      const picture = new skygear.Asset({
        name: "photo.jpeg",
        base64: imageData,
        contentType: 'image/jpeg',
      });
      skygearChat.createMessage(this.data, null,null,picture)
      .then((result)=> {
        console.log('Message sent!', result);
        alert(result);
      }).catch((error)=>{
        console.log(error);
      });
      }, (err) => {
       console.log(err);
     });