Download using XMLHttpRequest does not work on mobile devices

Question

Hi guys, I'm currently working on a download function that uses XMLHttpRequest . It works great on web browsers, but when I tested it on mobile devices, it no longer works. Here is the error log after selecting a photo on a mobile device:

E / chromium (2604): [ERROR: layer_tree_host_impl.cc (2121)] Forcing initialization of a null copy as a working context is missing

I already added a pedestrian crossing

Here is my client code:

 if(fileInfo.size <= 20000000) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/uploadSomeWhere', true); xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); if (xhr.upload) { xhr.upload.onprogress = function(e) { if (e.lengthComputable) { display.innerText = Math.floor((e.loaded / e.total) * 100) + '%'; bootstrapPB.style.width = Math.floor((e.loaded / e.total) * 100) + '%'; } } xhr.upload.onloadstart = function() { display.innerText = '0%'; bootstrapPB.style.width = '0%'; } } xhr.send(fileInfo); } else { LocalState.set("mainError", "Please upload a file not more than 20MB"); } 

On my server:

 WebApp.connectHandlers.use('/uploadSomeWhere',function(req,res){ function makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 10; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } var uniquePhotoId = makeid(); var originalPhoto = "/"+uniquePhotoId+"_original/"; fs.mkdirSync("/home/dating/contents/"+originalPhoto); var file2 = fs.createWriteStream("/home/dating/contents"+originalPhoto+uniquePhotoId); file2.on('error',function(error){if(error){ throw new Meteor.Error("Filed to upload image"); }}); file2.on('finish',function(){ res.writeHead(200, {"content-type":"text/html"}); res.end(); }); req.pipe(file2); // Set timeout to fully capture and convert the image setTimeout(function(){ imageMagick(file2.path).autoOrient().setFormat("jpg").write(file2.path, function(){ req.pipe(file2); }); }, 1000); req._events.close; }); 

Please report what went wrong. Thank you very much. By the way, I am creating a hybrid mobile application using ReactJS and Meteor.

I'm not sure that xhr is not sending data or the server is not accepting send data from xhr

Answer 1

It seems that there really is a problem using xhr in reactjs, so what I did was to figure out how to use FileReader to convert the image from the file input to the base64 buffer, and from there I use the FS node on the server to convert the base64 buffer, then download him to the directory.

Now everything works fine :)