Debugging HTML Form Entry module to upload Images in the OpenMRS 2.x UI

Development
, ,
1

@mogoodrich @mksd @surangak

I am currently debugging the HTML Form entry module to see how the image upload works. When I try to upload the image via the new GUI html form, there are no errors shown regarding the upload in the developer tools.

I assume it is a problem with there server communication.

It would be really helpful if anyone can guide me on the flow so I could debug this efficiently to check how the upload works.

Thank you.

ps : this is a blocker

2

@akshika47 does the same upload work fine in the old legacy ui?

3

yes. It works fine :slight_smile:

4

If i want to reproduce the problem on my local machine, what steps should i take?

5

https://wiki.openmrs.org/pages/viewpage.action?pageId=36668565

I followed this and created a form which works in the new UI ( simple form )

And try to upload an image in the new GUI.

is it clear @dkayiwa? :smiley: :smiley:

6

Can you simplify my work a bit by doing for me as much as you can. For instance, if i need to first read a wiki page to create a form, it would help if you do it and simply attach it. Does it make sense? :smile:

Generally, when you need help, make it as easy and simple as possible for people to get in and help. :smile:

7

@dkayiwa really sorry for the inconvenience. I was on the mobile, since I wanted a quick reply I just put the link.

You can follow the link here : http://pastebin.com/hA3Qh1K4

and create a form using that code ( OpenMRS HTML form )

before that please create a complex obs, you might have to replace the obs id which I have put in the html form in the above link

Steps to create a complex obs ( copied from the wiki)

  1. Go to Administration > View Concept Dictionary
  2. Click on Add new concept
  3. Provide a name to the newly created concept
  4. Select Datatype as Complex & Handler as ImageHandler/TextHandler
  5. Click on Save and take a note of the Id of the newly created concept.

After that you can try the form in legacy UI and the new GUI, you will find it works in the legacy UI but not in the new GUI.

Thank you :slight_smile: :smiley:

8

Are you able to reproduce it at? http://uat01.openmrs.org:8080/openmrs

9

For some reason, both are not working on this manner. I will try with demo.openmrs.org if it works :confused:

10

@dkayiwa, it works with the demo.openmrs.org . Please try with the form I created as akshika.

:smiley: :smiley:

11

@akshika47 can i look at the tomcat log when you get errors?

12

@dkayiwa : Here it is : http://pastebin.com/6LU3fG86 :slight_smile:

13

This has APIAuthenticationException which seems unrelated to your problem.

14

yes. It is not related I suppose :confused:

15

Hi @dkayiwa @surangak @burke @harsha89 ,

It seems like i have narrowed down the reason for the problem. The new HTMLFormUI module uses jQuery AJAX to submit forms, where as the older one used direct form submits using http POST requests.

The AJAX form submission logic is implemented in htmlForm.js script. This uses jQuery to perform a post request when the submit button is pressed ( some additional stuff like pre/post submit calls to functions are also done but it is not that important for our case).

The issue is that we are using form.serialize() (http://stackoverflow.com/questions/4545081/how-to-do-file-upload-using-jquery-serialization) to serialize the form data and perform the post request. But this does not work for files attached. Hence the file attachment post parameters are not sent in the final POST request to the server.

The solution that I would like to suggest is to use jQuery Form plugin as described in the link above in our module and use it’s features in the htmlform.js script.

Would like to hear your thoughts regarding this.

1 Like
16

Why not simply send a normal POST? Is there any advantage using Ajax in this particular case?

17

@akshika47, if you read the solutions below the accepted answer on the stackoverflow post (and the comments on the accepted answer) it seems that HTML5 does actually allow you to upload form data without an extra jquery plugin.

I suggest you try one of those options (e.g. FormData).

18

Hi @surangak @darius @mogoodrich @dkayiwa @lluismf @harsha89 @burke

To upload files using ajax we have to use XHR2 file uploads.I tried performing a XHR2 request to upload the file using the new UI and the backend gives this error : http://pastebin.com/C9jh8t5y

I think that the backend doesn’t support xhr2 requests? it failed to handle requests that included files and and those that didn’t

What should I do to fix this error? I assume we need to fix the backend for this matter.

Let me know what should I do?

19

same error when I try FormData submission :frowning:

20

@akshika47, going forwards I’m going to have to ask you please spend more time on posting well-written questions, or I will not continue answering them.

In this example you should have included at least:

  1. a pointer to the code you are running (e.g. your module on github) with a specific pointer to the piece of code that matters.
  2. the specific thing you did to invoke this error message (in this case, what screen were you posting from, what URL did you submit to, and perhaps what the content of that submission looks like)

Looking at the error message, I see

A user context must first be passed to setUserContext()…

which implies that maybe you’re just not logged in when making this submission. But if you provided other info, then that could help point to a different problem.

1 Like