java n00b needs to insert image url and alignment into textarea

Hello,

I have no Java skills at all so idoit proof solution is required.

Ok on with the show,

I am trying to write an asp contents management system I have a text area where the user can add html aswell as plain txt. I have also written an upload script,

Now I want the user to be able to click a button upload an image at any stage of adding the text-html content and the <img> tag to be inserted into the textarea at the last cursor position (or end of the last line of content)

Once I have the script to do that I should be able to figure out how to pass user defined alignment along with it (align image left, right blah .. blah)

Thanks all in advance

P.S not very clear I know but im sure you get the idea :D ta

LVL 1
SkippythekidAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GwynforWebCommented:
Is this what you want, it only works in ie though.

<head>
<script language="JavaScript">
function CopyIt(obj) {
obj.focus();
obj.select();
document.execCommand("Copy");
}
function PastIt(obj) {
obj.focus();
document.execCommand("Paste");
}
</script>
</head>

<body>

<form name="f1">
  <p><input type="input" name="tag"
  value="&lt;img src='http://www.google.ca/intl/en_ca/images/logo.gif'>;"></p>
  <p><input type="button" value="Paste from Clipboard"
  onClick="CopyIt(f1.tag); PastIt(f1.Code);"></p>
  <p><textarea name="Code" rows="10" cols="50"></textarea></p>
</form>
</body>
GwynforWebCommented:
or is it this it, you can write code to generate the image tag in the text box

<html>

<head><script language="JavaScript">
function CopyIt(obj) {
obj.focus();
obj.select();
document.execCommand("Copy");
}
</script>

<title></title>
</head>

<body>

<form name="f1">
  <p><input type="input" size="70" name="tag"
  value="&lt;img src='http://www.google.ca/intl/en_ca/images/logo.gif'>;"></p>
  <p><input type="button" value="Copy Html" onClick="CopyIt(f1.tag);"></p>
  <p><textarea name="Code" rows="10" cols="50"></textarea></p>
</form>
</body>
</html>
GwynforWebCommented:
The paste is done using right click paste etc
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SkippythekidAuthor Commented:
Ermm

I was thinking more along the lines of

<a href=UploadPopUpForm.asp>Upload Image</a>
<form name=adcontent etc..>
<textarea Value="<%=StrContent%>" name="content"></textarea>
</form>

User: Clicks upload link at any stage of adding thier content, up pops upload form in new popup window uploads image I can get the loacation of the newly uploaded  image we weill call it StrImg

StrImage is then inserted into to the <textarea> at the end of the last line of inserted content and they may carry on adding more or submit the content as t hey wish.

this has to be done without the user pasting it in and must retain any information they have already added,

SkippythekidAuthor Commented:
How do I add more Points its all changed since I was last on :S
gam3r_3xtr3m3Commented:
well, i dont get it much... is this what you need? (omitted ASP tags, disabled submit to test)

<body>
<div align="center">
<a href="UploadPopUpForm.asp" target="_blank" onClick="return !window.open('UploadPopUpForm.asp');">Upload Image</a>
<form name="adcontent" action="" onSubmit="return false;">
<input type="file" name="file1" /><br />
<textarea name="content" cols="50" rows="5">some text...</textarea><br />
<input type="submit" value="Add text to textarea" onClick="document.adcontent.content.value+='\r'+document.adcontent.file1.value" />
</form>
</div>
</body>
SkippythekidAuthor Commented:
kewl looks good, nearly almost :¬)


lets say you click the upload image link and the pop up window opens with a file field to upload an image this goes to uplaod_action.asp and we get the value StrImage  (which holds the path to the uploaded image)

 I want it to insert StrImage into the text area whilst keeping any Text  content the user has already added.


 
gam3r_3xtr3m3Commented:
oh lol... i think i got it... (omitted ASP tags, disabled submit to test)

UploadPopUpForm.asp
--------------------------
<script>
function uploadFile(){
window.opener.document.adcontent.content.value+='\r\<img src\=\"'+self.document.adfile.file1.value+'\"\>';
window.top.close();
return false;}
</script>
<body>
<table height="100%" width="100%">
<tr><td valign="center">
<div align="center">
<% IF Request.QueryString("js")="n" THEN %>
<span style="color: #FF0000; font-weight: bold;">* JavaScript not enabled! *</span>
<% END IF %>
<form name="adfile" action="?js=n" onSubmit="return uploadFile();">
<input type="file" name="file1" /><br /><input type="submit" value="Upload Image" />
</form>
</div>
</td></tr>
</table>
</body>

>>the main page...
-----------------------
<body>
<div align="center">
<a href="UploadPopUpForm.asp?js=n" target="_blank" onClick="window.open('UploadPopUpForm.asp','','titlebar=no,width=300,height=100'); return false;">Upload Image</a>
<form name="adcontent" action="" onSubmit="alert('File submitted!'); return false;">
<textarea name="content" cols="45" rows="5">Hello there!!! How are yah! Here's my pic!</textarea><br /><br />
<input type="submit" value="Submit BBS" />
</form>
</div>
</body>
SkippythekidAuthor Commented:
:P

Yeah that looks like the puppy :)

But I need  the Uploaded value to be passed back not the form feild value

MainPage ----> UploadPopUpForm.asp---->  Upload script-----> MainPage

'##Upload script well bit that counts ####

for each File In Uploader.Files.Items
       File.SaveToDisk Server.MapPath("../images/")
          Response.Write "File Uploaded: " & File.FileName & "<br>"
          Response.Write "Size: " & File.FileSize & " bytes<br>"
          Response.Write "Type: " & File.ContentType & "<br><br>"    
          'FilePath = ("/images/")&File.FileName          
next
Fpath = ("images/")&Uploader.Files("file1").FileName

StrImage = "<img src=""&Fpath&"">"
'Back to Mainpage insert StrImage
--------------------------------------------------------------------

how do I get StrImage back in there instead :-)
gam3r_3xtr3m3Commented:
ok so...

UploadPopUpForm.asp
--------------------------
<body>
<table height="100%" width="100%">
<tr><td valign="center">
<div align="center">
<form name="adfile" action="UploadScript.asp">
<input type="file" name="file1" /><br /><input type="submit" value="Upload Image" />
</form>
</div>
</td></tr>
</table>
</body>

UploadScript.asp
--------------------
<script>
function pasteURLFile(){
window.opener.document.adcontent.content.value+='\r\<img src\=\"<% For Each File In Uploader.Files.Items
       File.SaveToDisk Server.MapPath("../images/")
          Response.Write "File Uploaded: " & File.FileName & "<br>"
          Response.Write "Size: " & File.FileSize & " bytes<br>"
          Response.Write "Type: " & File.ContentType & "<br><br>"    
          'FilePath = ("/images/")&File.FileName          
Next
Fpath = ("images/")&Uploader.Files("file1").FileName
Response.Write(Fpath) %>\"\>';
window.top.close();
return false;}
</script>
<body onLoad="pasteURLFile();">

main page
------------
<body>
<div align="center">
<a href="UploadPopUpForm.asp" target="_blank" onClick="window.open('UploadPopUpForm.asp','','titlebar=no,width=300,height=100'); return false;">Upload Image</a>
<form name="adcontent" action="" onSubmit="alert('File submitted!'); return false;">
<textarea name="content" cols="45" rows="5">Hello there!!! How are yah! Here's my pic!</textarea><br /><br />
<input type="submit" value="Submit BBS" />
</form>
</div>
</body>
gam3r_3xtr3m3Commented:
here's a final blow with width, height and alignment settings: (P.S. I used the POST method for the forms)

main page
------------
<body>
<div align="center">
<a href="UploadPopUpForm.asp" target="_blank" onClick="window.open('UploadPopUpForm.asp','','titlebar=no,width=300,height=150'); return false;">Upload Image</a>
<form name="adcontent" action="" onSubmit="alert('File submitted!'); return false;">
<textarea name="content" cols="45" rows="5">Hello there!!! How are yah! Here's my pic!</textarea><br /><br />
<input type="submit" value="Submit BBS" />
</form>
</div>
</body>

UploadPopUpForm.asp
--------------------------
<body>
<table height="100%" width="100%">
<tr><td valign="center">
<div align="center">
<form name="adfile" action="UploadScript.asp" method="post">
<input type="file" name="file1" /><br />
Width:<input type="text" name="width1" /><br />&#160;
Height:<input type="text" name="height1" /><br />
Alignment:
<select name="align1">
<option>default</option>
<option>left</option>
<option>right</option>
<option>center</option>
</select><br />
<input type="submit" value="Upload Image" />
</form>
</div>
</td></tr>
</table>
</body>

UploadScript.asp
--------------------
<%
'Your other scripts place here
'Your other scripts place here
'Your other scripts place here
For Each File In Uploader.Files.Items
       File.SaveToDisk Server.MapPath("../images/")
          Response.Write "File Uploaded: " & File.FileName & "<br>"
          Response.Write "Size: " & File.FileSize & " bytes<br>"
          Response.Write "Type: " & File.ContentType & "<br><br>"    
          'FilePath = ("/images/")&File.FileName          
Next
Fpath = ("images/")&Uploader.Files("file1").FileName
Dim Fwidth, Fheight, Falign
Fwidth = ""
Fheight = ""
Falign = ""
If Request.Form("width1")<>"" Then
Fwidth = ' width=\"' & Request.Form("width1") & '"'
End If
If Request.Form("height1")<>"" Then
Fheight = ' height=\"' & Request.Form("height1") & '"'
End If
If Request.Form("align1")<>"default" Then
Falign = ' align=\"' & Request.Form("align1") & '"'
End If
%>
<script>
function pasteURLFile(){
window.opener.document.adcontent.content.value+='\r\<img src\=\"<%=Fpath%>\"<%=Fwidth%><%=Fheight%><%=Falign%>\>';
window.top.close();
return false;}
</script>
<body onLoad="pasteURLFile();">

btw, im not sure if this works... lol

gam3r

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SkippythekidAuthor Commented:
M8 you saved my life :D Thanks dude have added an extra 200 to the other post for ya :D

Cheers again
gam3r_3xtr3m3Commented:
i told yah UploadScript wont work in the latest one... lol

UploadScript.asp
--------------------
<%
'Your other scripts place here
'Your other scripts place here
'Your other scripts place here
For Each File In Uploader.Files.Items
       File.SaveToDisk Server.MapPath("../images/")
          Response.Write "File Uploaded: " & File.FileName & "<br>"
          Response.Write "Size: " & File.FileSize & " bytes<br>"
          Response.Write "Type: " & File.ContentType & "<br><br>"    
          'FilePath = ("/images/")&File.FileName          
Next
Fpath = ("images/")&Uploader.Files("file1").FileName
Dim Fwidth, Fheight, Falign
Fwidth = ""
Fheight = ""
Falign = ""
If Request.Form("width1")<>"" Then
Fwidth = " width=\""" & Request.Form("width1") & """"
End If
If Request.Form("height1")<>"" Then
Fheight = " height=\""" & Request.Form("height1") & """"
End If
If Request.Form("align1")<>"default" Then
Falign = " align=\""" & Request.Form("align1") & """"
End If
%>
<script>
function pasteURLFile(){
window.opener.document.adcontent.content.value+='\r\<img src\=\"<%=Fpath%>\"<%=Fwidth%><%=Fheight%><%=Falign%>\>';
window.top.close();
return false;}
</script>
<body onLoad="pasteURLFile();">
gam3r_3xtr3m3Commented:
Thanks mate! glad to help!

gam3r
SkippythekidAuthor Commented:
yeh thats kewl dude I sorted that bit :P

Yours looks better though I didn't include image size in it

Cheers again m8ty
SkippythekidAuthor Commented:
LOL Dude

How do I Enable the Submit button

:S Told you im a java muppet :P
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.