Super Simple File Upload Example

Super Simple File Upload Example

jrburcherjrburcher Posts: 2Questions: 1Answers: 0

Hi All,

I was wondering if it was possible to provide a super simple file upload example? I just want to upload a single file to the server and for a JSON response to come back. Here is what I currently have:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
        <title>Test</title>
        
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="/test/css/editor.dataTables.min.css">
        
        <script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" src="//cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
        <script type="text/javascript" src="/test/js/dataTables.editor.min.js"></script>
    </head>
    <body>
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                </tr>
            </thead>
        </table>

        <script type="text/javascript">
            var table;
            var editor;
            
            $(document).ready(function() {
                editor = new $.fn.dataTable.Editor( {
                    idSrc: "id",
                    ajax: "/test/server-upload.php",
                    table: "#example",
                    fields: [{
                        name: "firstName",
                        type: "upload"
                    }]
                } );
            
                table = $('#example').DataTable( {
                    dom: "Bfrtip",
                    ajax: "/test/server-upload.php",
                    columns: [
                        { data: "firstName" },
                        { data: "lastName" }
                    ],
                    select: true,
                    buttons: [
                        { extend: "create", editor: editor },
                        { extend: "edit",   editor: editor },
                        { extend: "remove", editor: editor }
                    ]
                } );
            } );
        </script>
    </body>
</html>

On submit, my browser shows this as the params:
https://gyazo.com/7346aaafc76de169a418c965e91aca4c

I am not sure why, but I can't seem to get just a super simple file upload working. So no database integration, just a simple prototype page. Any ideas on how to fix?

Thank you!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,161Questions: 1Answers: 10,406 Site admin
    Answer ✓

    Yup - that's a multi-part MIME upload, which is what I would expect for a file upload via Ajax / HTTP.

    On the server-side use print_r( $_FILES ) and you should see information about the uploaded file in the return (it will be invalid JSON, but that doesn't matter for a quick debugging check :)).

    Allan

  • jrburcherjrburcher Posts: 2Questions: 1Answers: 0

    Alan that was perfect, thank you very much! It gave me exactly what I needed :smile:

    Thank you

This discussion has been closed.