Forum | Appery.io

I've added a camera component to a screen to allow users to take photos using the phone camera and submit them as part of a new profile entry.

1 - Now, I need to be able to upload the photos to the tiggzi database once the user submits the profile entry.

2 - Later on, when the user returns, I need to be able to display the photos he/she took and submitted before.

Any advice is appreciated for 1 and 2. Thank you.

We got an example that reads the file using File API and then uploads to Tiggzi database. The Tiggzi service is not used in this case, jQuery is used directly.

http://help.gotiggr.com/getting-start...

At the end of this example you will also find steps to make a request and display the image in your app.

Hmm, I've gone through the code in your example. It assumes the case where the user selects a file from a device's file directory and uploads it.

However, in my case, I need to upload the image that is taken directly from the phone's camera. I am using Tiggzi's camera component. The challenges I'm facing are:

1 - I have no idea what the file name of the image taken by the camera is. Without the file name, I can't upload using your File API as I can't specify the server URL.

2 - Even if I am able to do 1), I am not able to load the image that corresponds to this user when he/she returns to my app at a later time because Tiggzi adds this whole bunch of random numbers/text in front of the file name.

Any advice to overcome my ignorance?

This is such a basic camera/imaging functionality in a mobile app that I think should easily have a simple solution to. Thanks.

Hello!

1)

• Create project as shown here http://help.gotiggr.com/getting-start...

• create screen with Camera component and Button

• create JS asset "base64" with code (to incode data into base64 format)
  codevar Base64 = {

  // private property
  _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

  // public method for encoding
  encode : function (input) {
  var output = "&quot
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  var i = 0;

  input = Base64._utf8_encode(input);

  while (i < input&#46;length) {

  chr1 = input&#46;charCodeAt(i++);
  chr2 = input&#46;charCodeAt(i++);
  chr3 = input&#46;charCodeAt(i++);

  enc1 = chr1 >> 2;
  enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
  enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
  enc4 = chr3 & 63;

  if (isNaN(chr2)) {
  enc3 = enc4 = 64;
  } else if (isNaN(chr3)) {
  enc4 = 64;
  }

  output = output +
  this&#46;keyStr&#46;charAt(enc1) + this&#46;keyStr&#46;charAt(enc2) +
  this&#46;keyStr&#46;charAt(enc3) + this&#46;keyStr&#46;charAt(enc4);

  }

  return output;
  },

  &#47;&#47; public method for decoding
  decode : function (input) {
  var output = "&quot
  var chr1, chr2, chr3;
  var enc1, enc2, enc3, enc4;
  var i = 0;

  input = input&#46;replace(&#47;[A-Za-z0-9var Base64 = {

  // private property
  _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

  // public method for encoding
  encode : function (input) {
  var output = "";
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  var i = 0;

  input = Base64._utf8_encode(input);

  while (i < input.length) {

  chr1 = input.charCodeAt(i++);
  chr2 = input.charCodeAt(i++);
  chr3 = input.charCodeAt(i++);

  enc1 = chr1 2;
  enc2 = ((chr1 & 3) << 4) | (chr2 4);
  enc3 = ((chr2 & 15) << 2) | (chr3 6);
  enc4 = chr3 & 63;

  if (isNaN(chr2)) {
  enc3 = enc4 = 64;
  } else if (isNaN(chr3)) {
  enc4 = 64;
  }

  output = output +
  this.keyStr.charAt(enc1) + this.keyStr.charAt(enc2) +
  this.keyStr.charAt(enc3) + this.keyStr.charAt(enc4);

  }

  return output;
  },

  // public method for decoding
  decode : function (input) {
  var output = "";
  var chr1, chr2, chr3;
  var enc1, enc2, enc3, enc4;
  var i = 0;

  input = input.replace(/[A-Za-z0-9\+\/\=]/g, "");

  while (i < input.length) {

  enc1 = this.keyStr.indexOf(input.charAt(i++));
  enc2 = this.keyStr.indexOf(input.charAt(i++));
  enc3 = this.keyStr.indexOf(input.charAt(i++));
  enc4 = this.keyStr.indexOf(input.charAt(i++));

  chr1 = (enc1 << 2) | (enc2 4);
  chr2 = ((enc2 & 15) << 4) | (enc3 2);
  chr3 = ((enc3 & 3) << 6) | enc4;

  output = output + String.fromCharCode(chr1);

  if (enc3 != 64) {
  output = output + String.fromCharCode(chr2);
  }
  if (enc4 != 64) {
  output = output + String.fromCharCode(chr3);
  }

  }

  output = Base64._utf8_decode(output);

  return output;

  },

  // private method for UTF-8 encoding
  _utf8_encode : function (string) {
  string = string.replace(/\r\n/g,"\n");
  var utftext = "";

  for (var n = 0; n < string.length; n++) {

  var c = string.charCodeAt(n);

  if (c < 128) {
  utftext += String.fromCharCode(c);
  }
  else if((c 127) && (c < 2048)) {
  utftext += String.fromCharCode((c 6) | 192);
  utftext += String.fromCharCode((c & 63) | 128);
  }
  else {
  utftext += String.fromCharCode((c 12) | 224);
  utftext += String.fromCharCode(((c 6) & 63) | 128);
  utftext += String.fromCharCode((c & 63) | 128);
  }

  }

  return utftext;
  },

  // private method for UTF-8 decoding
  _utf8_decode : function (utftext) {
  var string = "";
  var i = 0;
  var c = c1 = c2 = 0;

  while ( i < utftext.length ) {

  c = utftext.charCodeAt(i);

  if (c < 128) {
  string += String.fromCharCode(c);
  i++;
  }
  else if((c 191) && (c < 224)) {
  c2 = utftext.charCodeAt(i+1);
  string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
  i += 2;
  }
  else {
  c2 = utftext.charCodeAt(i+1);
  c3 = utftext.charCodeAt(i+2);
  string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
  i += 3;
  }

  }

  return string;
  }

  }#47;\=]&#47;g, "");

  while (i < input&#46;length) {

  enc1 = this&#46;keyStr&#46;indexOf(input&#46;charAt(i++));
  enc2 = this&#46;keyStr&#46;indexOf(input&#46;charAt(i++));
  enc3 = this&#46;keyStr&#46;indexOf(input&#46;charAt(i++));
  enc4 = this&#46;keyStr&#46;indexOf(input&#46;charAt(i++));

  chr1 = (enc1 << 2) | (enc2 >> 4);
  chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
  chr3 = ((enc3 & 3) << 6) | enc4;

  output = output + String&#46;fromCharCode(chr1);

  if (enc3 != 64) {
  output = output + String&#46;fromCharCode(chr2);
  }
  if (enc4 != 64) {
  output = output + String&#46;fromCharCode(chr3);
  }

  }

  output = Base64&#46;_utf8_decode(output);

  return output;

  },

  &#47;&#47; private method for UTF-8 encoding
  _utf8_encode : function (string) {
  string = string&#46;replace(&#47;\r\n&#47;g,"\n");
  var utftext = "&quot

  for (var n = 0; n < string&#46;length; n++) {

  var c = string&#46;charCodeAt(n);

  if (c < 128) {
  utftext += String&#46;fromCharCode(c);
  }
  else if((c > 127) && (c < 2048)) {
  utftext += String&#46;fromCharCode((c >> 6) | 192);
  utftext += String&#46;fromCharCode((c & 63) | 128);
  }
  else {
  utftext += String&#46;fromCharCode((c >> 12) | 224);
  utftext += String&#46;fromCharCode(((c >> 6) & 63) | 128);
  utftext += String&#46;fromCharCode((c & 63) | 128);
  }

  }

  return utftext;
  },

  &#47;&#47; private method for UTF-8 decoding
  _utf8_decode : function (utftext) {
  var string = "&quot
  var i = 0;
  var c = c1 = c2 = 0;

  while ( i < utftext&#46;length ) {

  c = utftext&#46;charCodeAt(i);

  if (c < 128) {
  string += String&#46;fromCharCode(c);
  i++;
  }
  else if((c > 191) && (c < 224)) {
  c2 = utftext&#46;charCodeAt(i+1);
  string += String&#46;fromCharCode(((c & 31) << 6) | (c2 & 63));
  i += 2;
  }
  else {
  c2 = utftext&#46;charCodeAt(i+1);
  c3 = utftext&#46;charCodeAt(i+2);
  string += String&#46;fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
  i += 3;
  }

  }

  return string;
  }

  }/code

• create JS asset with code
  codefunction uploadFromCamera(filename, data, mimetype) {

  var serverUrl = 'https:&#47;&#47;api&#46;tiggzi&#46;com&#47;rest&#47;1&#47;db&#47;files&#47;' + filename;

  $&#46;ajax({
  type: "POST",
  beforeSend: function(request) {
  request&#46;setRequestHeader("X-Tiggzi-Database-Id", opa_settings['database_id']);
  request&#46;setRequestHeader("X-Tiggzi-Session-Token", localStorage&#46;getItem('_sessionToken'));
  &#47;&#47;request&#46;setRequestHeader("Content-Type", file&#46;type);

  Code: Select all

   }, 
   url: serverUrl, 
   data: data, 
   processData: false, 
   contentType: false, 
   success: function(data) { 
  
       // OPTIONAL, this is the file name under which the image was stored in database.... 
       //localStorage.setItem('db_file_name', filename);             

alert("Upload successful");
},
error: function(data) {
&#47;&#47; do something in case of an error&#46;&#46;&#46;
alert("File Upload error");
}
});
}/code

(please note - instead of opa_settings should be your_servise_name_settings)

• invoke Camera on button click

• on Success event on Camera run JS
  codevar imageDataBase64 = arguments[0]&#46;imageDataBase64;
  var rawData = Base64&#46;decode(imageDataBase64);
  uploadFromCamera('filename&#46;jpg', rawData); /code

  as result - after click on button and after you make the photo you should see the spinner and photo should be uploaded to DB

  2) To get file name which saved to DB - follow the tutorial http://help.gotiggr.com/getting-start... (there you'll find the line
  codelocalStorage&#46;setItem('db_file_name', file&#46;name); /code

  change this line to
  codelocalStorage&#46;setItem('db_file_name', data&#46;filename); /code

  result - after uploading file to local storage 'db_file_name' will be saved the file name and you can save that name into some collection in DB

Hi Marina,

I can't get it to work. Questions:

• Should the JS asset be called "base64" or "Base64"?

• You provided two sets of code. Should they all be in one JS asset ("base64"/"Base64") or should there be two separate JS assets?

• You said "(please note - instead of opa_settings should be your_servise_name_settings)". For "your_servise_name", should that be the name of the database, which is what the tutorial shows or something else?

  Thanks.

Hi Melvin,

JS asset name doesn't matter. It can be "base64" or "Base64", as you wish.
There can be one or separate JS assets.
When you import database services in the editor, new asset named
"{your_db_name}_settings" will be created. Please paste the correct name into your JS code instead of "opa_settings".

Hi Katya,

I've followed the above code as well as your clarification. However, the app is still unable to upload the photo taken using the iPhone to the Tiggzi database.

Not sure either where the problem lies.
Can you please look, if required, into my app?

Thanks.

Yes, please share your project with support@tiggzi.com so I can test it..

Hi Katya,

I've just shared the app. Please refer to:

Screen - "newThoughtScreen" screen
Button - "Test Photo Upload" button
Camera Service - "testCameraUpload" service component
JS Asset - "Base64"

Appreciate your help.
Thank you.

Thank you for sharing. We will test.