File upload working

Antonio Terceiro
1 parent f746553b
Showing 5 changed files with 95 additions and 18 deletions Show diff stats
app/controllers/my_profile/cms_controller.rb
app/views/cms/_textile_media.rhtml
public/javascripts/article.js
public/stylesheets/application.css
test/functional/cms_controller_test.rb
@@ -338,7 +338,18 @@ class CmsController &lt; MyProfileController
   def search
     query = params[:q]
     results = query.blank? ? [] : profile.articles.published.find_by_contents(query)
-    render :text => results.map { |item| { 'title' => item.title, 'url' => url_for(item.url), :icon => icon_for_article(item), :content_type => item.mime_type }}.to_json, :content_type => 'application/json'
+    render :text => article_list_to_json(results), :content_type => 'application/json'
+  end
+  def media_upload
+    files_uploaded = []
+    parent = check_parent(params[:parent_id])
+    files = [:file1,:file2, :file3].map { |f| params[f] }
+    if request.post?
+      files.each do |file|
+        files_uploaded << UploadedFile.create(:uploaded_data => file, :profile => profile, :parent => parent) unless file == ''
+      end
+    end
+    render :text => article_list_to_json(files_uploaded), :content_type => 'application/json'
   end
   protected
@@ -386,5 +397,16 @@ class CmsController &lt; MyProfileController
     @selected_locale = @article.language || FastGettext.locale
   end
+  def article_list_to_json(list)
+    list.map do |item|
+      {
+        'title' => item.title,
+        'url' => url_for(item.url),
+        :icon => icon_for_article(item),
+        :content_type => item.mime_type
+      }
+    end.to_json
+  end
+
 end
@@ -18,31 +18,43 @@
       <p><%= _('See also a more complete <a href="%s">Textile Reference</a>') % 'http://redcloth.org/hobix.com/textile/' %></p>
     </div>
   </div>
-  <div class='textile-editor-sidebar-box'>
+  <div class='textile-editor-sidebar-box' id='media-upload-box'>
     <p><strong>Media upload</strong></p>
-    <% @folders = profile.folders %>
-    <% form_tag({ :action => 'media_upload' }, :multipart => true) do |f| %>
-      <%= render :partial => 'upload_file_form', :locals => { :size => 30 } %>
-    <% end %>
-    <div id='media-upload-results' style='display: none'>
+    <div id='media-upload-form'>
+      <% form_tag({ :action => 'media_upload' }, :multipart => true) do |f| %>
+        <div class='formfield'>
+          <%# TODO duplicated from partial upload_file_form %>
+          <%= labelled_form_field(_('Choose folder to upload files:'), select_tag('parent_id', options_for_select([[profile.identifier, '']] + profile.folders.collect {|f| [ profile.identifier + '/' +  f.full_name, f.id ] }))) %>
+        </div>
+        <p><%= file_field_tag('file1') %></p>
+        <p><%= file_field_tag('file2') %></p>
+        <p><%= file_field_tag('file3') %></p>
+        <% button_bar do %>
+          <%= submit_button(:save, _('Upload')) %>
+        <% end %>
+      <% end %>
+    </div>
+    <div id='media-upload-results' class='media-list-results' style='display: none'>
       <ul>
       </ul>
       <p>
       <em><%= _('Drag item names to the text to add their URL') %></em>
       </p>
-      <p><%= link_to('#', _('Upload more files'), :id => 'media-upload-more-files') %></p>
+      <p><%= link_to(_('Upload more files ...'), '#', :id => 'media-upload-more-files')%></p>
     </div>
   </div>
   <div class='textile-editor-sidebar-box'>
     <p><strong>Media search</strong></p>
     <% form_tag({ :action => 'search' }) do %>
-      <span class='formfield'>
-        <input name='q' type='text' id='media-search-query' style='width: 250px;'/>
-      </span>
-      <%= submit_button :search, _('Search'), :id => 'media-search-button' %>
+      <% button_bar do %>
+        <span class='formfield'>
+          <input name='q' type='text' id='media-search-query' style='width: 250px;'/>
+        </span>
+        <%= submit_button :search, _('Search'), :id => 'media-search-button' %>
+      <% end %>
     <% end %>
     </form>
-    <div id='media-search-results' style='display: none'>
+    <div id='media-search-results' class='media-list-results' style='display: none'>
       <ul>
       </ul>
       <p>
@@ -39,13 +39,34 @@ jQuery(function($) {
     var $button = $(this);
     $button.toggleClass('icon-loading');
     $.get($(this).parent().attr('action'), { 'q': query }, function(data) {
-      $button.toggleClass('icon-loading');
       insert_items(data, '#media-search-results ul');
       if (data.length && data.length > 0) {
         $('#media-search-results').slideDown();
       }
+      $button.toggleClass('icon-loading');
     });
     return false;
   });
+  $('#media-upload-form form').ajaxForm({
+    dataType: 'json',
+    resetForm: true,
+    beforeSubmit:
+      function() {
+        $('#media-upload-form').slideUp();
+        $('#media-upload-box').toggleClass('icon-loading');
+      },
+    success:
+      function(data) {
+        insert_items(data, '#media-upload-results ul');
+        if (data.length && data.length > 0) {
+          $('#media-upload-results').slideDown();
+        }
+        $('#media-upload-box').toggleClass('icon-loading');
+      }
+  });
+  $('#media-upload-more-files').click(function() {
+    $('#media-upload-results').hide();
+    $('#media-upload-form').show();
+  });
 });
@@ -3396,11 +3396,11 @@ div.with_media_panel .formfield input {
 .textile-editor-sidebar .icon-loading {
   background-image: url(../images/loading-small.gif);
 }
-.textile-editor-sidebar #media-search-results ul {
+.textile-editor-sidebar .media-list-results ul {
   padding: 0px;
   list-style: none;
 }
-.textile-editor-sidebar #media-search-results li {
+.textile-editor-sidebar .media-list-results li {
   background-repeat: no-repeat;
   background-position: 0px 0px;
   padding-left: 20px;
@@ -3409,11 +3409,14 @@ div.with_media_panel .formfield input {
   border: none;
   margin-bottom: 2px;
 }
-.textile-editor-sidebar #media-search-results li:hover {
+.textile-editor-sidebar .media-list-results li:hover {
   background-color: transparent;
   border: none;
 }
-
+.textile-editor-sidebar #media-upload-box {
+  background-repeat: no-repeat;
+  background-position: top right ;
+}
 /* ==> public/stylesheets/controller_contact.css <== */
 /*** SELECT CITY ***/
@@ -1631,4 +1631,23 @@ class CmsControllerTest &lt; Test::Unit::TestCase
     assert_match /text/, data.first['content_type']
   end
+  should 'upload media by AJAX' do
+    post :media_upload, :profile => profile.identifier, :uploaded_files => [fixture_file_upload('/files/test.txt', 'text/plain'), fixture_file_upload('/files/rails.png', 'image/png')]
+    assert_match 'test.txt', @response.body
+    assert_equal 'application/json', @response.content_type
+
+    data = eval(@response.body.gsub('":', '"=>'))
+
+    assert_equal 'test.txt', data[0]['title']
+    assert_match /\/testinguser\/test.txt$/, data[0]['url']
+    assert_match /text/, data[0]['icon']
+    assert_match /text/, data[0]['content_type']
+
+    assert_equal 'rails.png', data[1]['title']
+    assert_match /\/testinguser\/rails.png$/, data[1]['url']
+    assert_match /png$/, data[1]['icon']
+    assert_match /image/, data[1]['content_type']
+
+  end
+
 end
	@@ -338,7 +338,18 @@ class CmsController < MyProfileController		@@ -338,7 +338,18 @@ class CmsController < MyProfileController
338	def search	338	def search
339	query = params[:q]	339	query = params[:q]
340	results = query.blank? ? [] : profile.articles.published.find_by_contents(query)	340	results = query.blank? ? [] : profile.articles.published.find_by_contents(query)
341	- render :text => results.map { \|item\| { 'title' => item.title, 'url' => url_for(item.url), :icon => icon_for_article(item), :content_type => item.mime_type }}.to_json, :content_type => 'application/json'	341	+ render :text => article_list_to_json(results), :content_type => 'application/json'
		342	+ end
		343	+ def media_upload
		344	+ files_uploaded = []
		345	+ parent = check_parent(params[:parent_id])
		346	+ files = [:file1,:file2, :file3].map { \|f\| params[f] }
		347	+ if request.post?
		348	+ files.each do \|file\|
		349	+ files_uploaded << UploadedFile.create(:uploaded_data => file, :profile => profile, :parent => parent) unless file == ''
		350	+ end
		351	+ end
		352	+ render :text => article_list_to_json(files_uploaded), :content_type => 'application/json'
342	end	353	end
343		354
344	protected	355	protected
	@@ -386,5 +397,16 @@ class CmsController < MyProfileController		@@ -386,5 +397,16 @@ class CmsController < MyProfileController
386	@selected_locale = @article.language \|\| FastGettext.locale	397	@selected_locale = @article.language \|\| FastGettext.locale
387	end	398	end
388		399
		400	+ def article_list_to_json(list)
		401	+ list.map do \|item\|
		402	+ {
		403	+ 'title' => item.title,
		404	+ 'url' => url_for(item.url),
		405	+ :icon => icon_for_article(item),
		406	+ :content_type => item.mime_type
		407	+ }
		408	+ end.to_json
		409	+ end
		410	+
389	end	411	end
390		412
	@@ -39,13 +39,34 @@ jQuery(function($) {		@@ -39,13 +39,34 @@ jQuery(function($) {
39	var $button = $(this);	39	var $button = $(this);
40	$button.toggleClass('icon-loading');	40	$button.toggleClass('icon-loading');
41	$.get($(this).parent().attr('action'), { 'q': query }, function(data) {	41	$.get($(this).parent().attr('action'), { 'q': query }, function(data) {
42	- $button.toggleClass('icon-loading');
43	insert_items(data, '#media-search-results ul');	42	insert_items(data, '#media-search-results ul');
44	if (data.length && data.length > 0) {	43	if (data.length && data.length > 0) {
45	$('#media-search-results').slideDown();	44	$('#media-search-results').slideDown();
46	}	45	}
		46	+ $button.toggleClass('icon-loading');
47	});	47	});
48	return false;	48	return false;
49	});	49	});
		50	+ $('#media-upload-form form').ajaxForm({
		51	+ dataType: 'json',
		52	+ resetForm: true,
		53	+ beforeSubmit:
		54	+ function() {
		55	+ $('#media-upload-form').slideUp();
		56	+ $('#media-upload-box').toggleClass('icon-loading');
		57	+ },
		58	+ success:
		59	+ function(data) {
		60	+ insert_items(data, '#media-upload-results ul');
		61	+ if (data.length && data.length > 0) {
		62	+ $('#media-upload-results').slideDown();
		63	+ }
		64	+ $('#media-upload-box').toggleClass('icon-loading');
		65	+ }
		66	+ });
		67	+ $('#media-upload-more-files').click(function() {
		68	+ $('#media-upload-results').hide();
		69	+ $('#media-upload-form').show();
		70	+ });
50		71
51	});	72	});
	@@ -1631,4 +1631,23 @@ class CmsControllerTest < Test::Unit::TestCase		@@ -1631,4 +1631,23 @@ class CmsControllerTest < Test::Unit::TestCase
1631	assert_match /text/, data.first['content_type']	1631	assert_match /text/, data.first['content_type']
1632	end	1632	end
1633		1633
		1634	+ should 'upload media by AJAX' do
		1635	+ post :media_upload, :profile => profile.identifier, :uploaded_files => [fixture_file_upload('/files/test.txt', 'text/plain'), fixture_file_upload('/files/rails.png', 'image/png')]
		1636	+ assert_match 'test.txt', @response.body
		1637	+ assert_equal 'application/json', @response.content_type
		1638	+
		1639	+ data = eval(@response.body.gsub('":', '"=>'))
		1640	+
		1641	+ assert_equal 'test.txt', data[0]['title']
		1642	+ assert_match /\/testinguser\/test.txt$/, data[0]['url']
		1643	+ assert_match /text/, data[0]['icon']
		1644	+ assert_match /text/, data[0]['content_type']
		1645	+
		1646	+ assert_equal 'rails.png', data[1]['title']
		1647	+ assert_match /\/testinguser\/rails.png$/, data[1]['url']
		1648	+ assert_match /png$/, data[1]['icon']
		1649	+ assert_match /image/, data[1]['content_type']
		1650	+
		1651	+ end
		1652	+
1634	end	1653	end