Pictures uploaded in iOS display upside down in Android

Hi,

I have an Ionic app, using Cordova iOS 4.5.1.

For users to upload pictures, I am using the FileDB__files_upload_service from the plugin.

I installed the IPA in different iOS devices and found that pictures uploaded from any iOS device display upside down or sideways on Android devices or on a web browser. This is obviously a problem as I need the pictures to display properly for all users.

Were you aware of this issue and is there a solution for this?

Thanks,
Rodrigo
1 person has
this question
+1
Reply
  • Hello Rodrigo,

    Please check the request parameter "correctOrientation" of your camera service. What value do you use there? Please set it to "true": https://github.com/apache/cordova-plu...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,

    Can you remind me how to get to those options?

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Galyna,

    Thanks for the example. However, I am not using the Camera_getPicture service in my app. I am using the FileDB__files_upload_service to upload pictures into the Files collection.

    Overall, the FileDB_files_upload service works well, except for the orientation of pictures on some devices.

    Are you guys telling me that I need to use the Camera_getPicture service instead of the FileDB_files_upload service?

    Is there no solution to my issue that allows me to keep using the FileDB_files_upload service?

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • The Camera service just takes a photo or reads the local file. You still need to use some upload service for it.

    Could you please clarity how you read images to upload?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Serhii,

    I am using the FileDB_files_upload_service from the plugin Appery.io provides:

    1. The filepointer is used to select an image.
    2. Once the image is selected, the "upload" butto is pressed, calling the service.
    3. The FileDB_files_upload_service runs. Saving the image as binary on https://api.appery.io/rest/1/db/files, content type "Data".
    4. Then, I use the response's fileName and URL to access the image from the app.

    Is the way described above not the best way? If not, what is the best recommended way?

    I tried implementing the Camera_getPicture service and I was able to get the base64 string. I just don't know how to save that as a file on the DB and make it display as a picture on the app.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • You can use the base64 image from the camera in the same service.

    Please see the tutorial on how to upload images from a camera to the database: https://docs.appery.io/docs/samples-p...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,

    Could you give me an example of how to display a base64 image on the app?

    The tutorial you provided has a similar solution that I implemented without base64.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • You just need to add a mapping arrow from imageDataBase64 property of the camera response to your image component:

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,
    Thanks for your response. The image you provided is for a JQuery app so it doesn't help me since I'm working on an Ionic app.

    1. In my Ionic app, I am able to map the Camera_getPicture service's response "image" to a string scope variable and display the Base64 string on the page. However, when I call the variable from the image component, it fails to display the picture.

    2. I was also unable to save the Base64 string on the database "Files" collection. I tried calling the Base64 variable from the "FileDB__files_upload_service" but it failed to save into the database.

    If you can, please provide a detailed example that shows how to implement the Camera_getPicture in an Ionic app. I'm sure it's very simple for you but with the lack of documentation available, it's been very difficult and frustrating here.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • 1. Add the Scope variable "base64" with a type = string to your page

    2. Add a mapping from camera service to that variable

    3. Add the image component to your page

    4. Add the property ng-src with your base64 variable to that image
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Serhii,

    Thanks for the example. It helped me figure out that I was missing the curly brackets in the ng-src of the image.

    Now, I need to save the image in the database. I mapped the "base64" variable to FileDB__files_upload_service's "data" but the upload failed.

    You mentioned earlier (above) that I could use the base64 data in FileDB__files_upload_service. Can you tell me what I did wrong?

    This is my upload function:
    var requestData = {};
    requestData = (function mapping4755($scope) {
    var requestData = {};
    requestData.headers = {};
    requestData.data = {};
    var user_scope = $scope.user;
    var base64_scope = $scope.base64;
    requestData.headers['X-Appery-Session-Token'] = user_scope.session;
    requestData.data = base64_scope;
    return requestData;
    })($scope);
    Apperyio.get("FileDB__files_upload_service")(requestData).then(
    function(success) { // success callback
    alert("success");
    },
    function(error) { // callback to handle request error
    alert("failed");
    },
    function(notify) { // notify callback, can fire few times
    });

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Please try to debug your app remotely using Weinre debugger (https://docs.appery.io/docs/weinre-de...).

    Please check if there are any errors in the Weinre console
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,
    There are no errors in the Weinre console.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Please share (https://docs.appery.io/docs/teams-sha...) your app with support@appery.io and provide us with the following information:

    1) App name
    2) Test credentials if login functionality is implemented in your app
    3) Detailed steps to reproduce the issue
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,

    I shared the app with you.
    1) Name: Camera
    2) Username: Ben
    Password: 123
    3) Steps:
    1. Click on "Get" to run the "Camera_getPicture" service.
    2. The picture displays in the image element and the Base64 is shown at the
    bottom of the page.
    3. Click on "Save" to run the "uploadBase64" function. This function runs the
    "FileDB__files_upload_service".

    * I mapped the Base64 variable to the service but it is failing.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Please look at this example how to upload an image using the Server Code script: https://getsatisfaction.com/apperyio/...

    You can run it from your application instead of the existing one
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,
    You have me going in circles. Why did you ask me to share my app with you? Did you look at it? What conclusion did you get to by looking at it? The link you last sent me is a totally different way of uploading an image (as far as I can tell). It's been 20 days since I opened this topic and I haven't gotten anywhere.

    Why are you recommending the server code script now? Does that script work with the Camera_getPicture service? Is that script used instead of the FileDB__files_upload_service?

    As you can see, I have more questions than before. I will appreciate answers that will make things clearer and help me move forward.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • 1. Please see the function below to upload files:
    function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
    u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
    }
    var requestData = Apperyio.EntityAPI('FileDB__files_upload_service.request');
    var user_scope = $scope.user;
    var files_scope = $scope.files;
    var formData = new FormData();
    var file = dataURLtoFile($scope.base64, 'hello.png');

    requestData.data = _.pluck($scope.files, 'filepointer');
    requestData.headers = {};
    requestData.headers['X-Appery-Session-Token'] = $scope.user.session;

    Apperyio.get("FileDB__files_upload_service")(requestData).then(

    function(success){
    alert('All files has been successfully uploaded.');
    },
    function(error){
    alert(JSON.stringify(error));
    },
    function(notify){
    });


    2. Also, please remove the declaration of the variable "user" from all pages. It must be defined only once, on the page "init"

    3. Please use the code below on the success of the login
    $scope.user.session = success.data.session;
    Apperyio.navigateTo("UploadFile_Camera");

    instead of the simple navigation to the next page
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,

    Thanks for your response and suggestions.

    I created a new scope function with the code you provided. It seems that we are getting closer but it's not working yet. I am getting a "cannot consume content type" error. I'm attaching two images of the same error so you can see the full text.




    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,

    1) Camera
    2) Username:ben, Password:123
    3) Same as before.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Please do not change the provided code and remove the scope variable "user" from the page "UploadFile_Camera". It works fine for me:
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,

    Thanks for your response. If I use the code you provided without changing it, it doesn't really save the file even though the alert says "all files have been successfully uploaded". Nothing is being saved in the database. The reason is that you are calling the filepointer and $scope.files, which I'm not using because I'm using the Camera_getPicture service. So the service is running and successfully uploading zero files.

    I added your unedited version to the app and called it "saveBase64_Serhii". Perhaps you can compare it with "saveBase64_Rodrigo". The only difference is that I am trying to get requestData.data from the "file" variable you defined as response to the "dataURLtoFile" instead of $scope.files and filepointer.

    * I am sharing my database with you so you can verify if files are saved.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • The best solution is to use a Server Code.

    It is simple to do:

    1. Create a Server Code with the following code:
    var filename = request.get("filename");
    var body = request.body();
    var XHRResponse2 = XHR2.send("POST", "https://api.appery.io/rest/1/db/files/" + filename, {
    headers: {
    "Content-Type": "image/png",
    "X-Appery-Database-Id": "5ce696340f884317ba33b0f0a",
    "X-Appery-Master-Key":"0911bb64-930c-4f28-834e-55bba31c95a48"
    },
    body: body,
    "isRawRequest": true
    });
    response.success(XHRResponse2.body, "application/json");

    Just set your Database ID and Master Key with your values

    2. Import this Server Code service into your application

    3. Run this service to upload your image to the database with the code below:
    var requestData = {};
    requestData.params = {};
    requestData.params.filename = "test.png";

    var base64Data = $scope.base64.replace("data:image/png;base64,","");
    requestData.data = atob(base64Data);

    Apperyio.get("myUpload_service")(requestData).then(
    function(success){
    alert('All files has been successfully uploaded.');
    },
    function(error){
    alert(JSON.stringify(error));
    },
    function(notify){
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Serhii,

    Thanks for your response. The code you provided worked and I was finally able to save the file to the database.

    Does the server code script you provided also work with session token instead of master key? I want whoever uploads the file to be the file's owner.

    Thanks,
    Rodrigo
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned