Categories

Cross Domain AJAX Upload

Posted on: September 27, 2015 by Dimitar Ivanov

Rather than using the standard file upload mechanism often it's more convenient to use the XMLHttpRequest API and to upload files in non-blocking manner with asynchronous requests. This blog post describes how to accomplish this with the help of jQuery and the Upload plugin. In addition the cross-domain file upload is discussed too.

Let's start with adding the required libraries to the web page:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://static.zinoui.com/1.5/compiled/zino.upload.min.js"></script>

The HTML element used as container of this ajax uploader must be placed outside of any FORM elements.

<!-- This is the container where the upload button will appear -->
<div id="upload"></div>

Ajax File Upload

The file handler and http method are the only options you need to setting up before start.

$("#upload").zinoUpload({
    method: "POST",
    url: "upload.php"
});

AJAX Multiple file upload

For multiple file upload the name of form parameter must ends with square brackets []. Also the multiple property must be set to true.

$("#upload").zinoUpload({
    method: "POST",
    url: "upload.php",
    name: "files[]",
    multiple: true
});

Send additional data with file upload

To submit additional data alongside with the POST request, use the data property.

$("#upload").zinoUpload({
    method: "POST",
    url: "upload.php",
    data: {
        "product": 42,
        "color": "blue"
    }
});

Upload Callbacks

Handling the states of file upload process is provided by 3 callbacks: change, submit and complete.

$("#upload").zinoUpload({
    method: "POST",
    url: "upload.php",
    change: function (event, ui) {
        //console.log(ui);
    },
    submit: function (event, ui) {
        //console.log(ui);
    },
    complete: function (event, ui) {
        //console.log(ui);
    }
});

Cross-domain AJAX File Upload

Let's see an example of upload.php, the PHP script who is responsible to process the file upload.

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
    //header("Access-Control-Allow-Origin: *");
}
header('Content-Type: application/json; charset=utf-8');
if (isset($_FILES['file']) && is_uploaded_file($_FILES['file']['tmp_name'])
    && $_FILES['file']['error'] == UPLOAD_ERR_OK) {
    if (move_uploaded_file($_FILES['file']['tmp_name'], '/uploads/' . basename($_FILES['file']['name']))) {
        // File is valid, and was successfully uploaded
        echo json_encode(array('status' => 'OK'));
    } else {
        echo json_encode(array('status' => 'ERR'));
    }
} else {
    echo json_encode(array('status' => 'FAIL'));
}
exit;
?>
Conclusion

A demo of above code examples you can find out at cross-domain ajax upload demo page. To see more use cases explore our upload plugin' demo pages. For complete list of configuration options please read the API documentation.

If you have questions about the cross-domain ajax file upload, please leave a comment below. Thanks so much for reading!

Make your website more secure by using the HTTP Headers for Wordpress, and never face a cross-origin issue again. Oh yes, it's FREE.
Further reading
Share this post

1 Comment

Ghani Nafiansyah
Ghani Nafiansyah August 21, 2016 at 10:29 am
Is there setting to attribute accept = ""

Leave a comment

Captcha