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

  • 38
  • 2
  • Question
  • Updated 3 months ago
  • Acknowledged
  • (Edited)
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...?
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb

Posted 10 months ago

  • 38
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
Using JavaScript you can read the EFIX rotation tag and automatically rotate the image.

If you need individual assistance implementing this feature fee free to contact me off-world using the information in my profile:

https://getsatisfaction.com/people/dandiebolt/
Photo of Evan Martinez

Evan Martinez, Community Manager

  • 12,028 Points 10k badge 2x thumb
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.
(Edited)
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb
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.
Photo of Evan Martinez

Evan Martinez, Community Manager

  • 12,028 Points 10k badge 2x thumb
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. 
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.
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb
So the QB iOS app has launched, and after some quick testing it's clear that image rotation handling is 0% improved from the mobile browser experience.  This is very unfortunate to see.  Still a total deal breaker for any application involving mobile photo upload, something that should be a base-level fundamental feature.

Is QuickBase truly committed to bringing a seamless desktop-to-mobile user experience?  The continued failure to address this issue speaks loud and clear to the contrary.
(Edited)
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb
I have posted a write-up to the user voice platform concerning this issue.

If inconsistent image rotation is a bother for you, click the link below and upvote the topic.  Hopefully QB will take note and provide a fix.

https://quickbase.uservoice.com/forums/111823-quick-base-product-feedback/suggestions/35235568-fix-i...
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
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
});
(Edited)
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb
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.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,174 Points 20k badge 2x thumb
>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.
(Edited)
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb
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.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,174 Points 20k badge 2x thumb
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
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
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
(Edited)
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb
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.)


Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
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.
Photo of Josh Weeman

Josh Weeman

  • 714 Points 500 badge 2x thumb
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.
Photo of Jordan McAlister

Jordan McAlister

  • 1,244 Points 1k badge 2x thumb
Do you happen to have a link to this demo? and "how to" info? I'm interested in this fix if it means using script.