Avatar of dvcphp
dvcphp
 asked on

Want to import the chosen csv files on the webpage .

Hello Experts,

I want to import a csv file on the wbpage when clicked on the import button.
I have used the jquery plugin csv2table for the import.
My problem is that I am unable to code the logic in a way that when I choose a particular csv file,I want to display it on the webpage.

Please have a look at the jsfiddle.

http://jsfiddle.net/webdeveloper/xeJ8Q/

This jquery logic  must be changed.

$("#f").click(function(){
           
$("#CSVTable").CSVToTable("csvFile.csv");
                                  });

Open in new window

Here,I must be able to to code the logic as per the CSV file chosen.
HTMLJavaScriptjQuery

Avatar of undefined
Last Comment
Michel Plungjan

8/22/2022 - Mon
SOLUTION
ahoffmann

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Michel Plungjan

As I already suggested in the other question you posted, you need to upload the file to your server before you can load it. This is due to security issues ( same origin)
dvcphp

ASKER
Right now,I am trying to import the csv file from my client machine (For Demo)

But I agree with mplungjan (Expert) that the file must be on the server.
How do I import the CSV file from the server on to the webpage then?
It must be <input type="file"> so that I may be able to choose a particular CSV file and then must be able to import it on to the web page.

Let me know if I have made myself clear.
Thanks.
ahoffmann

> import the csv file from my client
rather impossible due to same origin policy

> How do I import the CSV
you either need to import it there and covert to HTML as you like
or you can import it using XHR and use your client-side JavaScript to insert the values in your DOM
I guess the server-side solution is simpler to implement ...
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
dvcphp

ASKER
Could you please show me an example using AJAX to import the file.
I would appreciate.
Thanks.
Michel Plungjan

You need to do this first: http://www.tizag.com/phpT/fileupload.php/
ahoffmann

// quick&dirty
xhr = new XMLHttpRequest();
req = xhr.open("GET", "/your.csv", false);
req = xhr.send(null);
       // server should respond with content-type:text/plain
csv = xhr.responseText;
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Michel Plungjan

He is already using jQuery so no need for xmlhttp, just use the get from the fiddle
dvcphp

ASKER
Hello again..
I am dealing only with the front- end.I dont have to upload the file on the server using PHP.I only have to import the data at the front-end.When a particular CSV file is choosen, I just have to import its contents dynamically on the webpage without refreshing it using AJAX.
Please help.
Michel Plungjan

Not possible using standard browsers as I have pointed out several times. It may be YOU don't need to upload but That is besides the point when the browser DO need the file to come from the same SERVER the script comes from
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
dvcphp

ASKER
Ok , I agree with you.Now,assuming that the CSV file is on the server and I need a script to call it at the front-end,How can I do this?

Can you please elaborate with an example.I think I am heading in the right direction.
Thanks.
ahoffmann

already done (see above), but there may be other ways to do it with jquery
dvcphp

ASKER
Can you show the same with $ .ajax as the above code is confusing to me.
Thanks
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Michel Plungjan

No need for $ajax

You have the code you need in your first post

http://code.google.com/p/jquerycsvtotable/


<div id="CSVTable"></div>

<script>
$(function() {
  $('#CSVTable').CSVToTable('test.csv');
});
</script>

Assuming you also include jQuery
ahoffmann

nice feature of jquery ;-)
but
> No need for $ajax

how does the browser get the csv data if not via ajax call?
Michel Plungjan

No need for $.ajax or xmlhttp
since the csvtotable does the Ajax for you.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
dvcphp

ASKER
Now I am back to where I started.
Please see my jsFiddle link :

http://jsfiddle.net/webdeveloper/xeJ8Q/

Here, I want to choose a particular csv file and show its data as table on the webpage.
Please let me know how to do it.
Michel Plungjan

Your fiddle cannot do what you want.

You need a BACK END to upload to!!
dvcphp

ASKER
You mean the backend logic must be done in order to display the file selected.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ahoffmann

if .csv is only on the client; then
  you need to upload the file to the server
endif

To display the content rendered in the browser, your either
    need to convert the csv to HTML on ther server and send the result to the browser
or
   request the csv from within the browser and process it i.e. with jquery
dvcphp

ASKER
ahoffmann.....Please tell me how to do this..

"To display the content rendered in the browser, your either
    need to convert the csv to HTML on ther server and send the result to the browser
or
   request the csv from within the browser and process it i.e. with jquery"
ahoffmann

mplungjan already showed in #38165518 how to do it

> tell me how to do this.
dvcphp, to me it sounds that you miss some basic concepts how HTTP works and you also use framework (PHP, jquery) without knowing what really happens on which end of the wire
no offence meant, but can you please tell us where exactly you have problems to understand what is suggested
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
dvcphp

ASKER
ok.The problem I have is this:

When a particular CSV file is choosen,Upload button is clicked and it is uploaded on the server.The backend person will do the logic of uploading the file on the server.
When the upload button is clicked,I am supposed to display that file in table format on the webpage.I have to display 3 or 4 rows of that table and not the whole table.

I hope I have made myself clear.Let me know.
Thanks.
ahoffmann

> .. button is clicked and it is uploaded on the server
then the script receiving the file should parse it and convert to HTML as you need and respond with that result to the browser
dvcphp

ASKER
Yes it will be uploaded on the server when clicked on the uplaod button.

Now,after the upload is it possible to convert that file in to table and display it on the webpage.
this is where I am confused a lot.I haven't done this kind of logic before.
Is my question right? Can this be done using jquery??
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ahoffmann

> Can this be done using jquery??
if you mean on the server, no

> is it possible to convert that file in to table
yes, you script which receives the uploaded file, need to open it, read line by line amd convert each line with proper TR, TH and TD tags

don't know which technologie you use on the server, but probably it already has a function/method for that
dvcphp

ASKER
We are using JSP at the BACK END.
dvcphp

ASKER
Hello Experts and thank you all for trying to help me.

Below is the scenario and i want to make this clear.

First: Assuming  in the backend four(4)  csv files are uploaded in JSP.

Task: My task is to import  five rows of one(1) particular file( The original file has 50 rows) using  Jquery code.

Can you please provide jquery code to achieve this  

or

do you additional information about the back-end. The back-end technology is JSP.

Thanks a million
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER CERTIFIED SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Michel Plungjan

Of course first extract the lines needed before you save the file
dvcphp

ASKER
Hello All again,

As instructed by mplugjan above used the below link to test the task.

Used the link you provided to test the task.

http://www.roseindia.net/jsp/file_upload/Sinle_upload.xhtml.shtml



Got the output exactly as shown on  the above link.

In the program,they are submitting the submit button after selecting the file to upload.jsp.I have done the same for demo purpose.

I doThe is file upload imageThis is output on other pagent want the page to submit to upload.jsp which is the  other page. "<FORM  ENCTYPE="multipart/form-data" action=
"upload.jsp" METHOD=POST>" Instead, it should  upload the logic on the same hello.jsp page.

In addition,when the file is uploaded,the details of the file along with its 3 rows of the information must be displyed on the same page.


The screenshots are attached:



_________________________________________________________________________________________________________________

index.jsp code is below

<%@ page language="java" %>
<HTml>
<HEAD><TITLE>Display file upload form to the user</TITLE></HEAD>  
<% //  for uploading the file we used Encrypt type of multipart/
//form-data and input of file type to browse and submit the file %>
  <BODY> <FORM  ENCTYPE="multipart/form-data" ACTION=
"upload.jsp" METHOD=POST>
            <br><br><br>
        <center><table border="2" >
                    <tr><center><td colspan="2"><p align=
"center"><B>PROGRAM FOR UPLOADING THE FILE</B><center></td></tr>
                    <tr><td><b>Choose the file To Upload:</b>
</td>
                    <td><INPUT NAME="F1" TYPE="file"></td></tr>
                              <tr><td colspan="2">
<p align="right"><INPUT TYPE="submit" VALUE="Send File" ></p></td></tr>
             <table>
     </center>      
     </FORM>
      <script src="page.js" type="text/javascript"></script>
</BODY>
</HTML>


upload.jsp code is below

<%
        //to get the content type information from JSP Request Header
        String contentType = request.getContentType();
        //here we are checking the content type is not equal to Null and
 //as well as the passed data from mulitpart/form-data is greater than or
 //equal to 0
        if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) {
                DataInputStream in = new DataInputStream(request.
getInputStream());
                //we are taking the length of Content type data
                int formDataLength = request.getContentLength();
                byte dataBytes[] = new byte[formDataLength];
                int byteRead = 0;
                int totalBytesRead = 0;
                //this loop converting the uploaded file into byte code
                while (totalBytesRead < formDataLength) {
                        byteRead = in.read(dataBytes, totalBytesRead,
formDataLength);
                        totalBytesRead += byteRead;
                        }
                                        String file = new String(dataBytes);
                //for saving the file name
                String saveFile = file.substring(file.indexOf("filename=\"") + 10);

                saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
                saveFile = saveFile.substring(saveFile.lastIndexOf("\\")
 + 1,saveFile.indexOf("\""));
                int lastIndex = contentType.lastIndexOf("=");
                String boundary = contentType.substring(lastIndex + 1,
contentType.length());
                int pos;
                //extracting the index of file
                pos = file.indexOf("filename=\"");
                pos = file.indexOf("\n", pos) + 1;
                pos = file.indexOf("\n", pos) + 1;
                pos = file.indexOf("\n", pos) + 1;
                int boundaryLocation = file.indexOf(boundary, pos) - 4;
                int startPos = ((file.substring(0, pos)).getBytes()).length;
                int endPos = ((file.substring(0, boundaryLocation))
.getBytes()).length;
                // creating a new file with the same name and writing the
//content in new file
                FileOutputStream fileOut = new FileOutputStream(saveFile);
                fileOut.write(dataBytes, startPos, (endPos - startPos));
                fileOut.flush();
                fileOut.close();
                                %><Br><table border="2"><tr><td><b>You have successfully
 upload the file by the name of:</b>
                <% out.println(saveFile); %></td></tr></table> <%
                }
 
       
%>



page.js code is below

// JavaScript Document

$(function(){
/*
$("#f1").click(function(){
               
$("#CSVTable").CSVToTable("csvFile.csv");
  });

  $("#g").click(function(){
               
$("#CSVTable").CSVToTable("Book1.csv");
  });*/
 
  /*Hide  form1*/
  $("#form1").hide();
 
 
  $("#CSVTable").CSVToTable("<% out.println(saveFile); %>")
       
});

End

Thanks a million
Michel Plungjan

Sorry. You really need to pass this project to a developer with experience.

1) I do not see any jQuery or csvtotable JS files included anywhere
2) you cannot have jsp statements in static JS files
3) you need to be able to perform simple debugging using for example Firefox plus firebug, in which case you would see many solvable errors in th console.
4) there are no objects with ID=f1 - JavaScript is case sensitive and jQuery uses # for ID, not for name

EE is a place to get answers to coding issues, not to rent-a-coder unless you go to someone's profile and click "hire me" - in this particular case I am not available for hire since I do not do jsp
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
dvcphp

ASKER
Mplungjan ,Thank you so much for helping me .
There seems to be a great confusion from my end.I may have to figure it out at my work place.We are definitely missing the important puzzle somewhere and this confusion is the result of that.
Thanks to all the other Experts who tried to help me solve this problem.
Michel Plungjan

You are welcome - good luck and feel free to come back for specific issues