EventHandler for file upload with smartfile gets old file | Community
Skip to main content
D
doeringa
Level 3
October 16, 2015
Solved

EventHandler for file upload with smartfile gets old file

  • October 16, 2015
  • 9 replies
  • 2287 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Ojjis

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

9 replies

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

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

Ojjis
Ojjis
Level 7
October 16, 2015

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

D
doeringaAuthor
Level 3
October 16, 2015

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

Ojjis
Ojjis
Level 7
October 16, 2015

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
 

D
doeringaAuthor
Level 3
October 16, 2015

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

Ojjis
Ojjis
Level 7
October 16, 2015

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

D
doeringaAuthor
Level 3
October 16, 2015

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

Ojjis
OjjisAccepted solution
Level 7
October 16, 2015

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

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

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. 

Terms & ConditionsAccessibility statement

Loading footer...