Sending FormData to PHP file not working as expected - javascript

I have a XMLHttpRequest to send a courseName to php file on the server like this:
const xhr = new XMLHttpRequest();
xhr.onload = function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
const fd = new FormData();
fd.append("courseName", 'Math');
xhr.open("POST", "upload.php", true);
xhr.send(fd);
PHP:
<?php
echo $_FILES['courseName']
?>
But nothing is returned, I'm confused please help... it should return Math, Doesn't it?

The network doesn't show any data sent over.
How to use FormData for AJAX file upload?
Shows you how to send files using FormData ...
Best,
Smith

Related

.obj files not sending xhr post

I have a jquery code where I send files with xhr post, this code works fine for other files but for files with ".obj" extension it doesn't send any value in post (it doesn't send test data independent of the file either)
When I print the file value to the console, I can see that it is written correctly
Code;
var form = new FormData();
form.append("file", file);
form.append("test", "test");
var xhr = new XMLHttpRequest();
xhr.open("POST", "desk.php", true);
xhr.onload = function ()
{
if (xhr.status == 200)
{
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send(form);

setting up tinymce with cloudinary in html and javascript

I've read the readme file at https://github.com/cloudinary/cloudinary_tinymce but still can't understand how to do it. Plus they do it on Ruby on Rails, which doesn't really help.
Do I really need to do server-side endpoint? It only asks for a signed URL. But I don't need it to be signed. How do I do it within JavaScript and HTML alone? I don't want to do anything inside my server except to render templates.
edit: I tried it with image_upload handler and it uploads to my Cloudinary account. But it won't give me the url for the image on successful upload (I expect to get something like https://res.cloudinary.com/strova/image/upload/v1527068409/asl_gjpmhn.jpg). Here's my code:
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'https://api.cloudinary.com/v1_1/strova/upload');
xhr.onload = function () {
var json;
if (xhr.status !== 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
formData.append('upload_preset', cloudinary_upload_preset);
xhr.send(formData);
}
Try "faking" a POST request for one. I am still trying. To figure out why the documentation "requires" a POST request. The PHP example: https://www.tinymce.com/docs-3x//TinyMCE3x#Installation/ just echos back what gets POSTED to server. The plugin must be interpolated the posted content.
Inspired by your code, I was able to resolve this pain point for myself. The missing part was that after parsing the response, the secure_url from the response needed to be called and assigned to json in the format required by TinyMCE. Following is the code:
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
//restricted it to image only using resource_type = image in url, you can set it to auto for all types
xhr.open('POST', 'https://api.cloudinary.com/v1_1/<yourcloudname>/image/upload');
xhr.onload = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var url = response.secure_url; //get the url
var json = {location: url}; //set it in the format tinyMCE wants it
success(json.location);
}
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
formData.append('upload_preset', '<YourUnsignedUploadPreset>');
xhr.send(formData);
}

XMLHTTPRequest POST getting stuck

I am trying to POST to a google maps service. If you click on the URL you will see the JSON response that I am expecting to get
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest()
var url = "https://maps.googleapis.com/maps/api/directions/json?origin=Exeter&destination=Deal&region=uk&mode=driving"
xhr.open('POST', url, true)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
// do something to response
alert(this.responseText)
}
However, this code gets stops after xhr.onload = function(). So I never get the response back. Is there an error in my code?
You forgot to send the request.
xhr.send("The string of application/x-www-form-urlencoded data you are POSTING goes here");
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest()
var url = "https://maps.googleapis.com/maps/api/directions/json?origin=Exeter&destination=Deal&region=uk&mode=driving"
xhr.open('POST', url, true)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
// do something to response
alert(this.responseText)
}
xhr.send("data to be send");
Try this.

XMLHttpRequest text send 404 error

I have a text file on my server and I want to upload a text in it using XMLHttpRequest. It is downloaded successfully via GET method, but when I try to POST it I get 404 error.
var r1 = new XMLHttpRequest();
r1.open("GET", "db.txt", false);
r1.send();
var str = r1.responseText + "foo text";
var r2 = new XMLHttpRequest();
r2.open("POST", "db.txt", false);
r2.send(str);
Doing a direct upload as you're trying would be a security concern in most places and is generally not permitted... What you need to do is have a middle layer on your server to handle the request and write the file to disk safely.
You can easily upload a file using something like this:
var jsonBlob = new Blob([someJSON], {type: "text/plain;charset=utf-8"});
var data = new FormData();
data.append("filename", "new.json");
data.append("json", jsonBlob);
var xhr = new XMLHttpRequest();
var postURL = "http://example.com/post_target";
xhr.open("POST", postURL, true);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(e.target.response);
}
};
xhr.send(data);
Where postURL is an endpoint which can handle file uploads.
If you post what language(s) you have available on your server (PHP?) I can give some example code to handle the upload on the server's end.

empty $_POST while sending Blob

I'm sending binary data to server using Blob, but there is nothing in $_POST variable. What did I do wrong?
var xhr = new XMLHttpRequest();
xhr.open('POST', '/save.php', true);
var formData = new FormData();
formData.append("data", new Blob(["㚂☇䰉耸ڀ찃怮...binary...:⡒㠯ݟᑣ"]));
xhr.send(formData);
xhr.onload = function(e){
if (this.status == 200){
console.log(this.responseText);
}
};
server side:
var_dump($_POST); //returns array(0) {}
This is a really simple fix...
When you send a BLOB it sends as a file not as post data. Therefore you need to use $_FILES not $_POST.
Using your code modified to var_dump($_FILES) outputs:
"array(1) {
["data"]=>
array(5) {
["name"]=>
string(4) "blob"
["type"]=>
string(24) "application/octet-stream"
["tmp_name"]=>
string(14) "/tmp/tmpfilename"
["error"]=>
int(0)
["size"]=>
int(44)
}
}
You could then open the file serverside with file_get_contents($_FILES['data']['tmpname']) same as you would any other uploaded file.
I managed to send that data this way:
var xhr = new XMLHttpRequest();
xhr.open('POST', '/save.php', true);
xhr.send("㚂☇䰉耸ڀ찃怮...binary...:⡒㠯ݟᑣ");
xhr.onload = function(e){
if (this.status == 200){
console.log(this.responseText);
}
};
server side:
var_dump($HTTP_RAW_POST_DATA); //string(1820) "㚂☇䰉耸ڀ찃怮...binary...:⡒㠯ݟᑣ"

Categories