Javascript - Upload Excel file - Store in Node - DAM

[MeenakshiP]

Hi All,

I have a question regarding storing excel file in crxde by uploading thru onClick of a new button which I have already added under 'More..' option in DAM.

After clicking on a folder, under 'More..' option, I have added a new button as "Upload File"..

To achieve this, I have added /apps/mytest/clientlibs/dam-gui-admin/js/importFile.js file.

Default functionality in DAM is any selected file to upload will get uploaded to DAM current folder, after clicking on this button...

I am looking for option to:

1. On click of this button 'Upload File' under 'More..' option, user should be able to select the file to upload... (I tried this in javascript, but uploaded file always gets shown in current folder which I do not want).

And

2. The uploaded file should get stored into some node (For example, to store it somewhere under /content/abc/)  in crxde And NOT TO BE SHOWN in current folder in DAM to User...

How to override the default behavior in DAM, so that uploaded file do not gets stored in current folder after uploading, and it gets stored in some Node.

Please note that I am not using any jsp here. I am writing workflow for further business logic processing....Something like:

 var data = {
                ":status":"browser",
                "_charset_":"utf-8",
                model: "/etc/workflow/models/poc/file-import-workflow/jcr:content/model",
                payload: assetPaths,
                payloadType: "JCR_PATH" };

Can you please help?

Thanks.

[kautuk_sahni]

I would recommend you to please have a look at this Adobe Helpx article.

Link:- https://helpx.adobe.com/experience-manager/using/creating-custom-excel-service-experience.html

// This will help you in Creating a custom Excel Service for Adobe Experience Manager

   In this article, you will upload a Excel file and then persist its data in JCR. The Java Excel API and the JCR API libraries are used in this development article.  

Please go through it, i hope this would help you.

Thanks and Regards

Kautuk Sahni

[smacdonald2008]

Kautuk pointed you to correct articke. In this artivle, we read Excel data. However you can use JCR logic to store the file to a JCR node. I will post an article that shows you how to use JCR Api to store a file to a given node.

[smacdonald2008]

See this article to learn how to write an InputStream (which represents the Excel file) to the JCR location: https://helpx.adobe.com/experience-manager/using/post_files.html

[Vishal_S01]

Hi smacdonald2008,

https://helpx.adobe.com/experience-manager/using/post_files.html

The above link is not working, could you please check and confirm?

• can u help how to upload a pdf/doc file in the servlet call?

[kautuk_sahni]

Did you try the solution ?

~kautuk

[MeenakshiP]

Thanks for your quick response.

Yes I am aware about storing the data in JCR and worked on it quite earlier, but it was not thru javascript earlier...

I will try out the javascript part and post here my further findings.

[kautuk_sahni]

Thanks.

Please post the approach that you would follow for communities benefit.

Thanks and Regards

Kautuk Sahni

[smacdonald2008]

When uploading to AEM - typically you upload to a servlet. You can use JavaScript to perform an AJAX request - but you need to send the file to a servlet. 

[kautuk_sahni · Accepted solution]

Hi 

Any workflow you may follow to upload the file to server, it has to go through back-end code.

In the article :- https://helpx.adobe.com/experience-manager/using/creating-custom-excel-service-experience.html

The excel file is sent to servlet by form submission.

Even if you use AJEX, it will send stream/string/data to servlet, servlet needs to handle it and save it in JCR.

And  "how to upload file from AJEX" see this :- http://blog.teamtreehouse.com/uploading-files-ajax

~kautuk

[MeenakshiP]

In all these examples, Jsp is used. I do not have any jsp. I have only JS file which I created as: fileUploadTest.js under: /apps/abc/clientlibs/dam-gui-admin/js

Currently I have been calling workflow directly from JS, I think I need to write servlet and from that servlet, I will need to call workflow..

[kautuk_sahni]

MeenakshiP wrote...

I think I need to write servlet and from that servlet, I will need to call workflow..

You are right.

~kautuk

[MeenakshiP]

I referred below URL for similar approach adding a new button in DAM for File Upload option. Below Url is for Download and I used same css of DAM, except that I need to write separate code for upload, instead of downloading..

http://experience-aem.blogspot.com/2016/02/aem-61-add-save-as-pdf-button-to-assets-console-action-ba...

With using this, I am able to place a new button under 'More..' option in DAM, but it has download Icon.. (It is not critical though for now).

But I am still stuck at the same place of javascript issue in DAM..

$('input[type=file]').trigger('click');

Please note that all of the above help urls sent by you, contain creating a new page with Upload button and having jsp, but my requirement is to add a new button within DAM UI and I do not have any jsp.

[MeenakshiP]

I referred below URL for similar approach adding a new button in DAM for File Upload option. Below Url is for Download and I used same css of DAM, except that I need to write separate code for upload, instead of downloading..

http://experience-aem.blogspot.com/2016/02/aem-61-add-save-as-pdf-button-to-assets-console-action-ba...

With using this, I am able to place a new button under 'More..' option in DAM, but it has download Icon.. (It is not critical though for now).

But I am still stuck at the same place of javascript issue in DAM..

$('input[type=file]').trigger('click');

Please note that all of the above help urls sent by you, contain creating a new page with Upload button and having jsp, but my requirement is to add a new button within DAM UI and I do not have any jsp.

[MeenakshiP]

Here is the attached Upload window which is shown after I upload the file.

[smacdonald2008]

Is your Servlet working in this use case. 

[MeenakshiP]

Servlet gets called before uploading the file which I do not want.

[kautuk_sahni]

Did to try it?

If you have done it with some other way, please let the community know about it.

~kautuk

[MeenakshiP]

Hi,

No, I could not get any solution of this yet. Please note that all of the above help urls sent by you, contain creating a new page with Upload button and having jsp OUTSIDE DAM, but my requirement is to add the event of uploading file on a new button within DAM UI under 'More..', before calling servlet and I do not have any jsp.

I will post the solution, if I find it.

Thanks.

[smacdonald2008]

Why do you want a second upload option in the DAM UI? Why not use the available option? you are correct, the articles discuss uploading from AEM components using AJEX and how to use AssetManager API. What you want is a new menu option in DAM UI.

[MeenakshiP]

I wanted second upload option because this was business requirement..  For now, I asked business to change the requirement and I added the new button in DAM UI on which I trigger the workflow to do business logic, Also asked user to manually upload the file into the desired folder by click on 'Upload Assets'.

Thanks.