Adding additional information to Simple Jquery FileUpload

Question

I'm trying to integrate juqery fileupload with an ajax form submit. The ajax form sends the text and returns the ID of the newly created event, This is necessary to know which event to link with when uploading. The simple upload demo uses the following code

Here's the ajax that first upload the non-file fields

$.ajax({
       type: 'post',
       url: '/whats-on/upload-event/',
       data: JSON.stringify(data),
       contentType: "application/json; charset=utf-8",
       traditional: true,
       success: function (return_data) {
           console.log(return_data)
       }
    });

It returns the following json

Object {status: true, id: 17162}

However the fileupload sends the files without declaring data: data,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>

    <input id="fileupload" type="file" data-url="server/php/">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/vendor/jquery.ui.widget.js"></script>
    <script src="js/jquery.iframe-transport.js"></script>
    <script src="js/jquery.fileupload.js"></script>
    <script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                //Returns ID as e['id'] and 200 status also with e['status']
            }
        });
    });
    </script>
    </body> 
</html>

Pass the non-file data as query string, please see my answer. — anmarti
– anmarti, Commented Oct 10, 2016 at 9:08

anmarti · Accepted Answer · 2016-10-10 08:47:33Z

1

You first need to get the event Id with an ajax post:

function uploadClick(){
   var eventId = getEvent();
   uploadFile(eventId)
}

function getEvent(){
   // make an ajax and return your id
}

One you got it, then create an URL with a query string indicating the eventId. this URL is where you want to post your file:

function uploadFile(eventId){
    // attatch the id to the URL with query string
    url = url + '&eventId=' + eventId;

    // submit here your file
}

This way you can post in the same ajax call the file itself and the event id. In you server side action you need to get this query string and then pick the posted file.

edited Oct 10, 2016 at 8:47

answered Oct 10, 2016 at 8:28

anmarti

5,15310 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syed Fasih · Accepted Answer · 2016-10-10 09:26:27Z

0

You may have to handle callbacks for fileupload plugin like:

$('#fileupload').fileupload({
                    url: <url>,
                    type: <HTTP_VERB>,
                    other configurations...

                }).bind('fileuploadadd', function (e, data) {
                    //fires when you select a file to upload
                }).bind('fileuploaddone', function (e, data) {
                    //fires when upload completed successfully. equivalent to done call back of jQuery ajax
                }).bind('fileuploadfail', function (e, data) {
                  //fires when upload fails
                });

For complete reference please take a look at the following link .

edited Oct 10, 2016 at 9:26

answered Oct 10, 2016 at 8:49

Syed Fasih

3124 silver badges13 bronze badges

Collectives™ on Stack Overflow

Adding additional information to Simple Jquery FileUpload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related