I’ve recently tried to upload a file from a client to a server and faced the problem of cross-domain. Indeed, uploading is done with ajax, to be able to analyze the response. So, I had to solve 2 problems: uploading with ajax and cross-domain.<\/p>\n
Concerning cross-domain, I’ve found many different solutions but none of them really fit my need since I needed to add informations in the header. (I think there were other reasons, but cannot remember). I find it easier to make a two step upload. First, I upload the file to my simple PushState server, then the server upload the file to the other website. This server is built using NodeJs, express and request. Upload is made with request and its form parameter which allows us to do multipart\/form-data<\/em>. Uploading with ajax is done thank to jquery.iframe-transport<\/a> (just add it in your code). The html behind:<\/p>\n In this case, I listen for the event change input.fileUpload<\/em> which indicates that a file has been chosen and then, call a function executing the ajax part. It would also be possible to react on click on a button.<\/p>\n Other solutions concerning cross-domain: \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0 http:\/\/stackoverflow.com\/questions\/3076414\/ways-to-circumvent-the-same-origin-policy<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 https:\/\/github.com\/blueimp\/jQuery-File-Upload\/wiki\/Cross-domain-uploads<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" I’ve recently tried to upload a file from a client to a server and faced the problem of cross-domain. Indeed, uploading is done with ajax, to be able to analyze the response. So, I had to solve 2 problems: uploading with ajax and cross-domain. Concerning cross-domain, I’ve found many different solutions but none of them … Continuer la lecture de « File upload with Ajax and Cross-domain »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[88,89,27,87],"class_list":["post-1018","post","type-post","status-publish","format-standard","hentry","category-code","tag-ajax","tag-cross-domain","tag-nodejs","tag-upload"],"_links":{"self":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1018"}],"version-history":[{"count":5,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/1018\/revisions"}],"predecessor-version":[{"id":1028,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/1018\/revisions\/1028"}],"wp:attachment":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nHere is the server:<\/p>\nvar express = require('express');\r\nvar request = require('request');\r\nvar fs = require('fs');\r\nvar app = express();\r\n\r\napp.use(express.logger());\r\napp.use(express.bodyParser({uploadDir:'.\/tmp'}));\r\napp.use(app.router);\r\napp.use(express.static('.\/public'));\r\napp.use(function(req, res) {\r\n fs.createReadStream('.\/public\/index.html').pipe(res);\r\n});\r\n\r\napp.post('\/upload', function(req, res, next) {\r\n \/\/Configure the request\r\n var opts = {\r\n url: \"http:\/\/your\/url\",\r\n method: \"POST\",\r\n headers: {\r\n login: \"yourLogin\",\r\n password: \"yourPassword\"\r\n }\r\n };\r\n\r\n var x = request(opts);\r\n var form = x.form();\r\n\r\n \/\/Optionnal: Add a name and a type to form\r\n var fileName = req.files.file.name.split('.');\r\n form.append('name', fileName[0]);\r\n form.append('type', fileName[fileName.length - 1]);\r\n\r\n \/\/Add file to the request\r\n form.append('file', fs.createReadStream(req.files.file.path));\r\n\r\n \/\/Pipe response from website to the client\r\n x.pipe(res);\r\n});\r\n\r\napp.listen(4242, function() {\r\n console.log('Server running!');\r\n});<\/pre>\n
\nConcerning ajax, code is really simple:<\/p>\n$.ajax({\r\n url: \"http:\/\/localhost:4242\/upload\",\r\n type: 'POST',\r\n files: $('.fileUpload'),\r\n iframe: true,\r\n success: function(data, textStatus, jqXHR) {\r\n \/\/Do whatever you want with the response\r\n },\r\n error: function(err) {\r\n console.error(err);\r\n console.log(\"Error while uploading the document. :\/\");\r\n }\r\n});<\/pre>\n<form enctype=\"multipart\/form-data\">\r\n <input class='fileUpload' type=\"file\" name=\"file\"\/>\r\n<\/form><\/pre>\n