Expand my Community achievements bar.

SOLVED

EventHandler for file upload with smartfile gets old file

Avatar

Level 3

Hi guys, 

I am developing in CQ 5.6 and need to parse a file that was uploaded by a content author via the smartfile widget in the page properties. Content of the csv file needs to be parsed and sent as JSON feed to a component. 

So I've create an EventHandler that is triggered with:

@Property(name = "event.topics", value = "org/apache/sling/api/resource/Resource/ADDED")

The EventHandler works fine but unfortunately the event is triggered on "upload" and not when the dialog is "saved". So I am actually still grabbing the old file in CRX. 

I've checked the event log in Felix and see that NO event is fired when the dialog is 'oked' and saved. 

How can I grab the new file? 

Any idea or suggestion on how to implement this requirement is very much appreciated :)

Thanks, 

Alex

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hiya,
you could do a combination of the extjs and the solution with the servlet that Scott suggested in this way:

1) Follow the guide and implement the servlet (of course you will need to make the servlet function in your way instead:)
2) Create a new .js file that will be you custom widget and include that js so you widget will be available
4) Construct your widget like something similar : 

MyFileUploadField = CQ.Ext.extend(CQ.html5.form.SmartFile,  { onBeforeSubmit: function() { if(this.isUploaded){ console.log("It is uploaded!"); console.log("New file name:", this.fileInfo.fileName); console.log("New file path:", this.fileInfo.dataPath); console.log("New file size: ", this.fileInfo.size); //Put the ajax call here to the servlet here then } return true; } }); CQ.Ext.reg("custompathfield", MyFileUploadField);


This worked for me and the log showed the correct info of the newly uploaded file along with its path and size..

Good Luck
/Johan

View solution in original post

9 Replies

Avatar

Level 10

Another option you have is to write your own front end that lets the user upload a file to a sling servlet using AJAX. Then you will never have any issues at getting the correct file. We have a community article that show this use case:

http://scottsdigitalcommunity.blogspot.ca/2013/07/uploading-files-to-adobe-experience.html

HTH

Avatar

Level 7

Hiya,just a thought.
Would it be possible for you to use the JCR observer instead and one of the events there like Event.PERSIST ?
http://experiencedelivers.adobe.com/cemblog/en/experiencedelivers/2012/04/event_handling_incq.html

Or would it have to be at the sling level ?
Of course it would take coding to make the listener listen to the right thing here but it could probably work quite well if you get it right :)

Good Luck
/Johan

Avatar

Level 3

Hi, 

thanks for your reply. It absolutely does not have to be on a sling level, so I really liked your idea. 

I've tried it and unfortunately the Event.PERSIST is also triggered on "upload" and not on"saved" :( I am not sure that this makes sense.

So, I am still hunting for a solution. 

Cheers, 

Alex

Avatar

Level 7

Ah ok,
would it then maybe be possible for you to make use of the Event.PROPERTY_CHANGED instead and check if the jcr:data is changed, which would consist of the content of the file? I don't know if it would be the best of ideas, but it could be possible to somehow send a timed event that will do the parsing. Then let that wait for another few seconds after the file was uploaded since it seems like the actual file get saved a while later.

If not, maybe you should try the option that  Scott provided with you own custom upload function. That will also make sure that you will get more control of what's actually happening to the "correct file".

Good Luck
/Johan

 

Avatar

Level 3

Hi Ojjis, 

thanks for sending through another idea :)

In the meantime I went with Scott's option, which seems to work quite good. 

I am currently trying to transfer the setup from a page component level to a custom widget, because I need to have the upload available in the page properties. 

I am struggling a bit. So if you have any nice examples for something similar, that would be awesome :)

Cheers, 

Alex

Avatar

Level 7

Ah great, that seemed to be a good solution for you.
The following links are great when it comes to examples of extending widgets:
http://dev.day.com/docs/en/cq/current/developing/widgets.html
http://cq5cms.blogspot.se/2013/02/create-custom-xtype-multi-textfield.html

Once you have the widget as you want it. I would suggest that you might overlay the "foundation/components/page/tab_basic.xml" and add that widget to the page properties. In that one it could look like the following:

 

//...existing code for different options <my_custom_upload jcr:primaryType="cq:Widget" collapsed="{Boolean}true" collapsible="{Boolean}true" title="My custom uploads.." xtype="dialogfieldset"> <items jcr:primaryType="cq:WidgetCollection"> <pagetitle jcr:primaryType="cq:Widget" fieldLabel="My custom upload" name="./uploadedFile" xtype="mycustomwidget"/> //.. more things </items> </more_titles> //.... more existing code

 

But maybe you have already sorted that part out? I don't really know which part you were wondering about :)

Cheers
/Johan

Avatar

Level 3

Hi Johan, 

thanks for your help!

I've previously written some custom widgets which were rather 'simple', meaning without triggering a POST to a servlet but only creating some elements and JSONfying the values.

I currently have trouble implementing the widget itself. My initial though of taking a FormPanel - where I can conveniently add my form fields and my upload button and which basically does an AJAX request with the uploaded file - blew up in my face. No error messages but also no page properties dialog. Took me a while to realize that this is most probably do to creating a form in a form since the page properties dialog itself is already a form :(

So now I am stuck on making all of this work with a FileUploadFieldand and a Button component and replicate a form. Maybe this is an easy task if I were more familiar with JS ;)

Do you have any experience with something like that?

Cheers, 

Alex

Avatar

Correct answer by
Level 7

Hiya,
you could do a combination of the extjs and the solution with the servlet that Scott suggested in this way:

1) Follow the guide and implement the servlet (of course you will need to make the servlet function in your way instead:)
2) Create a new .js file that will be you custom widget and include that js so you widget will be available
4) Construct your widget like something similar : 

MyFileUploadField = CQ.Ext.extend(CQ.html5.form.SmartFile,  { onBeforeSubmit: function() { if(this.isUploaded){ console.log("It is uploaded!"); console.log("New file name:", this.fileInfo.fileName); console.log("New file path:", this.fileInfo.dataPath); console.log("New file size: ", this.fileInfo.size); //Put the ajax call here to the servlet here then } return true; } }); CQ.Ext.reg("custompathfield", MyFileUploadField);


This worked for me and the log showed the correct info of the newly uploaded file along with its path and size..

Good Luck
/Johan

Avatar

Level 10

I often find that when you can work with Java and POJOs (and using the proper API of course) - you can often get the results you need in your CQ applications.