Cameron Posted October 13, 2015 Report Share Posted October 13, 2015 Hi everyone, I have a Submission form with the field with the "File" DataType. When I upload a file, I can see only the name of the file. Is it possible to preview an image before uploading? I believe, it is possible in Caspio but I cannot find the script in the forum. Thank you for your time! Quote Link to comment Share on other sites More sharing options...
Xiang Posted October 13, 2015 Report Share Posted October 13, 2015 Hi Cameron, How are you? I think, you can add a Header and Footer element, select the Footer element, click the Source button or disable the HTML Editor, and enter the following code: <script> document.getElementById("InsertRecordFIELDNAME").setAttribute("onchange","loadFile(event)"); var loadFile = function(event) { var output = document.getElementById('output'); output.src = URL.createObjectURL(event.target.files[0]); }; </script> Enter the name of your field instead of "FIELDNAME". And add an HTML Block, click the Source button or disable the HTML Editor, and enter the following code: <img id="output"/> Then the image will be displayed in full size. If you want to display with the fixed size, add width and height, for example: <img id="output" width="200px" height="100px" /> But in this case, all images will be displayed with these parameters. Sometimes it is horrible I'll be grateful, if you tell me if the code works.Have a nice day! And thank you to Nkron Quote Link to comment Share on other sites More sharing options...
MayMusic Posted October 13, 2015 Report Share Posted October 13, 2015 add a HTML Block wight below your file field and use the code below: <img id="blah" src="#" alt="your image" /> <script> $('#InsertRecordphoto').change(function(e){ var field = e.currentTarget; readURL(field); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result) .width(150) .height(200); }; reader.readAsDataURL(input.files[0]); } } </script> Replace "InsertRecordphoto" with the file field actual ID. Add the following line to header of your web page source: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <meta charset=utf-8 /> alexm72 1 Quote Link to comment Share on other sites More sharing options...
MayMusic Posted October 13, 2015 Report Share Posted October 13, 2015 Here is the link to functional page http://someapp.com/nk/img.html Quote Link to comment Share on other sites More sharing options...
hsilvermanmdjd Posted October 20, 2015 Report Share Posted October 20, 2015 Here is the link to functional page http://someapp.com/nk/img.html MayMusic...I cannot get your script to work in an Update form. Works great in a Submission form. Any thoughts? Quote Link to comment Share on other sites More sharing options...
Xiang Posted October 27, 2015 Report Share Posted October 27, 2015 Hi hsilvermanmdjd, How are you? How's the weather in your city? I'm sorry that I answer instead of MayMusic, but - you can change the "InsertRecordFIELDNAME" to "EditRecordFIELDNAME", then the script will work on the Details page too. Quote Link to comment Share on other sites More sharing options...
MayMusic Posted November 12, 2015 Report Share Posted November 12, 2015 To make the code work for update form change "InsertRecordphoto" to "EditRecordphoto" Quote Link to comment Share on other sites More sharing options...
mark048 Posted February 9, 2017 Report Share Posted February 9, 2017 Well I was able to add a header and footer plug-in on my WordPress site. But its not working. The only line in this code that needs to be changed is the file name after insert record, correct? My data page is a submission page and I have it as insert record. Thanks, Mark Quote Link to comment Share on other sites More sharing options...
alexm72 Posted August 23, 2017 Report Share Posted August 23, 2017 Wow May Music...this worked ! I have been looking for this code FOREVER so that people can see their photo, even asking my friend who claims to know computers but told me he needed to know the language of the Caspio interface or whatever ..and I said no I'm sure its a basic Java Do you know what code I can use to compress the photo in the file field so that it uploads faster. I know Caspio has image resizer but if it resizes the image to 100px wide, the original can still be a huge file. Quote Link to comment Share on other sites More sharing options...
Alwayslost Posted October 16, 2017 Report Share Posted October 16, 2017 Hi MayMusic... Your code on an "edit" page under "details" datapage is acting a bit weird. 1. It doesn't show the image when uploaded 2. when you actual update and refresh form, it shows TWO images. ??? One for the size in the script and not sure where the there one is even coming from. The code I am using is this: Header: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <meta charset=utf-8 /> HTML Block, NOT checked "enable HTML editor and it is under the "file_image" field <img id="file_image" src="[@field:file_image/]" alt="" /> <script> $('EditRecordfile_image').change(function(e){ var field = e.currentTarget; readURL(file_image); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('file_image') .attr('src', e.target.result) .width(80) .height(80); }; reader.readAsDataURL(input.files[0]); } } </script> File image attached on how it shows. Also, do i get a email when you respond or how do I check to see if there was a respond. My email address is: ramin_nsm@yahoo.com Thanks in advance, of course! -Ramin Quote Link to comment Share on other sites More sharing options...
Alwayslost Posted October 16, 2017 Report Share Posted October 16, 2017 Hello again: Following the last reply: I did change the dimensions a bit... I understand why it shows 2 images, I think. One is what the script is showing (sizes) and one is the actual image. Am I right ? But, I just want it to show as they are loading it. Thanks in advance. (attachment) Quote Link to comment Share on other sites More sharing options...
Adriana Posted August 21, 2020 Report Share Posted August 21, 2020 Hi, I've tried this code but the image appear blurry, i've change the width and height but it doesnt change anything Quote Link to comment Share on other sites More sharing options...
Kurumi Posted November 2, 2021 Report Share Posted November 2, 2021 Hi! Just an update on this, Caspio has a new Tech Tip called: Preview an Image before It is Uploaded in a DataPage. You may visit it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/preview-an-image-before-it-is-uploaded-in-a-datapage/ Hope it helps! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.