[OJS 3.3] Custom theme: How to add a field to upload an image?

In my custom theme I would like to add an optional field to upload an additional image.
I would like to understand how to do it for both journals and the main site.

I think I have to do:

$this->addOption('my_new_option_name','FieldUploadImage',array(...))

So what to put in place of “…”?

Hi @eniocarboni,

Unfortunately, addOption method doesn’t support file uploads: pkp-lib/ThemePlugin.inc.php at b92e3ea9cc773d9a602b17aeaf8a4280a5bf029a · pkp/pkp-lib · GitHub. Thus, to implement this approach would be quite tricky - overring the method from a theme and implement all the background logic.
Depending on the task, the easier solution would be hardcode it in the template or the text option that is expecting URL pointing to the image.

Hi @Vitaliy ,
in function init() I do:
$request = Application::get()->getRequest();
$dispatcher = $request->getDispatcher();
$temporaryFileApiUrl = $dispatcher->url($request, ROUTE_API, CONTEXT_ID_ALL, ‘temporaryFiles’);

So then
$this->addOption(‘my_new_option_name’,‘FieldUploadImage’,array(
‘label’ …

‘options’ => [
‘url’ => $temporaryFileApiUrl,
]
))
At this point I have the upload field working.
After the upload, the image file is deposited in the temporary area which I would not know how to move to the public area.

Hi @eniocarboni,

Sorry for the late reply. Do you have the code of the plugin on Github/Gitlab, so I can take a look (if you still need help in this)?

Hi @Vitaliy ,
i just put part of my sub theme on GitHub - eniocarboni/testojsthemefileupload: Test OJS child theme FileUpload on Appearance:Theme Settings

Interesting, this might work. Try _uploadPublicFile handler instead of temporaryFiles. The documentation on API is here: REST API - OJS

Hi @Vitaliy that’s great!
Now the image upload on public/site/images/#logged_user/
Problems:

  • when reload the page on theme setting we lose the image preview;
  • how can I find the path and the name of the image file starting from the field name (headerImg)?

Try instead of
'value' => $site->getData('headerImg'),
use
'value' => $this->getOption('headerImg'),

Unfortunately nothing changes.
This is the sceenshot after refresh page:
Screenshot_20210513_113204

What does $this->getOption('headerImg') returns?

It seems to return a string in json format with only the alternative text “alt”:
{“altText”:“test_test_test_alt”}

Hmm, and it should contain also url. I didn’t get a chance to test this new feature with additional option types and this requires diving into the code. @NateWr, do you happen to know where the problem might be here?

I haven’t looked closely, but I think you’ll struggle to get this to work properly. Where the image upload field is working now it expects that the handler will receive a specific value pointing to a temporary file, move the file into the correct place, and rewrite the option value before saving.

The handler you would want to intervene in is here. However, have you considered using the Publisher Library instead? The user could upload a file to the publisher library, make it public, then enter the URL into a text theme option.

Hi @NateWr ,
I needed a valid upload option for the theme at both the journal and global site level.
The Publisher Library could be a valid temporary solution for a journal theme but not for global site.
Thank you very much I will try another way without using files to upload.