dropzone.js image upload to different server (cross domain)

Question

Here is my code to upload image, It is working fine if i give the form action as same server

NOT working if i give action to different server

html :

<div id="dropzone">
                                <form action="http://localhost:8080/stardom/api/v1/image" class="dropzone">
                                    <input type="hidden" name="album_id" value="" id="album_id" />
                                    <div class="fallback">
                                        <input name="file" type="file" multiple="" />
                                    </div>
                                </form>
                            </div>

js :

$(".dropzone").dropzone({
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 2, // MB
                acceptedMimeTypes : 'image/*',
                addRemoveLinks : false,
                dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> Drop files</span> to upload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="upload-icon icon-cloud-upload blue icon-3x"></i>'
            ,
                dictResponseError: 'Error while uploading file!',

                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-success progress-striped active\"><span class=\"bar\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
                complete : function(){

                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                        loadImages();
                    }

                }
              });

Question : How can i make dropzone.js upload files to different server?

Answer 1

I used this code and it worked.

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With, Cache-Control, Accept, Origin, X-Session-ID');
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,TRACE,COPY,LOCK,MKCOL,MOVE,PROPFIND,PROPPATCH,UNLOCK,REPORT,MKACTIVITY,CHECKOUT,MERGE,M-SEARCH,NOTIFY,SUBSCRIBE,UNSUBSCRIBE,PATCH');
    res.header('Access-Control-Allow-Credentials', 'false');
    res.header('Access-Control-Max-Age', '1000');

    next();
}
server.use(allowCrossDomain);

Answer 2

If you are going to be doing anything where ServerA serves the content to Browser and Browser wants to turn and send information to ServerB, and you are doing this via javascript/ajax, you are going to need to tell the receiving ServerB that it should accept data posts from a server it did not just serve to. Usually this is done using Access-Control-Allow-Origin "*" In your .htaccess file.

I have some experience with this, but not a ton. I have used it on internal platform applications where we do not need to worry about XSS. Hope that helps. Sorry its so late.