Let user upload an xml file and parse it (without PHP)?

Question

I am quite knowledgeable in CSS(3) and HTML(5), but my current project allows me to take things further. However, this is completely unknown terrain for me. In my project I have a textarea in which users can submit some XML, which I then parse with jQuery's $.parseXML method. However, I want to add the ability to upload an XML file.

I suppose the upload button would look like this:

<form name="upload-form" action="???" method="???">
    <input type="file" name="upload-field">
</form>

However, I do not know what the action and method ought to look like. Because I am staying on the same page and nothing spectacular is supposed to happen, I am guessing the action-attribute can be left out? The method-attribute might be get, rather than post? (1)

And then what? I don't know how I get the data from the uploaded XML document in my jQuery's parser. (2) Also, how to check for the correct file type? Does this have to happen server-side? (3)

I'm afraid you can't upload a file using just a client side language. If you validate the file type using jquery (assuming that it's possible), everyone would be able to overcome the control by deactivating javascript. I would strongly advise you to use a server-side language to do that. — Stubborn, Oct 17 '14 at 17:43
Take a look at the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader), [Using files from web applications](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications), and [this question](http://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers). Depending on the browsers you need to support this looks doable. — cOle2, Oct 17 '14 at 17:53
I've closed against the duplicate of your first problem - eh question: upload file stay on same site. Next to that, Stackoverflow works best with a clear problem statement (or how I often word it: with one question at a time). — hakre, Oct 18 '14 at 15:34

score 0 · Answer 1 · answered Oct 17 '14 at 17:59

action contains the name of the server side script that will receive the form data. when using post, the browser does not parse the content of the input field into the url. the server side script, e.g. in php will receive the request, do security checks and save the data.

<form name="upload-form" action="serversidescript.php" method="post">
  <input type="file" name="upload-field">
  <input type="submit" value="Submit">
</form>

serversidescript.php

<pre>
<?php
print_r($_REQUEST); // shows the array containing the form data

Edward Manda · Answer 2 · 2014-10-17T18:16:59.297

leave the method empty and use the post method. Using post for files is important because it has security features and allows you to upload more data.

since it's uploading a file you need to add the enctype, enctype="multipart/form-data" or it won't work

<form name="upload-form" action="" method="post" enctype="multipart/form-data" >
    <input type="file" name="upload-field">
    <input type="submit" value="Submit">
</form>

ANd then to parse the file, you need to read the xml file using jquery and then write a parser function depending on what you need to do.

//write the custome parse function
function parse(data){
   //code for your parse function goes here.
   // to append the file to html, I need the actual structure of the file to show you
}

//this reads the xml file using jquery
$.ajax({
    url: 'name.xml', // name of file you want to parse
    dataType: "xml",
    success: parse, //this calls the parse function
        error: function(){alert("Error: Something went wrong");}
  });

Let user upload an xml file and parse it (without PHP)?

2 Answers2