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

Debug Nodejs inside docker container

If you want to debug a node js or express application that is running inside a docker container please follow the below steps. Step1:   add pryjs in you package.json and run npm install    or    npm install --save pryjs Step 2:   Go to your docker-compose file and find the specific docker container which you want to debug.   Ex. if your container name is an app then please add the below lines   app:     stdin_open: true     tty: true Step 3:   Go the specific file where you want to debug and require the library     var pry = require('pryjs');   Then add the script to the specific like where you want to stop the execution.     eval(pry.it) Step 4:   Run the docker compose file and attach the specific process     docker-compose up -d && docker attach $(docker-compose ps -q app) It will stop the execution in the specific line once the request will hit that specific line Please check the documentation for a more pry option.
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