How to add more than one upload field to a form?

Hello,
We are having a problem regarding OJS 3.2.1-1 file upload areas. Apparently, when a smarty template on a form has more than one area for uploading files (pkp_uploader_drop_zone), only what was added first works. We checked the code and everything is fine. Can you tell if the OJS has any limitations on the number of areas to upload per form?
Thankful!

Hi @Andrey_OS,

This is probably what you’re hunting for: pkp-lib/UploaderHandler.js at stable-3_2_1 · pkp/pkp-lib · GitHub

Can you describe what you’re working on in more detail? We’ve got some changes under way that might be relevant.

Regards,
Alec Smecher
Public Knowledge Project Team

We are developing a plugin that allows adding the journal’s logo by edition. Therefore, the journal’s logo on the OJS interface changes according to the edition viewed.

We need two upload fields in the form for adding / editing an edition, one for the cover and the other for the logo. We created a field for adding the logo just below where the cover is added, however, this second field is not working.

Here is an image of the attempt:

two_uploads

Hi @Andrey_OS,

Are you sure you’re assigning a unique ID to each field? If you’re following an example that uses…

{include file="controllers/fileUploadContainer.tpl" id="plupload"}

…then make sure your extension uses a different ID than plupload.

Regards,
Alec Smecher
Public Knowledge Project Team

Thanx @asmecher,

Yeah, we’re assigning a unique ID to each field. Follows the code.

Cover upload:

{fbvFormArea id="coverImage" title="editor.issues.coverPage"}
	{fbvFormSection}
		{include file="controllers/fileUploadContainer.tpl" id="coverImageUploader"}
		<input type="hidden" name="temporaryFileId" id="temporaryFileId" />
	{/fbvFormSection}
{/fbvFormArea}

Logo upload:

{fbvFormArea id="logoImage" title="Logo(add locale)"}
        {fbvFormSection}
			{include file="controllers/fileUploadContainer.tpl" id="logoImageUploader"}
			<input type="hidden" name="temporaryFileId" id="temporaryFileId" />
		{/fbvFormSection}
{/fbvFormArea}

Hi @Andrey_OS,

I’m not sure if this is the cause, but there is definitely an ID collision in the temporaryFileId field. In addition to your code quoted above, this appears be hard-coded in lib/pkp/js/controllers/form/FileUploadFormHandler.js, so you may need to make changes there in order to accommodate two file uploads on the same page.

Before you start down that particular rabbit hole, I know @NateWr has been working on some new file upload tools, so I’ll tag him in case he has another pattern to suggest.

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like

Yeah this may be a hard limit of the fileUploadContainer.tpl component that is used in the issue details form. As Alec said, we have a new form toolset that will handle this better in the future, but it’s not yet available for the issue details.

An alternative would be to use an <input type="file" ...> field directly and avoid the fileUploadContainer.tpl altogether. This would let you receive the file and handle the upload when the form is submitted. But you wouldn’t get the consistent UI with the cover image.

1 Like

Ok guys, I’ll try Nate’s alternative.
Thanks a lot!

That worked.
Thanks a lot @NateWr and @asmecher!! :slight_smile:

2 Likes