Upload files using an iFrame

Oct 03

Posted by Annalisa Afeltra in Ruby on Rails - 1 comment

Firstly in Rails we need to call a method to refresh the page in the iframe, for example:

I have created a partial with the following:


<iframe id="myframe" src="<%= url_for :action => :file_upload" class="myiframe" scrolling=no style="border:0px;" >
</iframe>

This calls the method in the controller called file_upload and updates the iframe with the contents of the file file_update.rhtml

Within the method I have included a variable to set the height of the iframe depending on the number of documents that are in the list.

In our Controller


def file_upload
      @iframe_height = @documents.count
      @iframe_height = (@iframe_height * 28)+50;
end

In our View

When we load the iframe the following script is run in the body onload function and we pass the height parameter to it:


<body onload="iframeSize('<%=@iframe_height%>');">

We call the script to set the size of the iframe


<script type="text/javascript"> 
function iframeSize(size)
{
    var height = size+'px';
        var iframeElement = parent.document.getElementById('myframe'); 
    iframeElement.style.height = height; 
}
</script>

Using the Attachment_Fu plugin, we create the form to upload the files:


<% form_for :document, :url => {:action=>'save_file'}, :html=>{:multipart => true} do |f| %>
<div class="upload_document_box">
<label for="name"><%= "Title".t %>:</label><br>
<%= f.text_field :title, :size=>25, :value=>''%><br>
<label for="name"><%= "Attachment".t %>:</label><br>
<input type="file" style="width: 385px;" size="44" name="document[uploaded_data]" id="document_uploaded_data" value=''/>
<input type="submit" value="upload" name="commit" onclick="check();"/>
</div>
<% end %>

On the onclick of the submit button, we call the check() function in the script, this checks if a title of the document was inserted and that a document was uploaded. On our parent page we have a div with an id called “alertbanner”, this is where we will display the errors:


function check()
{
var title = document.getElementById('document_title');
var doc = document.getElementById('document_uploaded_data');

if (title.value == '')
{
parent.$('alertbanner').insert({ top: "<p> Please insert a document title </p>"});
}else
{
if (doc.value == '')
{
parent.$('alertbanner').insert({ top: "<p> Please select a document to upload </p>"});
}
}

The last step is to upload the file to the Database in the save_file method in the controller:


def save_file
       @document = UploadedFile.new(params[:document])
       if @document.save!
         @error =  'Document was successfully uploaded'.t
         @task = @selected_task
         redirect_to :action=>'file_upload', :project_id => @selected_project.id, :id=>@selected_task.id, :flag=> false
       end
end

With a successful upload of the file, the iframe will be refreshed with the new document in the list and assign a new height to the iframe

Some have us might have used the plugin responds_to_parent to update a list outside of the iframe, it is a very useful plugin although I have tried a different method and I would appreciate any comments or suggestions that you might have.

Permalink

Ruby On Rails, Design, Simplicity, Web 2.0, Ajax, Mac and Tons of Pizza.