How to upload an image file to zoho creator from javascript

How to upload an image file to zoho creator from javascript
0

so you need to upload it straight from your application? im not even sure what zoho creator is but you will most likely have to use their api if they do that, if not and you want to upload manually then that video shows how to download it as an image so you then upload it manually

Zoho creator having api for file upload. It doesn’t allow cross origin. So I think I need to use post method of PHP. will php is useful for that?

have you allowed cross origin in your code? you can allow it in the header or params depending on what your using to to make requests sometimes adding origin=* to the url works too

yaa :smiley: . That only I need to know. How to allow cross origin in my code. Please say that

Access-Control-Allow-Origin: *

add that to your header in your api request more info here

Actually, I don’t know how to form the request with header and other necessary things. Can you please share an example script

@biscuitmanz Can you please share a sample request ?

what are you using to make requests?

I am using AJAX for that.

//jquery
$.ajax({
    type: "post",
    headers: {"Access-Control-Allow-Origin": "*"},
    url: "your url"
}).done(function (data) {
    console.log(data);
});

//javascript
var xhr = new XMLHttpRequest();
xhr.open("post", "your url", true);
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send();

more info here…#

i usually use axios so im not used to these methods sorry

Thanks a lot @biscuitmanz :blush:

So Can I use that method for my use?

i use axios for vue.js you shouldn’t need it if your already using ajax with normal javascript you be better using jquery ajax if anything

Oh Okay @biscuitmanz . Thank you so much

did the cross origin still not work?

yes @biscuitmanz. Thanks for asking. Now it shows following error , “Uncaught (in promise) TypeError: Failed to execute ‘decode’ on ‘HTMLImageElement’: Illegal invocation”

might be because the image is still base64? have you console logged the image and seen if its really long code.

this might help

var ImageURL = "your image"
// Split the base64 string in data and contentType
var block = ImageURL.split(";");
// Get the content type of the image
var contentType = block[0].split(":")[1];// In this case "image/gif"
// get the real base64 content of the file
var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."

// Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);

more info…

Thank you @biscuitmanz

Now I am using Php for record add and file upload . record has been added fine. But the file upload only not working. I think, it requires any body contains headers, encoders etc with the file to be uploaded. Do you know that, anything is needed like that? @biscuitmanz