Save Image and Image Upload template step doing something odd

[psweb]

Wappler 4.2.0
Mac OS X M1 and Mac Intel Big Sur 11.6.1

When uploading a batch of files with various names and extensions like
image1.JPG
image2.JPEG
image3.jpg
image4.jpeg

I wanted to use the Template on either Upload or Save Image steps to alter the extension part to always be lowercase and always prefer jpg over jpeg
EDIT: I was using AUTO for the image type on the Save Image step.

I added to the Template `{name}{ext.lowercase().replace(‘jpeg’, ‘jpg’)} and this was the unexpected result.

The other little thing was if using the Template on the Save Image step and trying to add the image name to my database, there is no bindings available on the Save Image step, so to add the renamed image in my database I had to manually add {{saveImageStepName.split('/').last(1)}}.

[bpj]

You could just use {name}.jpg in the Template field as long as you know you’ll always receive a jpeg/jpg.

Alternatively you could use a file statistics step to find out its extension and use some logic to decide how to handle it (e.g. if it were a png instead)

[psweb]

I already got around the issue by adding a Set Value step with {{name.lowercase().replace('jpeg', 'jpg')}} and then referencing that in my Save, however I feel that is more of a workaround rather than a solution to be honest.

In my mind it would make sense that the Image Upload step would be the perfect place to have the template of {name}{ext.lowercase().replace('jpeg', 'jpg')} as then when I pass those names to the repeat to go through all the uploads the name is already correct.

It also means that I can use the {{name}} binding from the repeat in the database insert step.

I am not sure if using the template of {name}{ext} allows to to add formatters like I did, and when I look at the module file for image.js I see the save step already has a toLowercase() as well as a replace section, so actually not sure why it even allowed uploads of uppercase .JPG or .JPEG in the first place.

Figured best I report it, although mine is all working fine with my little work arounds for the meanwhile, maybe it will save someone else some brain scratching though.

[mebeingken]

If it’s helpful, I made an extension that determines mime type from the file content rather than extension of file name.

Custom File Actions [Node]

Here’s a couple of Node custom file actions for anybody in need: Retrieve and save a file from a remote url Determine the mime type of a file based on the content of the file rather than the filename https://github.com/mebeingken/wappler_modules/releases/tag/1.01

[psweb]

That will help me on another project I am working on, where I am using an API to get WebP images saved out and brought back, thanks Ken, perfect timing.

[psweb]

@mebeingken

If it’s helpful, I made an extension that determines mime type from the file content rather than extension of file name.

Hint Hint @mebeingken, wouldn’t a module integration for Croppie, Cropper, or anything to custom crop be awesome, pleeeeeeese.

[mebeingken]

I’ll spare you the suspense and let you know that is not in the works. I use croppie in projects, but I haven’t had the need or seen the opportunity to bundle into something easily added via component, etc. Maybe when Wappler does something more formal for client extensions as they did with server side.

[psweb]

Lol, fair enough, I tried to do an integration with both and they really did not work out as I was hoping, I kept getting black bars and just could not get rid of it, so I gave up and decided to try it again when I had more time, but haven’t got around to it yet.

[sid]

@psweb

{name}{ext.lowercase().replace(‘jpeg’, ‘jpg’)}

Don’t think these single bracket bindings can use Wappler’s formatters. Instead of set value, did you try just setting {{name.lowercase().replace('jpeg', 'jpg')}} in file save itself?

[psweb]

I pretty much knew the double bracket version would have worked, the only problem was I really only wanted to affect the extension and leave the name alone, so I suppose I could have gone the split route to get the ext out and done my formatter only on that.

So maybe a better question here is.

Can I add formatters to single curly brace Template {name} or {ext} or {guid} and is there a trick to the syntaxes I should use?

[sid]

@psweb

is there a trick to the syntaxes I should use?

Maybe try {{ ({ext}).replace('jpeg', 'jpg') }}

[psweb]

I will give it a try and report back on results, thanks Sid

[patrick]

The template is not an expression, you only have the simple replacement that are given in the help tooltip, so no formatters are available. You could make a feature request to have a full expression parser for the file template mask.