Solved

java n00b needs to insert image url and alignment into textarea

Posted on 2003-12-02
16
560 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult 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…

816 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now