Jump to content

Use js to put image path in Image field instead of using Browse on Submission form

Recommended Posts


I have a submission form with an image field. I need to be able to use js to bypass the user having to use the Browse button to pull the image path for the image to be submitted (so I can streamline a process of uploading images- I've got a field with the image path mapped to Downloads folder and have a Virtual field using it as a data source.  I just need to put that path in the image field so the user doesn't have to Browse to it).  

I set up test code using a button to trigger the js function so I could see if it was putting the image path (Virtual 1) into the image field for submission (ItemPic). When I run the code using the button I get an error message on the submission form: "Values cannot be submitted due to a data restriction." Does anyone know how to bypass that restriction, in the function I have below?


<div style="text-align: center;">
<input class= "cb_custom_btn" type="button" onclick="myFunction()" value="Copy PicPath" />

function myFunction(){

var picpath = document.getElementById("cbParamVirtual1").value;

document.getElementById("InsertRecordItemPic").value = picpath;




Link to comment
Share on other sites

Hi @DesiLogi,

The error "Values cannot be submitted due to a data restriction" can be caused due to formula fields or triggers. Do you have those in your table? If you do, check those first. Disable trigger temporarily and try. If there is formula field, verify if the formula used is correct. Other way to confirm if JS is causing this error is by removing the code from the DataPage and test it. Before that make sure to save it on notepad or some place. If you still get the error, then it means that there is something else that is causing the error.


Link to comment
Share on other sites

Hi BaySunshine,

The error message is coming only from the js attempting to put a value in the field that is a 'File' type field. There is no formulas or triggers causing the issue. If I direct the js to put the value in a normal text field it works as it should. It's only when the js attempts to put a value into a 'File' type field that the error comes up. So I'm thinking Caspio must have some sort of security restriction set on a 'File' type field. I was hoping to be able to get around that somehow. Thanks for he input though. 

Link to comment
Share on other sites

Hi @DesiLogi,

I am 100% sure that you have also received an error in the browser Console  before form submit.


This error means that Value attribute can be set to an empty string only.

I believe this is a security restriction of the browser.

I can suggest storing a URL of the picture i.o. storing a file in the table.

Hope this helps.




Link to comment
Share on other sites

Hi Vitalikssss,

Thanks for that info- I'd thought it was something like that, I just couldn't figure out exactly what. The security issue is the block, I think, I need to figure out how to get around. I do use links to outside images in the app, but sometimes the images need to be uploaded to CB because they're used in many places and fairly often the public images out on the web (that my users link to) disappear if they're deleted by whomever. Uploading the image to CB ensures they'll be there indefinitely. 

That said, is there some way to store a file (image file) temporarily, like in a temp folder in the browser (?) and then use that path for the Browse File field's value? That would solve the problem but I don't know if it's doable. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...