Link to home
Start Free TrialLog in
Avatar of Skippythekid
Skippythekid

asked on

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

Avatar of GwynforWeb
GwynforWeb
Flag of Canada image

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>
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>
The paste is done using right click paste etc
Avatar of Skippythekid
Skippythekid

ASKER

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,

How do I add more Points its all changed since I was last on :S
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>
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.


 
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>
: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 :-)
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>
ASKER CERTIFIED SOLUTION
Avatar of gam3r_3xtr3m3
gam3r_3xtr3m3
Flag of Philippines image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
M8 you saved my life :D Thanks dude have added an extra 200 to the other post for ya :D

Cheers again
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();">
Thanks mate! glad to help!

gam3r
yeh thats kewl dude I sorted that bit :P

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

Cheers again m8ty
LOL Dude

How do I Enable the Submit button

:S Told you im a java muppet :P