Add ability to upload an image to NMDC submissions via submission portal

[mslarae13]

/study page of the submission portal should have a "upload image" spot to add a photo of the PI.

• shrink the PI ORCID box
• add a upload image box
  • How do we store these? Where should it go?
• info grey text should read "An image of the PI for a research study or a logo for a consortia to share on the study landing page.

[mslarae13]

@JamesTessmer let's make this one the next priority :)

Please edit my target sprint end date when you have an idea of how long this might take.

[JamesTessmer]

@pkalita-lbl @mslarae13
I’ve hit a crossroads here that I would like some input on. I think we have 2 real options for this after doing some documentation reading.
We can either:
A. Accept an image fill that a user uploads and then store that in the DB.
or
B. Accept a URL to an image hosting site where we can grab the image later.

On the vue side of things neither of these are too hard, so it’s more a matter of what’s going to make sense for the DB. In the LinkML schema we have study_image defined as an ImageValue which has a slot for a URL, so if we want to go with option A that will necessitate a LinkML schema change as well.
My opinion on it is that since the slot is defined already on the LinkML schema we follow that definition and accept a URL, and I’m not sure how big of a lift it is to add a way to store an image file to the LinkML schema and the Postgres DB on the server side.
I like the idea of an image upload more, but it’s definitely a bigger lift.

[mslarae13]

I agree with you here, @JamesTessmer & look forward to @pkalita-lbl 's opinions :)

[pkalita-lbl]

This question has come up before on an infrastructure call, but I don't think we came to a consensus. My recollection is that the two main ideas were:

1. The submission portal has an image file input. On save, the file is uploaded to the backend. The backend is responsible for saving that file to some persistent file system storage that is URL-accessible (presumably this would be on the NERSC file system while we're still using Spin) and then saving the URL into Postgres. The same URL would also go into the relevant slots in MongoDB (profile_image_url or study_image depending). Data portal ingest code wouldn't need any changes.
2. The submission portal has an image file input. On save, the frontend is responsible for converting the image into a base64-encoded data URL. This data URL is stored in Postgres just like any other submission field. It can also go into the relevant slots in MongoDB (it is technically a URL after all). The data portal ingest code would now need to be aware that both http(s): or data: URLs can come out of those slots and be updated accordingly.

In either case we're not asking users to upload their images to a third-party image hosting site. I think it's still worth having a discussion about these options with the larger development team. IMO 1 may take a little more effort to get set up but may offer better performance and flexibility in the long run.

[JamesTessmer]

Those solutions make sense, and I agree on the third-party sites. That's the biggest reason I liked uploading an actual image more.
I think of the two solutions you've given I'd lean towards converting the image to a data URL and that way we don't have to deal with another storage system and adding steps to write/read for that. But I also didn't know about data URLs until right now so I'm sure there are aspects of that I'm not considering.
If we do go with the first solution then I would probably need someone else to help out on working with whatever file system storage we wind up going with because I have no idea how to set that up or store/pull from it from it. I'd be willing to learn but for the sake of efficiency and time it would probably be good to have someone walk through it at least.

Either way it at least seems like we would want a component for file input so I can get that working, and maybe we can address this at the 12:30 pm meeting today if there's time for it.

[mslarae13]

Blocked:
How should NMDC store images? What is our policy?

Criteria to unblock:
@shreddd , @pkalita-lbl , @turbomam decide on image store & finalize what the UI should ask for.