How to upload an image file to zoho creator from javascript

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

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?

Thank you so much @biscuitmanz. I have to add some header and create a body with it. Now I have finish that. Thank you for your support .

1 Like