Uploading XML file using AJAX

Question

I've found a mound of questions on SO regarding uploading a file using AJAX although none of them really seem to find my needs.

What I need to do is have a user upload an XML file and have the script run through the XML file and take out the data that is in certain tags in the file and then push the data into a corresponding array which reflects the tag. So say I found a book in an xml, it would push the data into an array NewBooks.

I don't have any experience with PHP, quite honestly its confusing to me. If there is a way without PHP, that would be grand.

reader.onload = function (e) {
        console.log('reading file')
        $(document).ready(function () {
         console.log('analyzing ajax')
            $.ajax({
                type: "GET",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('book').each(function () {
                        UploadBooks.push($(this).text());
                    });            
                }
            })
        })
   console.log(UploadBooks);
}

That is the code I have although the printed UploadBooks has no elements, even though when I look into the XML file, there are clearly book tags.

Are you saying you want the user to submit an XML file and then parse it client-side? — Ray Nicholus, Jul 02 '13 at 18:08
you can always console.log(xml) and then browse the object in chrome or firefox console. — abc123, Jul 02 '13 at 18:11
file uploads in ajax are pretty broken if you want browser compatibility. Either grab something like http://www.plupload.com, or go the classic input=file way ..either way you then have to grab the binary bytes via php (or other) on the server side and then do something with it — Robert Hoffmann, Jul 02 '13 at 18:15
btw you are calling $ajax without passing a URL, so nothing will happen here anyways. If the client is uploading a file the GET is wrong and should be POST, if the client is fetching a file from the server, then you just forgot to mention the URL to fetch from. — Robert Hoffmann, Jul 02 '13 at 18:20
Yes, I want the user to submit a file on the client side. I don't really care for browser compatability. The missing URL is because it isn't located anywhere, the file is uploaded. I was thinking "this" might work for that but it didn't. Can you let me know what the URL would be for a file that was just uploaded? — Funkyguy, Jul 02 '13 at 18:43

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

Not all browsers can upload files via Ajax. Only those supporting XMLHttpRequest2. Getting that to work with jQuery (as per your example) is going to take some tricks too.

You say you'd rather not use PHP, which would mean no point uploading a file anyway. Check out the HTML5 FileReader API if you want to try and parse the XML file on the client side. You might be able to load the file into a DOM structure to achieve what you're trying to do.

edited May 23 '17 at 12:05

Community

1
1

answered Jul 02 '13 at 18:18

Tim

8,036
2
36
52

XMLHttpRequest 2, plus either File API or FileReader API ..basically limits you to IE10+, Safari 6+, and problems on android. – Robert Hoffmann Jul 02 '13 at 18:25
Chrome, FF, iOS6 are also supported. In fact, only IE9 and older along with iOS5 and Android 2.3.x don't properly support the File API to allow uploads via ajax. – Ray Nicholus Jul 02 '13 at 18:30
Sorry deleted previous comment ..if i didn't mention the other browsers it's because they are supported. I just meant with IE10+ support it will be broken for 10-15% of your users, which for me personally is unacceptable. – Robert Hoffmann Jul 02 '13 at 18:36
Yes, older than IE10 support for the File API does not exist. For those browsers, you will need to revert to the 'ole hidden iframe trick to upload files, and your server will need to return the contents of the XML files, which can then be parsed client-side via `DOMParser`. I answered a similar question [here](http://stackoverflow.com/questions/17375435/fill-html5-input-fields-with-uploaded-xml-file/17394262#17394262), but my answer leaves out non-File API browsers. – Ray Nicholus Jul 02 '13 at 18:40
I've already done the file reader dealio, although I encountered problems when sorting through the xml file. I liked the ajax way because it had a $(xml).find – Funkyguy Jul 02 '13 at 18:41
Not that I'm advocating the approach, but you can load a source string into jQuery and use `find()`, it doesn't have to be via an Ajax call. – Tim Jul 02 '13 at 18:46
Wait so I could load the file, read in as text, and the just use find() within the file? – Funkyguy Jul 02 '13 at 18:48
jQuery wraps DOM elements: `alert( $('
Foo
').find('p').text() );` I'll leave you with that. – Tim Jul 02 '13 at 18:52
Alright! Awesome!, I'll use that. I can't believe I didn't figure that out. – Funkyguy Jul 02 '13 at 18:54
For anybody who finds this, I ended up using DOMParser and then using .find().each() to initiate actions upon the found elements. If you need more info, contact me. – Funkyguy Jul 03 '13 at 01:32

Uploading XML file using AJAX

1 Answers1