[cfwheels] Ajax image upload using cfwheels

[Squaye]

I'm not sure what i am doing wrong. I am trying to upload an image
using JQuery Ajax plugin from Andrew Valum's ajax upload plugin,
http://valums.com/ajax-upload/ and cfml. During my test, i notice that
the image is been uploaded but the picture's preview does not come up
as expected but i notice that the image tag gets the src attribute.
can anyone help me. listed below is the sample code

view code
#startFormTag(action="enroll", id = "testForm")#

<div id="fHeader">Pupil's Information</div><
<div id="preview1" style="width:100px; height:100px;"><img
id="thumb" src=""></div></td></tr>
#hiddenField(objectName="applicant", property="picture")#
<span style="color:red;" class="status"></span>
#fileField(label="Please upload picture:", objectName="applicant",
property="picture1", append="<br/>", prependToLabel="",
appendToLabel="<br/>", labelPlacement="before")#
#endFormTag()

Jquery code
$(document).ready(function(){

var thumb = $('img#thumb');
var picture = $('input#applicant-picture');

new AjaxUpload('applicant-picture1', {
action: 'http://localhost/mysite/index.cfm/enrollment/upload',
name: 'image',
onSubmit: function(file, extension) {
$('span.status').text('Loading preview...');
},
onComplete: function(file, response) {
thumb.load(function(){
$('span.status').text("");
thumb.unbind();
});
response = $.trim(response)
thumb.attr('src', response).show();
picture.attr('value', response);
}
});
});

action code
<cffunction name="upload" access="remote" returnformat="JSON">

<cflock throwontimeout="false" timeout="60" type="exclusive">

<cfset destDir = expandPath('../stlouis/files/applicant/')>

<cfif not directoryExists(destDir)>
<cfdirectory action="create" directory="#destDir#">
</cfif>
<cffile action="upload" destination="#destDir#"
nameConflict="makeunique" filefield="image" result="result">

<cfif result.fileWasSaved>
<cfset newFile = result.Serverdirectory&'\'&result.serverfile>
<cfif not isImageFile(newFile)>
<cfset error = "The file you upload is an invalid image file">
<cffile action="delete" file="#newFile#">
<cfelse>
<cfset cfImage = imageNew(newFile)>
<cfset imageData = imageInfo(cfImage)>
</cfif>

<cfif imageData.width gt 128 or imageData.height gt 160>
<cfset myImage = imageNew(newFile)>
<cfset imageResize(myImage, "128", "160")>
</cfif>
<cfif imageData.width lt 128 or imageData.height lt 160>
<cfset myImage = imageNew(newFile)>
<cfset imageResize(myImage, "128", "160")>
</cfif>
</cfif>

<cfset renderText("#newFile#")>

thanks in advance!

--
You received this message because you are subscribed to the Google Groups "ColdFusion on Wheels" group.
To post to this group, send email to cfwh...@googlegroups.com.
To unsubscribe from this group, send email to cfwheels+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cfwheels?hl=en.

[tpet...@gmail.com]

do you have ColdFusion debugging turned on? if so, you'll need to add:

<cfsetting showdebugoutput="false">

to your action.

On Apr 23, 5:45 am, Squaye <squ...@hyperionint.net> wrote:
> I'm not sure what i am doing wrong. I am trying to upload an image

> using JQuery Ajax plugin from Andrew Valum's ajax upload plugin,http://valums.com/ajax-upload/and cfml. During my test, i notice that

[Squaye]

i tried that but it still doesn't work

On Apr 23, 11:47 am, "tpetru...@gmail.com" <tpetru...@gmail.com>
wrote:

> do you have ColdFusion debugging turned on? if so, you'll need to add:
>
> <cfsetting showdebugoutput="false">
>
> to your action.
>
> On Apr 23, 5:45 am, Squaye <squ...@hyperionint.net> wrote:
>
>
>
> > I'm not sure what i am doing wrong. I am trying to upload an image

> > using JQuery Ajax plugin from Andrew Valum's ajax upload plugin,http://valums.com/ajax-upload/andcfml. During my test, i notice that

[tpet...@gmail.com]

can you post the source of the form that wheels create for you. i
think you might have some variables misnamed.

[Squaye]

this is the entire code cfwheels generated form
<form action="/stlouis/index.cfm/enrollment/enroll" id="testForm"
method="post">

<tr><td colspan="2"><div id="fHeader">Pupil's Information</div></
td></tr>

<tr><td colspan="2"><div id="preview1" style="width:100px; height:

100px;"><img id="thumb" src=""></div></td></tr>

<input id="applicant-picture" name="applicant[picture]"
type="hidden" value="" />
<tr><td colspan="2"><span style="color:red;" class="status"></span></
td></tr>
<tr><td><label for="applicant-picture1">Please upload picture:</
label></td><td><input id="applicant-picture1"
name="applicant[picture1]" type="file" /></td><tr> <tr><td><label
for="applicant-pupilFirstName">First name:</label></td><td><input
id="applicant-pupilFirstName" name="applicant[pupilFirstName]"
type="text" value="" /></td><tr> <tr><td><label for="applicant-
pupilLastName">Last name:</label></td><td><input id="applicant-
pupilLastName" name="applicant[pupilLastName]" type="text" value="" /
></td><tr> <tr><td><label for="applicant-pupilMiddleName">Middle
name:</label></td><td><input id="applicant-pupilMiddleName"
name="applicant[pupilMiddleName]" type="text" value="" /></td><tr>
<tr><td>Date of Birth:</td><td><select id="applicant-birthDate-
month" name="applicant[birthDate]($month)"><option value=""></
option><option value="1">January</option><option value="2">February</
option><option value="3">March</option><option value="4">April</
option><option value="5">May</option><option value="6">June</
option><option value="7">July</option><option value="8">August</
option><option value="9">September</option><option value="10">October</
option><option value="11">November</option><option
value="12">December</option></select> <select id="applicant-birthDate-
day" name="applicant[birthDate]($day)"><option value=""></
option><option value="1">1</option><option value="2">2</option><option
value="3">3</option><option value="4">4</option><option value="5">5</
option><option value="6">6</option><option value="7">7</option><option
value="8">8</option><option value="9">9</option><option value="10">10</
option><option value="11">11</option><option value="12">12</
option><option value="13">13</option><option value="14">14</
option><option value="15">15</option><option value="16">16</
option><option value="17">17</option><option value="18">18</
option><option value="19">19</option><option value="20">20</
option><option value="21">21</option><option value="22">22</
option><option value="23">23</option><option value="24">24</
option><option value="25">25</option><option value="26">26</
option><option value="27">27</option><option value="28">28</
option><option value="29">29</option><option value="30">30</
option><option value="31">31</option></select> <select id="applicant-
birthDate-year" name="applicant[birthDate]($year)"><option value=""></
option><option value="1950">1950</option><option value="1951">1951</
option><option value="1952">1952</option><option value="1953">1953</
option><option value="1954">1954</option><option value="1955">1955</
option><option value="1956">1956</option><option value="1957">1957</
option><option value="1958">1958</option><option value="1959">1959</
option><option value="1960">1960</option><option value="1961">1961</
option><option value="1962">1962</option><option value="1963">1963</
option><option value="1964">1964</option><option value="1965">1965</
option><option value="1966">1966</option><option value="1967">1967</
option><option value="1968">1968</option><option value="1969">1969</
option><option value="1970">1970</option><option value="1971">1971</
option><option value="1972">1972</option><option value="1973">1973</
option><option value="1974">1974</option><option value="1975">1975</
option><option value="1976">1976</option><option value="1977">1977</
option><option value="1978">1978</option><option value="1979">1979</
option><option value="1980">1980</option><option value="1981">1981</
option><option value="1982">1982</option><option value="1983">1983</
option><option value="1984">1984</option><option value="1985">1985</
option><option value="1986">1986</option><option value="1987">1987</
option><option value="1988">1988</option><option value="1989">1989</
option><option value="1990">1990</option><option value="1991">1991</
option><option value="1992">1992</option><option value="1993">1993</
option><option value="1994">1994</option><option value="1995">1995</
option><option value="1996">1996</option><option value="1997">1997</
option><option value="1998">1998</option><option value="1999">1999</
option><option value="2000">2000</option><option value="2001">2001</
option><option value="2002">2002</option><option value="2003">2003</
option><option value="2004">2004</option><option value="2005">2005</
option><option value="2006">2006</option><option value="2007">2007</
option><option value="2008">2008</option><option value="2009">2009</
option><option value="2010">2010</option></select></td>

<tr><td><label for="applicant-placeOfBirth">Place of birth:</label></
td><td><input id="applicant-placeOfBirth"
name="applicant[placeOfBirth]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-nationality">Nationality:</label></
td><td><input id="applicant-nationality" name="applicant[nationality]"
type="text" value="" /></td><tr> <tr><td><label for="applicant-
state">State of origin:</label></td><td><input id="applicant-state"
name="applicant[state]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-town">Home town:</label></td><td><input
id="applicant-town" name="applicant[town]" type="text" value="" /></
td><tr> <tr><td><label for="applicant-sex">Sex:</label></
td><td><select id="applicant-sex" name="applicant[sex]"><option
value="">Select applicant sex</option><option value="Male"> Male</
option><option value="Female"> Female</option></select></td><tr>
<tr><td><label for="applicant-pupilAddress">Residence of pupil:</
label></td><td><textarea cols="40" id="applicant-pupilAddress"
name="applicant[pupilAddress]" rows="5"></textarea></td><tr>
<tr><td><label for="applicant-familyPosition">Position in family:</
label></td><td><input id="applicant-familyPosition"
name="applicant[familyPosition]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-hobbies">Hobbies:</label></td><td><input
id="applicant-hobbies" name="applicant[hobbies]" type="text" value="" /
></td><tr> <tr><td><label for="applicant-bloodGroup">Blood Group:</
label></td><td><input id="applicant-bloodGroup"
name="applicant[bloodGroup]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-frequentIllness">Frequent Illness:</
label></td><td><input id="applicant-frequentIllness"
name="applicant[frequentIllness]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-perculiarSickness">Peculiar Sickness:</
label></td><td><input id="applicant-perculiarSickness"
name="applicant[perculiarSickness]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-language">Language spoken at home:</
label></td><td><input id="applicant-language"
name="applicant[language]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-numberSibling">Number of Siblings
(brother & sisters):</label></td><td><input id="applicant-
numberSibling" name="applicant[numberSibling]" type="text" value="" /
></td><tr>


<tr><td colspan="2"><div id="fHeader">Parent/Guardian Information</
div></td></tr>
<tr><td><label for="applicant-fatherName">Father's Name:</label></
td><td><input id="applicant-fatherName" name="applicant[fatherName]"
type="text" value="" /></td><tr> <tr><td><label for="applicant-
fatherPhone">Father's Phone:</label></td><td><input id="applicant-
fatherPhone" name="applicant[fatherPhone]" type="text" value="" /></
td><tr> <tr><td><label for="applicant-fatherEmail">Father's Email:</
label></td><td><input id="applicant-fatherEmail"
name="applicant[fatherEmail]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-motherName">Mother's Name:</label></
td><td><input id="applicant-motherName" name="applicant[motherName]"
type="text" value="" /></td><tr> <tr><td><label for="applicant-
motherPhone">Mother's Phone:</label></td><td><input id="applicant-
motherPhone" name="applicant[motherPhone]" type="text" value="" /></
td><tr> <tr><td><label for="applicant-motherEmail">Mother's Email:</
label></td><td><input id="applicant-motherEmail"
name="applicant[motherEmail]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-guardianName">Guardian's Name:</label></
td><td><input id="applicant-guardianName"
name="applicant[guardianName]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-guardianPhone">Guardian's Phone:</
label></td><td><input id="applicant-guardianPhone"
name="applicant[guardianPhone]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-guardianEmail">Guardian's Email:</
label></td><td><input id="applicant-guardianEmail"
name="applicant[guardianEmail]" type="text" value="" /></td><tr>
<tr><td><label for="applicant-alive">Are both parents alive?</label></
td><td><select class="alive" id="applicant-alive"
name="applicant[alive]"><option value="">Select a value</
option><option value="Yes"> Yes</option><option value="No"> No</
option></select></td><tr> <tr id='gs'><td><label for="applicant-
deceasedParent">Which parent is deceased</label></td><td><select
class="which" id="applicant-deceasedParent"
name="applicant[deceasedParent]"><option value="">Select a value</
option><option value="Father"> Father</option><option value="Mother">
Mother</option><option value="Both"> Both</option></select></td><tr>
<tr><td><label for="applicant-parentAddress">Current Residence address
of Parents:</label></td><td><textarea cols="40" id="applicant-
parentAddress" name="applicant[parentAddress]" rows="5"></textarea></
td><tr>


<table class="st">
<tr><td colspan="4"><div id="fHeader">Previous School Histroy</div></
td></tr>
<tr><td><label for="prevSch-schName">First school name:<input
id="prevSch-schName" name="prevSch[schName]" type="text" value="" /></
label></td>
<td><label for="prevSch-startDate">Start date:<input id="prevSch-
startDate" name="prevSch[startDate]" type="text" value="" /></label></
td>
<td><label for="prevSch-endDate">End date:<input id="prevSch-
endDate" name="prevSch[endDate]" type="text" value="" /></label></td>
<td><label for="prevSch-reasonForLeaving">Reason for leaving:<input
id="prevSch-reasonForLeaving" name="prevSch[reasonForLeaving]"
type="text" value="" /></label></td></tr>


<tr><td><label for="prevSch-schName1">Second school name:<input
id="prevSch-schName1" name="prevSch[schName1]" type="text" value="" /
></label></td>
<td><label for="prevSch-startDate1">Start date:<input id="prevSch-
startDate1" name="prevSch[startDate1]" type="text" value="" /></
label></td>
<td><label for="prevSch-endDate1">End date:<input id="prevSch-
endDate1" name="prevSch[endDate1]" type="text" value="" /></label></
td>
<td><label for="prevSch-reasonForLeaving1">Reason for leaving:<input
id="prevSch-reasonForLeaving1" name="prevSch[reasonForLeaving1]"
type="text" value="" /></label></td></tr>

</form>

[raulriera]

So, what value do you get here?

<cfset renderText("#newFile#")>

And how does the resulting img tag looks like?

> parentAddress" name="applicant[parentAddress]" rows="5"></textarea></ ...
>
> read more »

[brian.bruijn]

Hey All,

For what it is worth I used to have to add

enctype="multipart/form-data"

in the

<form action="/stlouis/index.cfm/enrollment/enroll" id="testForm"
method="post">

I used to bang my head against a wall trying to figure this out years
ago, however I am not sure if it makes a difference now.

Would be interested to see of it does.

Good luck,
Brian

[Squaye]

Thanks all. i think i got it to work. the issue was that i couldn't
access the resource on my iis server