Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Is it possible for a user to embed a graphic file in a form?

Avatar

Level 2

Hi all,

I'm designing a form that users will submit to report problems with software packages to our support teams. I would like the user completing the form to be able to embed a screenshot of the problem they are having into the form (I was planning to put this in a repeating table so that they can add more than one screenshot).

What I don't want to do, however, is have the actual full size screenshot displayed, when they embed the screenshot file. I want there to be an icon that 'represents' the screenshot that the support personnel can then double click on to actually view it (a bit like embedding objects in MS Words docs I suppose).

Does anyone know if this is possible? The Image Field controld doesn't seem to work in this manner.

Thanks

Matt

4 Replies

Avatar

Level 6

In one of my forms I used similar concept, however I used Button and Image overlay on each other and have code under Button Click event....But the code attaches any document/file the user chose attach rather than just screenshot....this could be starting point for you to try some thing you want.... Following is the code I used....

var aInstance = this.parent.index; //this is the table row instance in your case

var selectFileName = "ScreenShot" + aInstance; //this is to assign a relative name for each image they like to upload

var doc = event.target;

doc.importDataObject(selectFileName); //opens the dialog box for user to navigate and select any file to attach

var MyPar1 = doc.getDataObject(selectFileName);

var filename = MyPar1.path; //get the file path in to a variable so you can extract the name of the file they select and determine type of the file and do some exception coding.

Good luck,

Avatar

Level 2

Hi there,

Thanks very much for your reply and the code sample. I've managed to get that to work to an extent, but I'm still not sure how I actually get the file embedded into the form. The code below will open the dialogue box and I can select a file, but after I do so, nothing else seems to happen.

Is there some more code required that I'm missing? Unfortunately my skills with Javascript are extremely limited!

Thanks again,

Matt

Avatar

Level 2

Hi again,

I was just wondering - does anyone know if this is possible?

Thanks

Matt

Avatar

Level 10

Add this line to the script above.

It will open the attachment pane, where you can see the attached file.

Remember, that the described method only works in Acrobat not in Reader.