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

Software Support
1

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!

2

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

3

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

4

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

5

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}
6

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
7

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
8

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

9

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

2 Likes
10

Hello!

Sorry for reviving an old post but this is the exact issue I am having. What should be the best way of uploading multiple files in a single form with v3.3.x.x? :slight_smile:

Thanks in advance!