Solved

java n00b needs to insert image url and alignment into textarea

Posted on 2003-12-02
16
566 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 500 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

726 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