File extension from JPEG.... needs to be saved as JPG when the using it with resize and save image

Wappler General Bugs
#1

File extension from JPEG… needs to be saved as JPG when the using it with resize and save image… see the best below from Paul. I can confirm i have the same issue.

File upload and file extensions .jpg .jpeg

So in short…

(Some clients phones output jpeg… but we prefer using .jpg all the time)

When I upload a file with extension. test.jpeg it needs to upload the file as a test.jpg please. Because if I upload the test.jpeg and use resize and save it will save it in the uploads folder as test.jpg … so the resize and save functions is perfect and works as expected…

work-great-and-makes-jpg

But the problem is in the uploads folder I would then end up with 2 files…
the original uploaded file… eg … test.jpeg and the resized file. test.jpg…
But now it writes the original file name into the database test.jpeg…

end-up-with-2-files

What i expect to happen is when i upload a file with a .jpeg extension that it would get uploaded as a jpg and not jpeg… because when i resize the files… it changes it to .jpeg …or is there a filter one can use to do this?

This is the upload properties…

upload-prop

i have tried to do this…
what-i-have-trried

because when it also writes to the database with …

write-to-databbase
write-to-databbase716×69 12.6 KB

so I guess the it does not matter if it gets uploaded as jpg or jpeg… but then the resize and save functions just need to output the respective file extension of the main file that was uploaded… so if a .jpeg uploaded… then the save should be a .jpeg

i have tried both …AUTO and JPEG in the FORMAT when saving the file

#2

just delete the old file after the current one is uploaded? Just add another step

#3

The problem is … i have multiple sites already created… with multiple SC actions some single and some multi-upload functions with repeat uploads. So to go back into each SC to add a step is not the option… i will look into Pauls “fix”… and revert.

Update! If I use @psweb suggestion…
file = file.replace(extname(file), '.' + format.replace('jpeg', 'jpg')); to

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

then it works the other way around… if I then upload a .jpg… it makes it .jpeg…

So all that needs to happen…

If i upload a .jpeg… load… resize… save it… it should output the saved file as. .jpeg
If i upload a .jpg… load… resize… save it… it should output the saved file as .jpg

+++++++++++++++++++++++++++++++++++++++++++++++++

UPDATE!!
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:

1 Like
#4
#5

also see this post…

File upload and file extensions .jpg .jpeg
#6

so ended up with this…

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();

#7

A regexp would be a bit simpler then a replace for all those different cases, you would miss .Jpeg for example.

The following uses regexp for replace and is case insensitive, all case will be converted to lower-case but only for the extension and not the rest of the filename.

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

Use the toLowerCase() to make the full filename lower-case.

file.name
  .replace(/[\x00-\x1f\x7f!%&#@$*()?:,;"’<>^`|+={}/]/g, '')
  .replace(/\.jpe?g$/i, '.jpg')
  .toLowerCase();
1 Like
#8

thanks @patrick for giving the correct way of doing it… ill add it to my file…thanks.

#9

can we please have this update with the next “update” please.

1 Like
#10

seem like any file extension that is UPPERCASE on digital ocean… it does not like… the file extensions need to be forced to be lowercase. The file name can be UPPECASE but not the .extension (NODE JS)

If anyone else got other files… just add them as below…

file.name
  .replace(/[\x00-\x1f\x7f!%&#@$*()?:,;"’<>^`|+={}/]/g, '')
  .replace(/\.jpe?g$/i, '.jpg')
  .replace(/\.png$/i, '.png')
  .replace(/\.pdf$/i, '.pdf');
#11

Bump :slight_smile:

#12

I have come across the same issue after resizing and save steps when uploading photos with jpeg file extension (Wappler v5.5.3).

1 Like
#13

@patrick sorry i unmarked your “solution” … thanks for helping me to fix it my side manually.
as i marked it as a solution and maybe that made you guys forget to update the bug your end. But as you can see its still an issue for other users as well. Thank you

also see this post.

1 Like
#14

Yes @patrick , I’m still having issues with this when uploading or resizing/saving images that are both jpg and jpeg - we need the upload.js file updated from Team Wappler.

#15

We will not be implementing this hardcoded as it was given here in the topic. We can implement it as a new option, for example an Lowercase Extension option that will make sure the extensions are always lowercase.

Another option I discussed with George is that we introduce a new template option, instead of the current template it will allow to use an expression and have the name and extension as variables available. You can then use the formatters to replace/lowercase or any other transformation you need. This way you have full control over how the file is named.

For the image processor we should maybe have an option to remove the old file on save, this is for the cases when file extension was changed, like in your case jpeg to jpg or to any other type (for example you upload a png but save it as a jpg).

#16

Having the name and extension as variables will be the way to go then, makes more sense now you’ve explained it. Users can then choose whatever they like to manipulate filename and extension. I think the Lowercase Extension is a great idea too, it’s probably easy to implement also.

#17

I use a set value before

image
image842×524 9.54 KB

image
image465×575 9.05 KB

#18

It was indeed possible to use expression in the template option, but you are limited to the variables from the previous steps. The proposal is that you can use the current file properties in the expression.

1 Like
#19

Here an update for the upload module: upload.zip (1.2 KB)

Unzip it to lib/modules.

With the update you can use expressions in the template like:

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

In expressions file, name and ext are available as variables as well as all data from previous action steps.

Example of the variables when filename is MyImage.jpeg

  • file: MyImage.jpeg
  • name: MyImage
  • ext: .jpeg

For expressions you need double curly brackets, the single curly brackets will do a simple replace. _n can not be used in the expression. The parsing happens in 2 steps, it will first parse the expressions and then it does the template replacements.

So the following expression will return a template string which will make sure a unique filename is generated:

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

We still have to look if it will be possible to create the UI for this in Wappler since it needs to be able to pick custom data specific for this action.

1 Like