Image upload/display in embedded form-html

[Jayendran Subramanian]

Hi All,

I want to upload/display(popup) the image file(jpg/gif/png) using embedded form. Can this be done? if not advise me the alternate.

Regards
Jayendran

[Valentin Vago]

Hi Jayendran,

displaying an image is not a huge problem per se. Just add a simple "img" tag with an absolute value for the "src" attribute pointing to the image, it does not need to be served by the camunda BPM platform (and, acctually, probably should not).

But uploading might be a bit more complex. The easiest way I can think of right now is to have a popup the user can open to upload files (they are some services for that, I personally use transloadit: https://transloadit.com/tour/file-uploads-and-imports).

When the upload is completed, the popup will interact with the "opener" window to pass the absolute URLs of images back to the form.

But they are other ways, for sure.

Anyways, you will need some javascripts in your embedded form.

I hope it helps.

All the best,

Valentin

[Jayendran Subramanian]

Hi Valentin,

Thanks for your guidelines. Just brief my use-case below.

I have two user task with embedded forms(around 30 fields) , one is for loan application form and another is for verification form. Loan application form having a field called proof of document:, for that image of applicant document should be uploaded for form submission.And then the same image needs to be retrieved in another user task for verification. Once fields/document verified by the second user then we’ll invoke service call for credit score.

In oder to archive image upload/retrieve , i have tried through html tags below but its not supported.Please advise me the best practices.

    <div class="control-group">
    <label class="control-label">proof of document</label>
    <div class="controls">
    <input form-field type="file" name="filename" accept="image/gif, image/jpg, image/png">
    </div>
    </div>


Regards,
Jayendran

[Valentin Vago]

Hi Jayendran,

this is what I meant.
You have (as far as I know) to "outsource" the upload part to an other solution who will keep a refrence about the document and then pass back that reference to the uploaded file to the original (embedded task) form.

All the best,

Valentin

[Choi병춘]

Outsourcing file upload is not good way especially when file is confidential and internal-use only in the company.

I really like camunda to provide template or guide for file uploading and displaying it as attachments of task.

I like this simple UI as example.

https://blueimp.github.io/jQuery-File-Upload/angularjs.html