Jump to content

Is It Possible To Preview An Image Before Uploading?


Recommended Posts

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!

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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 />
Link to comment
Share on other sites

  • 3 weeks later...
  • 1 year later...

 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 

Link to comment
Share on other sites

  • 6 months later...

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.

Link to comment
Share on other sites

  • 1 month later...

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

Capture.JPG

Link to comment
Share on other sites

  • 2 years later...

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.

Guest
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.

Loading...
 Share

×
×
  • Create New...