API-platform/Admin: How Render ImageField with custom src? - admin

I want to inject full path to my media in admin of API-platform with
following this doc
was impossible to generate full path URI I try this:
field.field = props => (
<ImageField source="contentUrl" {...props} >
<FunctionField render={ render => {
console.log(render)
return `${process.env.REACT_APP_API_ENTRYPOINT}/media/${render.contentUrl}`
}} />
</ImageField>
);
from: this stack
I obtain this result:
<img src="[object Object]" class="ImageField-image-274">
my src needs to be:
http://localhost:8080/media/myFile.jpg
from my api:
contentUrl = myFile.jpg
I need concat this with process.env.REACT_APP_API_ENTRYPOINT
thanks for your help!

Did you set the variable before you start the webpack dev server or before you build your project?
export REACT_APP_API_ENTRYPOINT=http://localhost/....
npm start

You can use FunctionField like this:
<FunctionField
label="Image"
render={(record: any) => {
return (
<img
src={`${process.env.REACT_APP_API_ENTRYPOINT}/media/${record.contentUrl}`}
/>
);
}}
/>

Related

Displaying Filepaths Correctly in Flask/Jinja2

I have a setup in a flask app where I can use a form to upload a file into the static/img directory for my application, and the metadata is stored in a record in a database.
When someone makes a request to the appropriate page, I want to read the file from the server using the filepath saved in the database.
Here's an example of the record when it's pulled from the database:
(3, 'My Info', 'My Description', 'www.url.com', 'static\\img\\aws_nameservers.PNG')
What I'd like to do is combine the last item in the above record with the url_for function to render the image stored at that location.
What I have right now is a set method that gets the last part of the file path:
{% set filepath = workshop_info[4][7:] %}
This returns img\\aws_nameservers.PNG
Then inside an img tag I have the following:
<img src="{{ url_for('static', filename=filepath) }}">
Which gives me the following result:
<img src="/static/img%5Caws_nameservers.PNG">
It seems like a simple thing, but I can't figure out how to render the string correctly inside the jinja2 template.
Thank you.
If there is a better approach than what I'm attempting, I'm happy to get corrected.
You should use the forward slash (/) instead of backslash (\) at the file path. You can replace them either in the Python code or in the template using a filter, e.g.:
{% set filepath = "img\\aws_nameservers.PNG" | replace("\\", "/") %}
{{ url_for('static', filename=filepath) }}
# Outputs: /static/img/aws_nameservers.PNG
You can also use the pathlib module to convert between the Windows and Unix style paths.

How to remove everything before provided value

I am using Bootstrap Vue and would like to use a formatter callback to insert html into a column inside the table. The Bootstrap documentation example formats the link as an anchor link
Ex. https://bootstrap-vue.js.org/docs/components/table/#shirley-partridge
<b-table striped responsive hover :items="episodes" :fields="fields">
<template v-slot:cell(version)="data">
<a :href="`${data.value.replace(/[^a-z]+/i,'-').toLowerCase()}`">{{ data.value }}</a>
</template>
</b-table>
I am pulling in a full url from the version property and would like to only use this url in the template, how can I remove everything before my url using the formatter?
this.episodes = response.map((item) => {
return {
category: item.fields.title,
episode_name: item.fields.splash,
episode_acronym: item.fields.description,
version: 'https://myurl/webinars' + item.fields.slug + '/' +'test',
}
})
Desired link would be https://myurl/webinars....
I was able to get this working, by keeping the relative url format, and updating the formatter with a - instead of a + sign
<a :href="`${data.value.replace(/[^a-z]-/i,'-').toLowerCase()}`">Definition</a>

Adonis js Edge get domain url in assetUrl

Am sending an email via adonis mailer and i would like to get the domain name to include in the images on the edge files but am stuck on how to add the domain name as emails sent dont display the images
So in my email edge file i have
<html>
.....other stuff
<img
src="{{ assetsUrl('images/logo.png') }}"
/>
</html>
This doenst display the logo.
A quick check on the output of
{{assetsUrl('images/logo.png')}}
it displays
/images/logo.png
This shows that the domain name is not included i n the assetUrl helper.
How can i get the domain name in the edge file, so that the src propery is complete to display the image
I have a solution but it's not perfect :
You can use .env variables (example: APP_URL, or custom)
Edge:
<img src="{{ APP_URL() }}{{ assetsUrl('images/logo.png') }}"/>
You need to create start/hooks.js :
const { hooks } = use('#adonisjs/ignitor')
hooks.after.providersBooted(() => {
const Env = use('Env')
const View = use('View')
View.global('APP_URL', function () {
return Env.get('APP_URL')
})
})
Same issue : forum.adonisjs.com/t/grab-full-page-url/1998
For sending images in email, Adonis has functions for that.
const Helpers = use ('Helpers')
embed (filePath, cid, [options])
Embed an image into the HTML body using a content id:
message.embed (Helpers.publicPath ('logo.png'),
https://adonisjs.com/docs/4.1/mail

How to execute Django uri template tags from within client side Java Script?

When we have a url tag in our java template it executes on a click
{% url 'product_details' pk=soproduct.id %} and it it is used inside the hyper link the destination will be full path including domain and path.
{{ soproduct.id }}
and works perfect and generate
http://127.0.0.1:8000/production/subproduct/details/7/
But if we want to use same template tag inside client side java script
var destination = {% url 'product_details' pk=soproduct.id %}
there is a problem that the link that will be generated will include the path but will not include the domain
/production/subproduct/details/7/
How this can be resolved?
UPDATE:
This is the script I try to execute it is located in the for loop in the django template .
<script>
var currentLocation = window.location.href;
function AddCardToTrello() {
Trello.addCard({
url: currentLocation,
name: "{{ soproduct.product }}",
due: {{ soproduct.required_date|date:"SHORT_DATE_FORMAT" }}
});
}
function addCardThenGo(url) {
AddCardToTrello();
window.location.href = url;
}
</script>
And right after the script I have my call
<a onclick="addCardThenGo({% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %})">Add to Trello</a>
So script will be repeated in the code as many times as loop goes with new parameters
Oh, I think I got it. If the code you provided is exactly the same you are using, then you forgot about quotes. It should be like this:
var destination = "{% url 'product_details' pk=soproduct.id %}";
And after that you can make this:
window.location.href = destination;
UPDATE
Please, try to do this:
<a onclick="addCardThenGo('{% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %}')">Add to Trello</a>

How to upload image using rest web services in symfony

I am trying upload image using rest web service in my symfony application. I have tried the following code but it is throwing the error undefined index photo. I want to know what is the right way to do it.
I have followed how to send / get files via web-services in php but it didn't worked.
Here is the my html file with which am hitting the application url:
<form action="http://localhost/superbApp/web/app_dev.php/upload" enctype='multipart/form-data' method="POST">
<input type="file" name="photo" ></br>
<input type="submit" name="submit" value="Upload">
</form>
And my controller method is like:
public function uploadAction(){
$request = $this->getRequest(); /*** get the request method ****/
$RequestMethod = $request->getMethod();
$uploads_dir = '/uploads';
foreach ($_FILES["photo"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["photo"]["tmp_name"][$key];
$name = $_FILES["photo"]["name"][$key];
move_uploaded_file($tmp_name, $uploads_dir."/".$name);
}
}
}
If you are using Symfony, you should use Symfony forms to do this. In your example, you put an URL which is pointing to app_dev.php, but that url doesn't work in production mode. In the Symfony cookbook there is an article explaining how upload files, which you should read:
http://symfony.com/doc/current/cookbook/doctrine/file_uploads.html
When you have done this, you can upload images via Rest WebService using the route specified for your action, specifying the Content-Type to multipart/form-data, and the name of the field which you add the image would be something like this package_yourbundle_yourformtype[file].