How to send file using in servresource in Ajax call

RE: How to send file using in servresource in Ajax call

2019-10-02T14:47:08Z

Hi all

I'm currently using serveResource to upload files and other AJAX stuff, including sending and receiving data to the server side. The reason is that it's the only way, I think, to send data without triggering a page refresh - re-rendering all portlets in the page. It might not be the intended use of serveResource but it works well and it's fast.

HTH

Fernando

RE: How to send file using in servresource in Ajax call

2015-01-22T13:37:12Z

Jeet Chatterjee:

I did not get you David.Please be more specific i am new to liferay

This has nothing to do with Liferay, this is the basic JSR 286 specification.

In the specification, there are 4 types of methods a portlet can handle: action, render, resource, and event. Each type has a separate purpose, action is for handling user activity, render is for rendering the html fragment that will be part of a page, resource is for serving resources back to the browser (i.e. fetching ajax data, building images, document files, etc.), and event is for IPC based upon event handling.

So you're trying to force the resource type to all of a sudden act like it is another action type, which it is not.

Check out the definition: http://www.oracle.com/technetwork/java/jsr286-2-141964.html#Serving_Resources.

What you're doing is, effectively, misusing serveResource by passing in arguments to build a dynamic resource by giving a file to be uploaded. This is not how the serveResource was meant to be used and if you actually could get it working, it would only work because of a misuse of the specification.

New to liferay is no excuse to be misusing the specification. Instead of just sitting down and try to code something up, I'd suggest learning more about the portal specification and how things should be handled.

RE: How to send file using in servresource in Ajax call

2015-01-22T06:17:13Z

I did not get you David.Please be more specific i am new to liferay

RE: How to send file using in servresource in Ajax call

2015-01-21T06:03:10Z

Hi Jeet,

Are you not able to send data with - data:{lname:lname,fname:fname} ?

Then you can do what david suggested, add param in your url.

Regards.

RE: How to send file using in servresource in Ajax call

2015-01-20T18:49:19Z

If this works it is merely a fluke. The JSR specification never meant for the serve resource request to be used for a file upload.

As far as passing additional data, why not use url parameters?

RE: How to send file using in servresource in Ajax call

2015-01-20T14:47:50Z

Thank for replying my post,I have successfully sended file to the server with the help of you people. But i stuck in some where now,

I can send the file to the server using this ajaxFileUpload ,but i want to send all the data along with it i am getting from the textboxes.How to send all the data to the server along with the file name can anyone help. am doing this


<portlet:resourceurl var="candidateInterestURL" id="candidateInterestURLID" />
 
                var fname = $('#<portlet:namespace />fname').val();
		var lname = $('#<portlet:namespace />lname').val();

      $.ajaxFileUpload({
			
			url:'&lt;%=candidateInterestURL%&gt;',
			secureuri : false,
			fileElementId : 'fileName',
			dataType : 'json',
			data:{lname:lname},
		    success : function(data, status) {
				 
		    	alert('hiii');
			 },
			 error:function (data, status, e){
				 alert("There might be some issue with this file.");
			 }
		});

Can anyone help??

RE: How to send file using in servresource in Ajax call

2015-01-20T13:36:27Z

Can you provide the definition for candidateInterestURL?

It's important to understand you cannot upload a file using the serveResource URL, it can only be a post to an action URL.

serveResource is only for returning resources via ajax.

Sorry if this is actually far away from what you're trying to ask, but mixing serve resource with file upload is fairly confusing.

RE: How to send file using in servresource in Ajax call

2015-01-20T09:55:33Z

I have tried this but not working for me ..

<script type="text/javascript">

function sendToConsultant(){

var url = "<%=candidateInterestURL%>";

var fname = $('#<portlet:namespace />fname').val();
var lname = $('#<portlet:namespace />lname').val();
var email = $('#<portlet:namespace />email').val();
var phone = $('#<portlet:namespace />phone').val();
var jobtitle = $('#<portlet:namespace />jobtitle').val();
var comments = $('#<portlet:namespace />comments').val();
var type = "candidateInterestInJob";

jQuery.getJSON(url+"&type="+type+"&fname="+fname+"&lname="+lname+"&email="+email+"&phone="+phone+"&jobtitle="+jobtitle+"&comments="+comments, function(data) {

});

$.ajaxFileUpload({

url:'<%=candidateInterestURL%>',
secureuri : false,
fileElementId : 'fileName',
dataType : 'json',

success : function(data, status) {

alert(fileElementId);
}
});

}

</script>
<div id="candidateInfo">
<div id="candidateInfoBanner">
Connect with Our Consultant
<hr class="hrinJobDetails">
</div>
<form method="post" enctype="multipart/form-data" name="form" id=" " >
<table>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="fname" id="fname" type="type" placeholder="First Name" size="40" /></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="lname" id="lname" type="type" placeholder="Last Name" size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="email" id="email" type="type" placeholder="Email" size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="phone" id="phone" type="type" placeholder="Phone No." size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxNonMandetory" label="" name="jobtitle" id="jobtitle" type="type" placeholder="Title" size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxNonMandetory" label="" type="textarea" id="comments" rows="5" cols="44" name="comments" placeholder="Your Comments"/></td>
</tr>
<tr>
<%-- <td><aui:input inlineField="true" type="file" name="fileName" label="Upload your CV. Supported Formats: doc, docx, rtf, pdf." size="40" accept=".doc,.docx,.rtf,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf,application/pdf"/></td> --%>
<td><input type="file" name="fileName" id="fileName" value="Browse" /></td>
</tr>
<tr>
<td>

<aui:button type="submit" name="Submit" cssClass="applyJobToConsultant" value="Send" style="width: 160px" onClick="sendToConsultant()"></aui:button>
</td>
</tr>
</table>
</form>
</div>

In the Action class

else if(type.equals("candidateInterestInJob")){

System.out.println("Reached");
String firstName = null;
String lastName = null;
String emailOfCandidate = null;
String phoneNo = null;
String candidateJobTitle = null;
String candidateComments = null;
UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(resourceRequest);

firstName = ParamUtil.getString(uploadRequest,"fname");
lastName = ParamUtil.getString(uploadRequest,"lname");
emailOfCandidate = ParamUtil.getString(uploadRequest,"email");
phoneNo = ParamUtil.getString(uploadRequest,"phone");
candidateJobTitle = ParamUtil.getString(uploadRequest,"jobtitle");
candidateComments = ParamUtil.getString(uploadRequest,"comments");
//File resume = uploadRequest.getFile("fileName");

System.out.println(firstName+lastName+emailOfCandidate+phoneNo+candidateJobTitle+candidateComments);
InputStream inputStream = uploadRequest.getFileAsStream("fileName");
System.out.println("-------------");
if(Validator.isNotNull(inputStream)){
File file = FileUtil.createTempFile(inputStream);
System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>."+file);
String uploadString = getFileAsString(file);
System.out.println(">>>>>>>"+uploadString);

if (Validator.isNotNull(uploadString)) {

resourceResponse.getWriter().write( "validated_successfully");

}

RE: How to send file using in servresource in Ajax call

2015-01-19T14:14:01Z

HI
it may help you..

http://michi-path.blogspot.in/2013/02/file-upload-using-serveresource-ajax.html
https://www.liferay.com/community/forums/-/message_boards/message/31536959

Regards,
Meera Prince

RE: How to send file using in servresource in Ajax call

2015-01-19T13:58:00Z

You cannot upload any file using ajax, you may use any js library that can help you.

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

or

https://github.com/davgothic/AjaxFileUpload

RE: How to send file using in servresource in Ajax call

2015-01-19T13:52:58Z

Hi Jeet,

You can take a reference from below code -


	$.ajaxFileUpload({
			url:ajaxUrl, 
			secureuri:false,
			fileElementId:elementId,
			dataType: 'json',
			success: function (data, status)
			{
				// Success
				
			},
			error: function (data, status, e)
			{
				alert("There might be some issue with this file.");
			}
		});

Reference :: http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

Regards.

How to send file using in servresource in Ajax call

2015-01-19T13:32:11Z

I am using servresource to send parameters to action all fields i have sccessfully submitted by i have one upload button there in which i have to attach CV of some candidate.i want to send the file using that servesource call to the action.But the way i am doing it ,getting null every time .Here is my code ...

<script type="text/javascript">

function sendToConsultant(){

var fname = $('#<portlet:namespace />fname').val();
var lname = $('#<portlet:namespace />lname').val();
var email = $('#<portlet:namespace />email').val();
var phone = $('#<portlet:namespace />phone').val();
var jobtitle = $('#<portlet:namespace />jobtitle').val();
var comments = $('#<portlet:namespace />comments').val();
var fileName = $('#<portlet:namespace />fileName');
var type = "candidateInterestInJob";
var url = "<%=candidateInterestURL%>";
alert(fileName)
jQuery.getJSON(url+"&type="+type+"&fname="+fname+"&lname="+lname+"&email="+email+"&phone="+phone+"&jobtitle="+jobtitle+"&comments="+comments+"&fileName="+fileName, function(data) {

});

}

</script>

<table>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="fname" id="fname" type="type" placeholder="First Name" size="40" /></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="lname" id="lname" type="type" placeholder="Last Name" size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="email" id="email" type="type" placeholder="Email" size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxJobDetails" label="" name="phone" id="phone" type="type" placeholder="Phone No." size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxNonMandetory" label="" name="jobtitle" id="jobtitle" type="type" placeholder="Title" size="40"/></td>
</tr>
<tr>
<td><aui:input cssClass="textBoxNonMandetory" label="" type="textarea" id="comments" rows="5" cols="44" name="comments" placeholder="Your Comments"/></td>
</tr>
<tr>
<td><aui:input inlineField="true" type="file" name="fileName" label="Upload your CV. Supported Formats: doc, docx, rtf, pdf." size="75" accept=".doc,.docx,.rtf,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf,application/pdf"/></td>
</tr>
<tr>
<td>

<aui:button type="submit" name="Submit" cssClass="applyJobToConsultant" value="Send" style="width: 160px" onClick="sendToConsultant()"></aui:button>
</td>
</tr>
</table>
</div>

Here the filename i am sending is getting NULL all the time can anyone help me ???Thanks is advance....And also i have to use that getJson() method and have to pass the filename as parameter within that function