Blueimp jquery file upload plugin throwing error after uploading 100% is done to rackspace cloud storage

Question

I have been trying to upload files to rackspace storage from my website. I have followed the following api guide to create the form to upload files to rackspace. http://docs.rackspace.com/files/api/v1/cf-devguide/content/FormPost-d1a555.html section 7.2, 7.2.1 and 7.2.2

It completely works fine if I do a normal form submit. The file gets uploaded to rackspace storage and returns a status 201 and a blank message. I checked the file in the container and its uploaded successfully.

But now the problem comes when i try to integrate progressbar using Blueimp jQuery file upload plugin.

Here's my code to initialize the fileupload plugin

$(function () {
'use strict';

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({maxChunkSize: 10000000});




if (window.location.hostname === 'blueimp.github.com') {
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//jquery-file-upload.appspot.com/',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ]
    });
    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//jquery-file-upload.appspot.com/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }
} else {
    // Load existing files:
    console.log("mukibul");
    $('#fileupload').each(function () {
        var that = this;
        console.log("result1");
        $.getJSON(this.action, function (result) {

            if (result && result.length) {
                console.log("result");
                console.log(result);
                $(that).fileupload('option', 'done')
                    .call(that, null, {result: result});
            }
        });
    });
}});

Here's the web form to upload files

<form id="fileupload" action="https://storage101.dfw1.clouddrive.com/v1/MossoCloudFS_4d6c7b53-7b5a-458c-8a2d-957971f293bb/tranceyatralocal/${sessionScope.tyUser.userID}/${albumDetails.albumId}" method="POST" enctype="multipart/form-data">
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
     <input type="hidden" name="redirect" value="http://localhost:8080/impianlabs/home/uploadResponse.htm" />
        <input type="hidden" name="max_file_size" value="${max_file_size}" />
        <input type="hidden" name="max_file_count" value="10" />
        <input type="hidden" name="expires" value="${expires}" />
        <input type="hidden" name="signature" value="${hmac}" />
    <div class="row fileupload-buttonbar" style="margin:10px;">
        <div class="span7" style="">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="icon-plus icon-white"></i>
                <span>Add files...</span>
                 <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" class="toggle">
        </div>
        <!-- The global progress information -->
        <div class="span5 fileupload-progress fade">
            <!-- The global progress bar -->
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="bar" style="width:0%;"></div>
            </div>
            <!-- The extended global progress information -->
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <!-- The loading indicator is shown during file processing -->
    <div class="fileupload-loading"></div>
    <br>
   <!--  <div>
        <ul id="filePreview">

        </ul>
    </div> -->




    <!-- The table listing the files available for upload/download -->





    <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>

When I upload any files, it starts uploading normally, the progress starts showing up as expected. In chrome Inspect->Network tabs I could see two requests to the rackspace server. One is method OPTIONS which returns 200 and another is method POST which remains in Pending until the progress bar reaches 100% but as soon as it reaches 100% the status of the POST method changes to cancelled and the jquery file upload plugin prints error true in the webpage. I am not able to understand why the plugin is throwing error. I checked the container and found that the file got uploaded successfully.

I have used curl to set all headers required for CORS in rackspace. But not sure what I am doing wrong. Any help to resolve the issue would be appreciated.

Note: I'm using spring mvc for the application.

Thanks, Mukibul

Answer 1

At the present time, Cloud Files and the underlying Openstack Swift component do support POST uploading as you've been successful with (Docs here and here). Unfortunately there appears to be a known issue that prevents CORS from working properly due to a missing header in the response.

The change has been merged into master, but hasn't been deployed to Rackspace's running version for Cloud Files. I have an inquiry in with our CF team on a timeline for having this fixed so we can come to a real resolution for this.

UPDATE: The script fails to upload for me in Chrome, but works in Firefox. Chrome reports the POST is cancelled as you described, but Firefox completes it and gets an HTTP 303 response along with the expected redirect URI and the file is present in the container. I'm looking at the code for the plugin to see how it handles success/failure in it's responses.

Answer 2

Just found out from the Rackspace that this merge is not in the roadmap and is also not being tested currently. I don't see this coming in near future.

Hopefully one day they will implement it. For now, I would just overwrite the header of the page in the controller before serving it to the browser.