How to upload an image file to zoho creator from javascript

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

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

i dont know anything about php as iv never used it.
so from what iv read it requires 7 parameters to upload a file and one says the file has to be sent with content type as multipart/form-data, have you made sure all the parameters are correct…

and this is what there sample request looks like.

<form action = "https://creator.zoho.com/api/xml/fileupload/scope=creatorapi&authtoken=**************" method="post" enctype="multipart/form-data">						
	<input type="text" name="applinkname" value="sample">
	<input type="text" name="formname" value="Employee">
	<input type="text" name="fieldname" value="File_upload">
	
	<input type="text" name="recordId" value="1235667754455">
	<input type="text" name="filename" value="profile.jpg" >
	<input type="file" name="file">
	<input type="submit" value="Update">
</form>

i haven’t seen your code so i dont know if your doing it like this or not this is just the recommended way, and i dont know what you mean by encoders?