IMAGE EDITING! Rotate, Crop, Resize, Mirror, Etc- Using FileStack & URL Parameters

AppSheet Tips & Tricks
,
1

Disclaimer: Free signup at https://www.filestack.com/ is required in order for each developer to have their own API key and track usage. The free version offers up to 1000 ‘transformations’ a month.> I have no affiliation with Filestack and do not stand to gain from users signing up. I was going to post as a sample app but I don’t want the usage counting against the limit on my free account.# www.filestack.com

Web-service that supports file editing and conversion for photos, videos, auto files and office documents. The service uses URL parameters to ‘build a request’, and returns the edited file.

By adding columns for Rotation/Crop/Size/Etc, you can build a custom request and return the new image:

3X_e_8_e835ccece34bd1f246c1a1216d3f5adb115d3ae1.gif

Filestack URL Parameters:

The URL for the request is built by combining your API KEY with the URL of the image you want to edit, and the TASKS you want to perform:
https://cdn.filestackcontent.com
/YOUR APIKEY
/TASKS
/URL

URL

For images already stored in your app, you will need a public URL or secure/signed link to the image. This is a big topic, and is already covered in the forums.
Showing Images in Google Sheets
Public vs Secure URLs

TASKS

To build the /TASKS part of the request, add columns for Rotation/Crop/Resize/Ect to the table containing the images, so you can combine the selected Tasks into the final URL.

Then CONCATENATE() all the values together into the final URL and save that path back to your sheet.

“https://cdn.filestackcontent.com/[YOUR_API_KEY]/”&> IF(OR(ISBLANK([Rotation]),[Rotation]=0),“”,“rotate=deg:”&[Rotation])&> IF(ISNOTBLANK([Rotation]),“/”,“”)&> > IF(ISBLANK([CropXY]),“”,“crop=dim:[”&[CropXY]&“,”&[CropHW]&“]/”)&> > ENCODEURL([Image])# NOTE: The new URL will point to an edited version of the image that is stored on Filestack servers.

21 Likes
2

You’re always coming up with cool features! You’re awesome!

2 Likes
3

Thanks @tvinci! I had a client that needed some way to edit images so I had to come up with something.

I looked into editing/replacing the image in Google Drive but it would have required using scripts. I wanted to keep it simple so it’s easy to re-use, and this was the best service I could find.

3 Likes
4

@GreenFlux A wizard you are.

2 Likes
5

Thanks @MultiTech_Visions.

It’s really not much more advanced than the placeholder image tricks that others have posted several times. Just a few more parameters to build, and the public image url issue to work around.

2 Likes
6

Cool @GreenFlux; I’ll probably use this!

Any suggestions for allowing users to upload video?

7

Are the videos already stored in GDrive/Youtube/Dropbox/FTP? Can you get a URL directly to the video like the example uses for public images?

Or do you want to upload videos from a mobile device first, then run them through filestack?

8

Nope, users would want to be able to shoot video and upload. Ideally this would be seamless, but that’s not possible in AppSheet (currently).

Sooo whats the most seamless option currently possible? E.g. user shoots video → mobile uploads to youtube → copies and pastes youtube url into app?

9

Jonathon:

Sooo whats the most seamless option currently possible? E.g. user shoots video → mobile uploads to youtube → copies and pastes youtube url into app?

Yeah, it’s going to be clunky trying to let the user pass the video URL. But their service also has a file upload tool, and webhooks.

I haven’t looked that close into the triggers or other webhook options, but maybe you could have the user upload the video to Filestack first, and then a Filestack-webhook would save the URL of the edited version back to AppSheet via AppSheet’s API.

You might even be able to generate a dynamic upload link from AppSheet, so that the video gets tagged with the AppSheet-ID to help link them or predict the new URL. This would be similar to sending a pre-filled Google Forms link. Again, I haven’t looked that close at the webhook features for Filestack-- but I’ve set up similar integrations with other APIs.

What video transformation(s) are you interested in? Would it be user-controlled, per video, or something applied to all uploads, like compression?

1 Like
10

Already I like some of your thoughts, provides they work.

I wouldn’t necessarily need video transformations; simply the ability to capture and archive videos is good enough.

11

3X_a_4_a4dc026be07ad67ca6db9159881b778505b3c88e.png
3X_a_4_a4dc026be07ad67ca6db9159881b778505b3c88e.png827×414 21.7 KB

+ Dynamic form link to Filestack

[Google Forms Integrations: Best Practices](https://community.appsheet.com/t/google-forms-integrations-best-practices/25268) Tips & Tricks ?

Google Forms & AppSheet Best Practices The intent of this post is to document certain Google Forms behavior as it relates to AppSheet, and create a Best Practices Guide by compiling input here from the community. Please feel free to suggest edits and add links to other relevant posts. Before we get into Best Practices, it’s important to understand a few things about Google Forms: Forms can be linked to save responses to a NEW SHEET ONLY. This can be in a new or existing workbook.…

+

WEBHOOK?

…untested

2 Likes
12

Hi @GreenFlux
Honestly I have been looking for such an external services, and thank you so much for sharing.
I will be working around with this service to implement into Appsheet. Thank you again.
This turns to be one of my new favourite toy and tool.

4 Likes
13

@Jonathon You can use the column type “File” to upload video files to the AppSheet App (and all other file types).

Here is a very simple sample App.

5 Likes
14

Hi @GreenFlux
Indeed, it was fun tool. For my inspection applications, it was one of the frequent request from the app user to rotate and crop photo, now it would be possible. Thank you again for sharing the tool.
User interface on Appsheet, how to let the app user to crop the image is bit tricky, however, the documentation for app user could solve. At least, now I can say to client, yes we can do crop images on Appsheet.

Basically any api services are server side works, so none of them will work offline mode.

6 Likes
15

Thank you @GreenFlux and @tsuji_koichi this is very cool.
I think internet connection is needed?

2 Likes
16

@GreenFlux please correct me if anything wrong with me.

This is URL based API. To get the response back from their server to render the cropped image, firstly, we need to save the image through the form. Then we capture the public URL for images saved on Appsheet. Then we pass this URL value as params to Filestack, then we get response.

So to make long story short, this wont work under Offline.

6 Likes
17

tsuji_koichi:

At least, now I can say to client, yes we can do crop images on Appsheet.

YES! I’ve also had lots of clients request it and I always had to tell them that it was beyond AppSheet’s capabilities. I’m using this with the first client now, and I’ll probably start including it in most of my apps.

tsuji_koichi:

Basically any api services are server side works, so none of them will work offline mode.

Correct. The live editing as shown in the GIF in my original post definitely requires a live connection.

Although I think it would be possible to ‘save requests’ in AppSheet and send webhooks to FileStack when a connection returns. I think once the device has a chance to cache the edited version, it will continue to display it after the connection is lost again. So it could work with apps that have intermittent connections, but would never work completely offline.

1 Like
18

Thanks @Fabian. Yes, the device would have to have a live connection to use this service. Or, at least would need to ‘collect requests’ and queue them to be uploaded later when a connection returns.

It would be awesome if we could get this functionality offline, but I don’t think that could happen unless AppSheet includes the code natively in the platform.

2 Likes
19

By the way, great work on the UI and form in the video, @tsuji_koichi !

I like that you used ever single option! I haven’t tried the Flip/Flop/Circle ones yet.

I wish FileStack could crop an image by X%, without knowing the resolution. You have to give it a number of pixels to trim.

The first two XYs are easy because they’re relative to 0,0-- but what if you want to trim 20 pixels from the bottom/right, and you don’t know the image resolution?

FileStack can return the resolution for us, but AppSheet doesn’t support GET or reading POST responses.

Any thoughts on how to crop from the bottom/right without knowing the image size?

I was thinking a ‘pre-processing’ step could send a webhook to FileStack, which would send a webhook back to AppSheet and update the row with the image dimensions. Then you can reference that in the editing step to easily trim from the bottom/right corner.

20

Thank you, @GreenFlux

I noticed we need to “save” the appsheet form first then reopen the form so that we start to crop the image. So firstly, I put a trick to hide all the other column, such as params controller when the new form was opened. Then the form is saved with the captured images, then those hidden column (params controller, I would say) become firstly available so that the user start to crop in the way whatever they want.

Yes, I find API to get the image size, width, height, but as you are rightly say, we are not able to parse that JSON to consume within Appsheet! Parsing JSON is one of the most awaited feature for me by the way.
Anyway, so we can t get the image file meta data.

For my app users, I suppose most of (not all) user will take the photo with their mobile, as my app are deployed to field inspectors. Maybe they user their proper camera then upload image to App afterwards.

Consideration is what is going to be most likey aspect of those images, based on this assumption. Roughly i would call 2 : 3 or 3:2

Then for Appsheet, the default image resolution setting is 600 width. So the max height could be 900 based on 3: 2 ratio conversion.

At the end, the resize controller for both width, height, I put “900” as a resonable call. By default, i.e. the initial setting under appsheet, i put x y to 0, width and height to 900.

Im not deploying this app to my clients, but I will ask them to start to test, then I will aligh those factors based on the feedback and lesson learn through those test.

Flip, Flap might not be used in practical way, but circle I would call it will be found useful by users. On the inspection App, inspectors are saying they will call for attention by report reader by “pinching” into the point within the images.
Cropping image first, and dropping off the unnecessary edge of image then apply circle. This would give kinda of “zooooming in” feeling who view the images.

For my app, the cropping image URL is passed to the base URL for Drawing fields type. Once the app user finish cropping then move to drawing then.

Here in Japan, School just started. 1st class in the morning. Subject : Cropping 2nd Suject : Drawing.

Should be a fun ?

4 Likes