?
Solved

java n00b needs to insert image url and alignment into textarea

Posted on 2003-12-02
16
Medium Priority
?
576 Views
Last Modified: 2007-12-19
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

0
Comment
Question by:Skippythekid
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 3
16 Comments
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9863057
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>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9863089
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>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9863096
The paste is done using right click paste etc
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:Skippythekid
ID: 9865393
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,

0
 
LVL 1

Author Comment

by:Skippythekid
ID: 9867034
How do I add more Points its all changed since I was last on :S
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9895988
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>
0
 
LVL 1

Author Comment

by:Skippythekid
ID: 9896065
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.


 
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9896112
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>
0
 
LVL 1

Author Comment

by:Skippythekid
ID: 9896219
: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 :-)
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9903240
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>
0
 
LVL 7

Accepted Solution

by:
gam3r_3xtr3m3 earned 2000 total points
ID: 9903379
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
0
 
LVL 1

Author Comment

by:Skippythekid
ID: 9903408
M8 you saved my life :D Thanks dude have added an extra 200 to the other post for ya :D

Cheers again
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9903419
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();">
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9903424
Thanks mate! glad to help!

gam3r
0
 
LVL 1

Author Comment

by:Skippythekid
ID: 9904380
yeh thats kewl dude I sorted that bit :P

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

Cheers again m8ty
0
 
LVL 1

Author Comment

by:Skippythekid
ID: 9919189
LOL Dude

How do I Enable the Submit button

:S Told you im a java muppet :P
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question