Forum Discussion

JoshWeeman's avatar
JoshWeeman
Qrew Assistant Captain
7 years ago

QuickBase really needs to build EXIF image orientation awareness into its image handling...

This is more of a wish/rant than a question (unless someone has a super secret way of remedying this that I'm not aware of).

For a platform that touts its mobile-friendliness, I find it very lackluster that photos that are taken/uploaded from a mobile device in portrait orientation are not handled properly by Quickbase.  The mobile interface will show that photo using the correct orientation (because the mobile browser natively obeys the EXIF orientation tag), so the mobile user thinks all is well... meanwhile the full desktop interface will show the photo rotated incorrectly, and any corresponding reports will output the image incorrectly.

Yes, I do know that the photos can be rotated manually before upload, or during/after upload by using a script or simply adding a "style/rotate" attribute in the <img> tag of your formula, however this doesn't solve the problem...it simply makes it look correct on one platform and not the other.  I even experimented with adding a "rotate" checkbox so users could individually rotate/correct each uploaded image, but again, that will fix the way the desktop browser handles it, and then it will look incorrect on mobile. The only true solution for images appearing correctly on both platforms would seem to be QuickBase handling the EXIF rotation tags in the background.  

Or am I missing something...?
File attachments
Mobile
  • EvanMartinez's avatar
    EvanMartinez
    Quickbase Staff
    7 years ago
    Hi Josh,

    It is the case that mobile and desktop display of images can be disjointed due to the way the mobile site handles them versus desktop orientation. The mobile experience of Quick Base is something we are working on, we are looking at a devoted Quick Base application in the early stages of development, beyond just the mobile browser experience. I would suggest adding your feedback as a request on our User Voice platform as well. The Quick Base User voice can most easily be accessed from the My Apps page in Quick Base by clicking on the orange Feedback tab that appears on the right of the page or at http://quickbase.uservoice.com by signing in with your Quick Base credentials. Our Product Development team users User Voice as a tool for planning to gauge customer interest. I would suggest if you do make a User Voice request that you post a link to it here in the Community as well. That way other users who share your need can add their votes. I'm sorry that you ran into this issue.
    • JoshWeeman's avatar
      JoshWeeman
      Qrew Assistant Captain
      7 years ago
      Evan, thanks for the reply.  That is very interesting to hear about the QB Mobile App.  This is the first I have heard of it.  Any ballpark ETA on the first release of the app?

      I will add this issue to the user voice platform and post a link.

      Thanks.
    • EvanMartinez's avatar
      EvanMartinez
      Quickbase Staff
      7 years ago
      Hi Josh,

      I don't have a ballpark yet on an ETA, it is something that is still in early stages as we continue to work on the mobile browser experience looking for ways to enhance Quick Base apps for mobile users. 
    • AlexCertificati's avatar
      AlexCertificati
      Qrew Cadet
      7 years ago
      Josh, QB presented some material on their native mobile plans at EMPOWER 18... last word I believe is that they have 'milestones' on the project this year and my impression is that we should see the feature come to market in 2019.
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    7 years ago
    It is pretty simple to use a short amount of script that will take a <input text=file> control and process (preview, scale, rotate, flip, crop, extract EFIX data ...) the selected image file prior to uploading the image to QuickBase. See this library for potential features:

    JavaScript Load Image
    https://github.com/blueimp/JavaScript-Load-Image

    The key to doing this is to (1) use the FileReader API and (2) submitting the file using the Fetch API with FormData body.



    The part that may be difficult to discover is that you have to set the subact to "save" when POSTing to ?a=FinishEditRecord:
    var dbidTarget = "";
    var fidTarget = "";
    var myBlob = "";
    var filename = "";
    let myform = new FormData();
    myform.set("subact", "save");
    myform.set("rid", ridTarget);
    myform.append('_fid_${fidTarget}', myBlob, filename);
    let urlFileTarget = '${dbidTarget}?a=FinishEditRecord';
    fetch(urlFileTarget, {
      method: "POST",
      body: myform,
      credentials: "include"
    }).then(response => {
      // all done
    });
  • JoshWeeman's avatar
    JoshWeeman
    Qrew Assistant Captain
    7 years ago
    Agreed, the basic methodology behind a fix for this issue is very simple...all the more reason QB should have taken care of this years ago.  However offering a theoretical user-scripted solution to the issue very much misses the point that QB needs to step up to the plate and address some very fundamental mobile usability issues if they are going to live up to the promise of providing a more seamless mobile-to-desktop experience.  I'm all for employing script when it comes to enhancing or creating special functionality within QB, but I draw the line at spending my own time fixing basic functionality, like image uploads.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      7 years ago
      >However offering a theoretical user-scripted solution to the issue very much misses the point that QB needs to ...

      There is nothing theoretical about my proposed solution. I can't create a demo that allows anyone on the internet to upload their cat files as it will consume my file attachment quota if left unattended. But I will probably create a demo that rotates a selected file attachment and downloads the rotated image automatically. Once the rotated images is generated it is trivial to submit the form with the rotated image using the FormData API.

      I don't agree with every decision QuickBase makes but I am sure there is a product feature backlog a mile long and they do their best to prioritize new features. When there is a workaround (rotate your images prior to upload) I am sure this makes the feature request less vital. Script allows QuickBase users to come up with their own solutions rather than waiting on a feature request that might otherwise languish in UserVoice for years.
    • JoshWeeman's avatar
      JoshWeeman
      Qrew Assistant Captain
      7 years ago
      If you haven't actually built it and shown it to work, then isn't it theoretical by definition?

      Moot point though.  QB has assured me that this in on their radar and will be addressed soon.  Makes little sense to put a scripted solution in place for something they plan on fixing in the near future.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      7 years ago
      I have built it - when creating public demos there are additional constraints I have to work through so the demo will continue to work without ongoing maintenance such as revisiting the application and deleted inappropriate or accumulated files that have been uploaded by random users.

      I test every technique or solution I post so if you are having getting problems getting something to work you are free to contact me off-world using the information in my profile:

      https://getsatisfaction.com/people/dandiebolt
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    7 years ago
    Here is a screenshot of a non-theoretical, practical and working demo:



    With script I alter QuickBase's file attachment control to only browse for images:
    <input type="file" size="40" name="_fid_8" id="_fid_8" accept="image/*">
    When an image is selected, it is previewed to the spot on the form indicated by "Image" and displayed in a <canvas> item indicated by the spot on the form indicated by "Processed". Once the <canvas> loads I automatically flip and rotate the <canvas> and initiate the download of the processed image. Unfortunately I can't upload the processed image at this time because of my file storage quota.

    However, to save the processed image all you have to do is call canvas.toBlob() and submit the blob using FormData API.

    While the image is in the <canvas> it is possible to resize it, add a watermark or any other processing you desire. You can also extract any EXIF data from the image and slot it into extra fields on the form.

    BTW, the girl in the photo is named Zoe and she is famous:

    Know Your Meme ~ Disaster Girl


    If you need this non-theoretical feature feel free to contact me off-world using the information in my profile:

    https://getsatisfaction.com/people/dandiebolt
    • JoshWeeman's avatar
      JoshWeeman
      Qrew Assistant Captain
      7 years ago
      Seems like you have a small piece of a potential solution there.  If I understand you correctly, you are uploading a stock PNG to a file attachment field, manipulating it via transform instructions that are hard-coded into your script (pre-determined rotate & flip), rendering the transformed image to a new PNG file, then automatically initiating a download of the new PNG to the client.

      In order to be a working solution to the EXIF problem I�ve detailed in my posts, this would have to be taken further.  

      After a user uploads a JPG directly from mobile device�s camera app or camera roll, the solution would have to:

      • Read the image�s EXIF transform data
      • Rotate image according to EXIF rotate parameter, to correct for portrait, landscape left, upside down (0, 90, 180, or 270 degrees)
      • Discard EXIF data, rewriting rotated image file with no EXIF
      • Re-save rotated EXIF-stripped image to original file attachment field

      The last step is as a deal-breaker IMO.  Having to upload the image to one file attachment field, download the image back to the device, then re-upload it to its final destination attachment field is kludgy at best.  Frankly that's a even less sellable solution than the current scenario of QB natively uploading mobile photos to the database that appear to non-mobile users in the wrong orientation. (Which in itself is already unsellable.)


    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      7 years ago
      I think you are misunderstanding the workflow. The script "calculates" something called a blob representing the rotated image which can be submitted to QuickBase directly using the FormData API. The only reason I download the blob is because I can't allow the image to be saved to QuickBase as my file quota will be quickly exceeded. So I am just generating "proof" that the modified image can be created. The blob is a full fidelity binary representation of the processed image. The code I am using is the standard and accepted way of manipulating images client-side (ie in your browser).

      I think the difficulty in understanding this is due to the fact that historically the only thing you could do with a file (text, image, pdf etc) was upload it to the server unchanged. Today their are capabilities to fully manipulate both text and binary files both for upload, download or to extract information such as EXIF data or even OCR. This would have been unheard of years ago but browsers have greatly advanced and anything an installed application or a server side application can do can largely be done client-side in the browser. This is not an exaggeration.
    • JoshWeeman's avatar
      JoshWeeman
      Qrew Assistant Captain
      7 years ago
      I was basing my workflow comments off of what you've seemingly already built, not off of what's possible.  I think we can all assume this functionality is possible.  Having something built, tested, and demo-able is a different story.