Updating textarea with photos

I have an app that has a textarea for users to create blog posts. I
need to allow them to click on a link/button that spawns a popup upload
photo dialogue. The image_tag for the uploaded photo needs to be placed
in the text area at the current cursor location.

I’ve got javascript to update the cursor and the popup forms/actions to
upload the photo, but I’m at a loss as to how to knit this together so
that the textarea is updated in place with the photo url.

Thanks for any ideas/suggestions.

##main view

<%= javascript_include_tag (‘insertphoto’)%>
<%= start_form_tag({:action => ‘new’}, :id=>‘submit_article’) %>

<%= text_area ‘article’, ‘body’%>

insert image
<%= end_form_tag %>

image_upload.rhtml

<%= start_form_tag({:action => ‘image_upload’}, :multipart => true) %>

Picture:
<%= file_field_tag "picture" %>

<%= submit_tag "Save" %>

<%= end_form_tag %>

insertAtCursor(document.myform.article_body, ‘photo_url’);

##controller

def image_upload
  if request.post?
    @myloc="#{RAILS_ROOT}" + '/public/images/' + "#{Time.now.to_i}"
  • ‘.jpg’
    File.open(@myloc , “wb”) do |f|
    f.write(params[‘picture’].read)
    end
    end
    end

js functions

function myPopup(){
window.open(’/writer/image_upload’, ‘MyPopUp’,
‘width=632,height=270,toolbar=0,scrollbars=0,screenX=200,screenY=200,left=200,top=200’)
}

function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == ‘0′) {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)

  • myValue
  • myField.value.substring(endPos, myField.value.length);
    } else {
    myField.value += myValue;
    }
    }