In order to upload multiple file to the server the basic thing what we require is multiple file fields. we can do it easily in .erb file with the help of javascript.

So just follow the steps and have fun.


Step 1 :  create a simple html div for it.
                <div class="apply_div  " id="number_of_download_filed" >
       <div class="attachment_div_text" id='div_attached_1'>Add Attachment,</div>
<div class="attachment_div_field" id="div_attached_field_1">
<input id='attached_1' type='file' name='attached_1' class='event_action_attach_fields input_file_class'>
</div>
            </div>
           <div class="apply_div ">
                             <%= button_tag 'Attach another file',  :type => 'button',  :class="attach_another_file_button"  %>
            </div>
Now what we want is just on the "attach another file" button there is another file uploading button in the page. For that we need little bit javascript.

Step 2: in the .js file write the below code
             $(document).ready(function(){
              var file_count=1 
                   $('.attach_another_file_button').on("click", function() {
                                         file_count++;
               $('#number_of_download_filed').append("<div class='attachment_div_text' " +                              +"id='div_attached_"+file_count+"'>"+"Upload another file</div>" +
"<div class='attachment_div_field'  id='div_attached_field_"+file_count+"'>" +
"<input id='attached_"+file_count+"' type='file' name='attached_"+
                                                  file_count+"' class='event_action_attach_fields' />"+"</div>");
                           });
                     });
So on clicking the "attach another file" button a next file field will be added to under the same div. You can design the same thing using  css according to your wish.

Comments

Post a Comment

Popular posts from this blog

Insert Bulk data using active record import

Imagine a scenario where you have to create a report and send it to multiple clients, so lets just say you have a report model and you have client and you have report client model. lets first check all the association and model structure. #report model class Report < ActiveRecord::Base   has_many :report_clients   has_many :clients, through: :report_clients end #report_client class ReportClient < ActiveRecord::Base   belongs_to :report   belongs_to :client end #clients class Client < ActiveRecord::Base   has_many :report_clients   has_many :reports, through: :report_clients end No lets say you want to create a report for 30 clients. You can do that by adding nested attributes in rails. so our report model will became  class Report < ActiveRecord::Base   has_many :report_clients   has_many :clients, through: :report_clients   accepts_nested_attributes_for :report_clients, :reject_if => proc { |attributes| att
Read more

Swap primary keys between two records in the same table in Postgres

What if we need to swap two primary keys on the same table? What's the best and efficient way to do the same? let's check Now:- Let's assume we have a user table which has 3 columns among all the rows I have taken two sample rows which are the target rows for us. Id Name Email 101 Sabyasachi XX@gmail.com 105 Saghosh xxx@gmail.com We need to swap the primary keys (which are unique by nature) between those two records so our desired result will be something like   Id Name Email 105 Sabyasachi XX@gmail.com 101 Saghosh xxx@gmail.com Now lets buield a query using CTE(common table expression) to solve the problem:- with source_user as (   select     id   from     users   where     id = 101 ), destination_user as (   select     id   from     users   where     id
Read more

How to add a bootstrap table with fixed header and scrollable body

I am pretty sure that everyone is familiar with bootstrap CSS, if not please take a look(bootstrap). Now Bootstrap has lots of different components and table styling is one of them and they have plenty of different styling options. Now sometimes if we have to display a large amount of data inside a table, the user will have to scroll till the end of the table and after few scroll, they can not see the table header. There is a way to fix this. Please follow the below steps. Step1: Create a bootstrap table first <table class="table table-fixed">   <colgroup></colgroup>   <colgroup class=""></colgroup>   <thead>   <tr>     <th>       <label>         ##       </label>     </th>     <th>       <label class="">         ###       </label>     </th>   </tr>   </thead>   <tbody id="fixed-height">       <tr>         &
Read more