I am developing a website with a custom Member type definition. Among the custom properties on the Member type is a profile photo. The editor for this property is defined as an Umbraco.MediaPicker3.
Members of the site do not have back office access. Therefore, to allow them to register and update their profile, I have created custom forms using Razor views and a SurfaceController to process the data. I would like the forms to allow users to choose from existing Media assets on the site or to upload a new file, much as the MediaPicker3 does in the back office.
As I understand it, it is not possible to use the MediaPicker3 in a front-end form. Can anyone tell me if there is another, existing solution to this requirement (eg. a third-party component) that I can use?
It depends on how much of the existing Media you want them to be able to choose from and how important it is for the UI to feel like the existing Media Picker, and what strategy you are using for the front end of your site, as to what would be the easiest way to achieve this.
But if you add the MediaPicker to the MemberType.
Then on your form, you can pull thumbnails of existing Media from the Media Section (or perhaps on the content item you are displaying the form, you have a picker for 'Media to select from'...
If a user clicks on one of the media thumbnails, you store the Umbraco Id as what they are submitting.
You can also add a Html Upload Field to the form and this will post a stream of the image to your SurfaceController,
You can then use the MediaService to take this stream and create a new item in the Media Section, which will then have a Unique Id
Finally, either way, you now have an Umbraco Id representing an image and you can use this to 'set' the value of the picker on the Member for their Profile Picture.
Thanks for the detailed response Marc, and sorry for the delay in replying.
I understand the process of uploading an image, creating a new item in the Media Section and assigning it programmatically as the value of the Member media picker.
What I am not clear about is how to display existing media items on my custom form for the user to select. I know I can use the MediaService to get the data, but do I need to create my own UI for this, or is there a ready-made component I can use? It seems like a typical requirement and I imagine that someone has already solved the problem.
To enable users to choose from existing media assets or upload a new file for their profile photo in Umbraco 9, you can consider using a third-party component or implementing a custom solution. Here are a few options you can explore:
Media Picker Property Editor: Although the MediaPicker3 property editor is not available for front-end forms in Umbraco, you can create a custom property editor specifically for your front-end forms. This custom property editor would allow users to select existing media assets or upload new files. You can refer to the Umbraco documentation on creating custom property editors for guidance.
Third-Party Components: There are various third-party components available that offer file upload and media selection features. These components can integrate with Umbraco and provide the functionality you need. Some popular options include:
Uploader: A flexible file uploader component that allows users to upload and select media files. It integrates well with Umbraco and can be customized to suit your requirements.
Dropzone.js: A popular JavaScript library for drag-and-drop file uploads. It can be integrated with Umbraco to handle media uploads and selection.
When using third-party components, make sure to follow their documentation and guidelines for integration with Umbraco.
Custom Development: If you have specific requirements that are not met by existing solutions, you can develop a custom solution using Umbraco's APIs. This involves creating a custom form with appropriate input fields and handling the file upload and media selection process in a custom SurfaceController. You can leverage Umbraco's MediaService to handle media operations like uploading and retrieving files. TellHappyStar
Adding a profile photo to Member definition
I am developing a website with a custom Member type definition. Among the custom properties on the Member type is a profile photo. The editor for this property is defined as an Umbraco.MediaPicker3.
Members of the site do not have back office access. Therefore, to allow them to register and update their profile, I have created custom forms using Razor views and a SurfaceController to process the data. I would like the forms to allow users to choose from existing Media assets on the site or to upload a new file, much as the MediaPicker3 does in the back office.
As I understand it, it is not possible to use the MediaPicker3 in a front-end form. Can anyone tell me if there is another, existing solution to this requirement (eg. a third-party component) that I can use?
Hi Paul
It depends on how much of the existing Media you want them to be able to choose from and how important it is for the UI to feel like the existing Media Picker, and what strategy you are using for the front end of your site, as to what would be the easiest way to achieve this.
But if you add the MediaPicker to the MemberType.
Then on your form, you can pull thumbnails of existing Media from the Media Section (or perhaps on the content item you are displaying the form, you have a picker for 'Media to select from'...
If a user clicks on one of the media thumbnails, you store the Umbraco Id as what they are submitting.
You can also add a Html Upload Field to the form and this will post a stream of the image to your SurfaceController,
You can then use the MediaService to take this stream and create a new item in the Media Section, which will then have a Unique Id
(example here: https://docs.umbraco.com/umbraco-cms/reference/management/services/mediaservice)
Finally, either way, you now have an Umbraco Id representing an image and you can use this to 'set' the value of the picker on the Member for their Profile Picture.
Example of setting a MediaPicker value (albeit on a content item) here: https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3#add-values-programmatically
You would be using the MemberService to update the member:
https://apidocs.umbraco.com/v9/csharp/api/Umbraco.Cms.Core.Services.Implement.MemberService.html?q=MemberService
But data would be stored in same way.
regards
Marc
Thanks for the detailed response Marc, and sorry for the delay in replying.
I understand the process of uploading an image, creating a new item in the Media Section and assigning it programmatically as the value of the Member media picker.
What I am not clear about is how to display existing media items on my custom form for the user to select. I know I can use the MediaService to get the data, but do I need to create my own UI for this, or is there a ready-made component I can use? It seems like a typical requirement and I imagine that someone has already solved the problem.
Hello Paul,
I can see your comment
To enable users to choose from existing media assets or upload a new file for their profile photo in Umbraco 9, you can consider using a third-party component or implementing a custom solution. Here are a few options you can explore:
Media Picker Property Editor: Although the MediaPicker3 property editor is not available for front-end forms in Umbraco, you can create a custom property editor specifically for your front-end forms. This custom property editor would allow users to select existing media assets or upload new files. You can refer to the Umbraco documentation on creating custom property editors for guidance.
Third-Party Components: There are various third-party components available that offer file upload and media selection features. These components can integrate with Umbraco and provide the functionality you need. Some popular options include:
Uploader: A flexible file uploader component that allows users to upload and select media files. It integrates well with Umbraco and can be customized to suit your requirements. Dropzone.js: A popular JavaScript library for drag-and-drop file uploads. It can be integrated with Umbraco to handle media uploads and selection. When using third-party components, make sure to follow their documentation and guidelines for integration with Umbraco.
Custom Development: If you have specific requirements that are not met by existing solutions, you can develop a custom solution using Umbraco's APIs. This involves creating a custom form with appropriate input fields and handling the file upload and media selection process in a custom SurfaceController. You can leverage Umbraco's MediaService to handle media operations like uploading and retrieving files. TellHappyStar
This might helps you
Thanks and regards, ElizabethRose
Many thanks Elizabeth, I hope I will find a solution from your suggestions. Going to investigate ...
is working on a reply...