I have implemented a PicturesWall component in my app similar to this one on the antd site: https://ant.design/components/upload/#components-upload-demo-picture-card. When the user uploads images, thumbnails are generated and the user can preview and delete them. Now, this is when I create the item, but I implement an edit functionality where I have the input text fields populated with what the user entered when he created the item. How do I list the images the user uploaded when he created the item?
While editing, you need to update the state of fileList and previewImage similar to the initial state as given below:
this.setState({
fileList:[{uid:-1,status: 'done',url:'your image Url'}],
previewImage: 'your image Url',
});
You can do this by checking if you are getting the image data to be edited.
Related
I have a button in the table in the first page. When I click on the button, I want to save the panel Id and display on the next page. How can I call the data in angular? I'm desperately seeking for help since I'm stuck in there for almost a week now.
These are the images for my problem.
enter image description here
So this one is the first page, where there are buttons in each row.
After clicking Assign, it should show readonly data of ship name and panel name.
enter image description here
Regarding your issue, you should get the panel_id from params in the URL.
E.g.
In the routing of the assigning page, you just set the path:
{
path: 'assigning/:id',
component: <YourComponent>
}
So you can get the panel_id by using ActivatedRoute.
On click event of "Assign" button, you can pass the value to the ts component. In the ts file you can pass it via URL route as a parameter to the next page or store it in localStorage and read from the next page.
<button (click)="passValue(value)">Assign</button>
I am using cordova-plugin-photo-library to show gallery images in my app. I have used their photoLibrary.getLibrary() method to get the image. That methods returns two type of url:-
photoURL(ex:- cdvphotolibrary://photo?photoId=ADB24867-0CCB-4207-923A-DC9D44233434%2FL0%2F001)
filePath(Ex:- /var/mobile/Media/DCIM/100APPLE/IMG_0652.JPG)
I have tried to show image using either of those path. I am able to show the images using filePath but could not show the image using photoURL. All images does not return filePath. Could anyone can help me to show images using photoURL?
As per their doc we can show directly using photoURL all we have to use imgSrcSanitizationWhitelist(). I have tried but it's not working.
I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
How can I reference an image, editable in the Wagtail admin, from a CSS file?
I am designing a page type that will have a FooPage.banner_image field. The field is editable for each page, in the Wagtail admin; it describes the image to use for that page, as background on the banner.
The page style for that page then needs to use the banner image, referencing a URL to that specific image. What reference can I write in the CSS, so that it will get “the banner_image for this page” as a URL?
If you are needing an image URL outside of the template - see the docs about Generating renditions in Python.
To get a URL of an image, you need to generate a rendition and then get the URL of that rendition.
A rendition is what is generated when you pass in the resize rules (eg. width-400) in your templates.
To get a URL you can use this example code:
image_url = FooPage.banner_image.get_rendition('fill-300x186').url
OR get the original:
image_url = FooPage.banner_image.get_rendition('original').url
Working on Drupal, I have a page with a form made with "Webform" module, containing several fields (text fields and sliders) and a "Submit" button.
When the user enters the information and presses the "Submit" button, another page is loaded with custom code into it.
The new page is devided into 2 parts - the first one contains new information(based on the user input from the previous page); the second one contains (block) the same form, used in the previous page.
Is there a way to load the values, filled in the form from the first page into the new page?
First of all you would need to make a custom module, with the help of
hook_form_alter
You would need to store the previous form's information in cookies with prefix
Drupal_visitor_
and then display it in the new page like:
$form['submitted']['FirstName']['#default_value'] =
$_COOKIE[$firstname];
Thanks