Is It Possible To Preview An Image Before Uploading?

[Cameron]

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!

[Xiang]

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

[MayMusic]

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 />

[MayMusic]

Here is the link to functional page http://someapp.com/nk/img.html

[hsilvermanmdjd]

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?

[Xiang]

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.

[MayMusic]

To make the code work for update form change "InsertRecordphoto" to "EditRecordphoto"

[mark048]

 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 

[alexm72]

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.

[Alwayslost]

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

[Alwayslost]

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)

[Adriana]

Hi, I've tried this code but the image appear blurry, i've change the width and height but it doesnt change anything

 

 

[Kurumi]

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!