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

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.
:slight_smile:

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:

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.

12 Likes

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

2 Likes

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

@GreenFlux A wizard you are.
:mage: :nerd_face:

2 Likes

Thanks @MultiTech_Visions. :grin:

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.

1 Like

Cool @GreenFlux; I’ll probably use this!

Any suggestions for allowing users to upload video? :sweat_smile:

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?

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? :face_vomiting:

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

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.

+ Dynamic form link to Filestack

+

WEBHOOK?

…untested :beers:

2 Likes

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. :grinning:
This turns to be one of my new favourite toy and tool. :hammer_and_wrench:

4 Likes

@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.

4 Likes

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. :+1: 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. :smiley:

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

5 Likes

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

2 Likes

@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.

4 Likes

YES! :grin: 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.

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

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

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

I like that you used ever single option! :joy: 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.

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 ? :wink:

4 Likes