Save image and store path for public

[franse]

Wappler 7.7.3
NodeJS

Hello..
I guess I'm missing something very simple here:

Using this logic, the path for the saved image is: /public/assets/images/upload
So storing this to the db, results in:
/public/assets/images/upload/f278b400-ad2b-491e-baae-79dd3be85d19.jpg

The problem is, this url doesn't exist:
http://localhost:4000/public/assets/images/upload/f278b400-ad2b-491e-baae-79dd3be85d19.jpg

It should be:
http://localhost:4000/assets/images/upload/f278b400-ad2b-491e-baae-79dd3be85d19.jpg
(Which gives me the right image)

Now my problem can be solved saving on db ONLY the name of the file instead of the path.. But that is not possible, selecting Save Image only returns the whole path:

Is there a way to catch the name of the Save Image step?
Thanks

PS: I have another workaround, overwriting the upload.name and using it, but want to avoid that..

[ben]

The behaviour you’re seeing is caused by how static files are served in a NodeJS project and how Wappler’s Save Image step returns the server path, not the public URL. This is because the server needs to know where the file is stored. It is not intended to be used directly as a public URL.

There are 3 valid approaches

1. Store only the filename

f278b400-ad2b-491e-baae-79dd3be85d19.jpg

2. Store the public path

/assets/images/upload/filename.jpg

3. Store the full server path

Use a formatter or replace:
{{imagepath.replace('/public', '')}}

In case you are interested, I always use option 1

[franse]

Thanks Ben, but my problem is the next one:

Save Image action has a field Template where I assign the name of the file, in this case {guid}{ext}.

I would like to store only the file name, but there's no output of that attribute..

Using the same name that upload.name and overwriting it is not an option since I have 4 different resizes/save image steps..

My only real workaround here is before each Save Image step, create a Set value named for example "image24x24" and then on template use: {{image24x24}}{ext} and save that on db with an specific extension.. Which is a very bad looking decision but it works..

I wonder why Save Image doesn't have a name output, should I open a FR?

[Cheese]

If the path is always the same simply store it in the database as the default value for a 'sourceURL' column?

So in your DB you'll have:

sourceURL - https://yadayada.com/assets/images/upload/ (as default value)
fileName - f278b400-ad2b-491e-baae-79dd3be85d19.jpg

[patrick]

Do you save the image with a new name than in the upload? If the upload path was the same, then you could use the url property from the upload.

[franse]

@Cheese thanks but the only output here is the path, I can't store the path since it comes /public/assets/images instead of /assets/images

@patrick that could be a workaround when using only one save image step, in my case I have 4 different load image - resize - save image from the same file, so I need to store all of them, I guess I can use something like {name}_1{ext}/{name}_2{ext}

[Hyperbytes]

I totally get what you mean.
If it helps, the approach i use is to preserve the filename but save the images to subfolders with the same name.
So for example i have folders large, mid, small and thumb and in resize steps save to these folders under the same filename.
I find mapping folders more flexible than manipulating the file name itself

[patrick]

I think @ben gave some good approaches. Simply use the replace formatter to strip the /public part. I think we could probably have some file specific formatters to easy extract url, filename and extension from a path.

[franse]

Yes, both Ben and Brian solutions are good, will try them..

@patrick

I think we could probably have some file specific formatters to easy extract url, filename and extension from a path.

That would be nice, but also would be great to have it as a value from the save image step, or there's a reason that could not be possible?

Thanks all

[Hyperbytes]

Have you tried path.replace(/^\/public/, "")

Alternatively tell me what you need franse and i will put together an formatter extension, server or app connect?

[Cheese]

@franse

thanks but the only output here is the path, I can't store the path since it comes /public/assets/images instead of /assets/images

If you set the column value for the sourceURL (create this field in your database) with a default for your path then you don't need to save the path as it will be inserted/stored as the value by default. That is the suggestion I am making.

[Hyperbytes]

@Hyperbytes

Have you tried path.replace(/^\/public/, "")

Sorry Wappler doesn't like that, a simpler way is in your database insert or update rather then saving {{path}} save {{path.replace('/public/'.'/')}}

[patrick]

@franse

That would be nice, but also would be great to have it as a value from the save image step, or there's a reason that could not be possible?

Then we should have it under an option which you toggle. We can't just change the current output without breaking backwards compatibility.

[franse]

Will try that later, thanks Brian

Sorry @Cheese, I don't get it the only thing that Wappler provides is storing the whole path:
/public/assets/images/upload/filename.ext

I can't extract filename (it comes from the save image intern {guid}
I don't have any other value available than the whole path, and it's useless for storing as it won't be accesible from the browser..
Sorry again..

@patrick don't worry, I have a few ideas to continue

[Cheese]

@franse

Sorry @Cheese, I don't get it

You can set default values within the database itself. Ignore inserting it, you enter it as the default in the database. It is nothing to do with inserting. It exists by default as is the default value if none is entered.

[franse]

I understand that, but the point here is this:

1. Upload image called mypicture.png
2. Load that image
3. Rezise it 32*32
4. Save it using {guid}{ext}
5. How can I store it?

The only output is the complete path including /public/assets/images...... etc

I can't store that complete path because it's useless on the browser..

I can't bind a dynamic image with /public/assets/images, because the correct url is /assets/images

Sorry if my english is not the best, but I'm pretty sure that if you try to upload an image, and do some resize with {guid} as template, you'll probably be lost to bind it on the frontend

[Hyperbytes]

i have added a server connect custom formatter extension for node.

apply it to the path and it returns the url
so if path is:
public/assets/files/myfile.txt

applying the formatter to the path returns:

assets/files/myfile.txt
After installing you will find the formatter in the "Custom File Actions" group called "Path to Url".

Hope this helps
I will be publishing another formatter extension to extract the filename from a file path later this evening.

[Hyperbytes]

Also published this

Basically pass the path and it returns the filename or an empty string if the path has no filename
You will find it in the same group

so applying the formatter to a path like /public/assets/files/myfile.txt
returns myfile.txt

[Hyperbytes]

i will document these fully tomorrow