How to upload an image file to zoho creator from javascript

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

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

there is usually functions to call after your request like in ajax you have ajaxComplete() or in axios you have then() or finally() im not sure what this would be in php as iv never used it before you will have to show me some of your code.
also there is setTimeout in javascript the way to use the is…

setTimeout(() => {
   //code goes here
}, 300) // this number is the milliseconds to wait
```