File upload and file extensions .jpg .jpeg

Looking for a little advice, I have a file upload form, that saves to a folder.
As a secondary step it creates a smaller thumbnail image too with a Load Image, Resize Image, Save Image
My Upload Step is set with a Template of {name}{ext} and my Save Image step has a Format Auto and a Template of {name}{ext} the same as the upload step.

When I upload .jpg, .png, .gif files everything is fine and the filename of the main image and the thumbnail image are identical.
If I however upload a .jpeg file, the main file remains .jpeg while the thumbnail is .jpg and drops the e from the extension.

I have tried adding an expression to the File Upload Template, however I must have the wrong syntax because I can not get it to work. This is what I tried

{name}{ext}.replace('jpeg', 'jpg')

And about 20 other variants of that with curly braces, parenthesise, additions, ternary versions, and it seems I can not find the perfect fit.

Any Ideas?

Hi, Paul.

The easiest thing to do:

  1. Add another step with Load Image, Save Image (In fact, the previously uploaded jpeg file will be copied and saved, but with the jpg resolution).
  2. Add a step to delete the initially uploaded source file with the jpeg resolution.

As a result of these additional steps, you will have two jpg files (one is a smaller one, the other is an exact copy of the original), and the first uploaded file is deleted.

To optimize the load on the server, you can add a condition step in which the jpeg extension will be monitored. If the extension has a standard appearance, there will be no additional steps and the server action will take place according to your standard scenario.

Thanks @Mr.Rubi, unfortunately I did think of doing that but to be honest, because my server action is far more complicated than what I made out and because this is in a dropzone allowing multi upload and it does an if file exists step after the upload, this would cause me quite a pain to try remake parts of my scripts logic.

@patrick, I actually think this issue may be a bit of an oversight between the File Upload module vs the Save Image module.

The File Upload has no real extension auto renaming or remapping at all
The Save Image has lib/modules/image.js on line 193

file = file.replace(extname(file), '.' + format.replace('jpeg', 'jpg'));

Therefore if I upload a file named patrick.jpeg and do a load, resize, save image, then the saved image name becomes patrick.jpg which no longer matches its original name. I have altered line 193 to no longer replace that and now all works as expected.

For a quick resolution, you could just create a custom module to rename the file after the file upload step.

Although, this seems like a bug with thumbnail creation, which should get fixed.

2 Likes

I tried to create a little module for it to be honest, but I failed dismally, haha, for some reason I can not seem to get the filenames with files1.files[0].name which causes an issue later in my repeat.
I have been having issues with some things on server action repeats or maybe just iterating through elements from a $_POST where if only 1 file is sent vs many files and I want to see them with a setValue step, I have to use a different syntax for 1 file vs many files like this.

{{$_POST.howmanyprocessing == 1 ? ('/travel-images/'+$_POST.newImagePath+'/var-bp/'+$_POST.currentImageName) : ('/travel-images/'+$_POST.newImagePath[$index]+'/var-bp/'+$_POST.currentImageName[$index])}}

I am not sure if this is just compounding on that issue I already had.

For a file upload marked as multiple, you can use a repeat irrespective of whether single file has been uploaded or multiple.
Not sure what your setup looks like, but the repeat should not cause any issues from what I understand.

For the custom module, the input param should be the complete file name including the path. If you are inside the file upload repeat it should not be much of an issue.

1 Like

Hi Paul

I have the same problem… :frowning: it seem its mostly images takes with an iphone that creates the .jpeg extension… and then it all “goes belly up” as you explained above… … so what did you end up doing to resolve this? Did you mark this as a bug? as i have tried above… but the problem is when the file name gets loaded its saves it as jpeg and not jpg… as im not going to repeat all you have said… :slight_smile: :slight_smile:

Hi Paul @psweb ,
Same problem here and am curious if you found a solution.

UPDATE!! @psweb @Mennovandijk @sid
Ok... i have edited the upload.js file.
Now i can load.. jpeg.. and jpg files in batches.. and it will rename the jpeg and also place to the correct file name in the database..

Line 71.

if (!file.processed) {
let name = file.name.replace(/[\x00-\x1f\x7f!%&#@$*()?:,;"'<>^`|+={}\/]/g, '');

to

if (!file.processed) {
                        let name = file.name.replace(/[\x00-\x1f\x7f!%&#@$*()?:,;"'<>^`|+={}\[\]\\\/]/g, '').replace('.jpeg', '.jpg');

This worked for me... :slight_smile:

3 Likes

Hi Mozzy,
seems great and I am eager to check it out..
Silly question perhaps, but where is this piece of code located? :face_with_hand_over_mouth:

I hope this also solves this bug i am not able to fix:

lib/modules/upload.js
Line 71. this is on Node

i think php
dmxConnectLib/modules/upload.php
Line 162 … but you will have to do a preg_replace

1 Like

@Teodor

How can I force the .JPG or .JPEG or .PNG to lowercase on upload please...
I have tried the below.. but with no luck .. as on my "localhost dev machine" it working.. but not doing the trick on Digital Ocean.. seems it sees JPG and jpg as the same thing...

if (!file.processed) {
let name = file.name.replace(/[\x00-\x1f\x7f!%&#@$*()?:,;"'<>^`|+={}\/]/g, '').replace('.jpeg', '.jpg').replace('.JPEG', '.jpg').replace('.JPG', '.jpg').replace('.PNG', '.png');

localhost it working see below..

but on digital ocean.. ....

OK... Sorted ... this works now for now on local and Digital Ocean... @Mennovandijk

@psweb can you please move this to BUGS please....

lib/modules/upload.js
Line 71. this is on Node

if (!file.processed) {
let name = file.name.replace(/[\x00-\x1f\x7f!%&#@$*()?:,;"'<>^`|+={}\/]/g, '').replace('.jpeg', '.jpg').replace('.JPEG', '.jpg').replace('.JPG', '.jpg').replace('.PNG', '.png').toLowerCase();

2 Likes

This doesn’t seem to have been fixed, I’m running Wappler 5.5.3 and have just had to manually change mine too …

lib/modules/upload.js
Line 71 on Node

I had to update his to:
let name = file.name.replace(/[\x00-\x1f\x7f!%&#@$*()?:,;"'<>^|+={}\/]/g, ‘’).replace(‘.jpeg’, ‘.jpg’);`

Can the Wappler team please update this?

sorry … thought it was fixed as it was marked as a bug here a year ago.

1 Like

Still not fixed and still causing the same issue!