Hi all,
I am trying to get the temporary location of a file that is being placed in a file upload field on a new page. The idea is the user would select the file they want for that record. I then want to get the location of the file, so I can display the PDF within an iframe on that same new page. This would allow my users to see information in the file on screen that will help them fill out the rest of the values in the record.
This is easy enough on a view or edit page once the record has been saved, but I haven't attempted it before create.
Has anyone done this before?
Thanks,
Jason
Hi Jason,
Using rollbase fileupload field I am unable to retrieve temporary location of the file. However I have written javascript to achieve. The following code may help you.
Upon selecting a specific file( I have tested for image,pdf ,xls, and text) The contents get displayed in IFRAME as a preview.
<html>
<head>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("myFrame").src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
$("#myFrame").show();
}
}
</script>
</head>
<body>
<input type='file' id="inputFile" onchange="readURL(this)"/>
<IFRAME SRC="#" ID="myFrame" style='display:none'> </IFRAME>
</body>
</html>
Regards,
Shiva
Thanks Shiva, that looks great. i'll work on trying to get that into my app. I appreciate the help.
We were able to get this working on our end using the Rollbase File Upload field.
There is some additional code in here to get the sections to rearrange to present a better view for the user, but you can see what we tweaked to make it work.
<!--<input type='file' id="inputFile" onchange="readURL(this)"/> -->
<iframe id="invoiceFrame" src="{!Invoice_File#url}" width="100%" height="1000" style="width:100%; height:1000px;"></iframe>
<script>
$(function() {
c__twoSectionDisplay("Invoice Information", "Invoice File");
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("invoiceFrame").src = e.target.result;
rbf_setFieldValue("Invoice_File_Binary", reader.readAsBinaryString(e.target.result));
}
reader.readAsDataURL(input.files[0]);
$("#invoiceFrame").show();
}
}
function c__twoSectionDisplay(first,second) {
//Reusable function to make sections display side by side
var firstSection = $("[name='"+first+"']").first(), secondSection = $("[name='"+second+"']").first(), //get the sections
seperator = $( secondSection.prev() ).css('clear','both'); //get the seperator in between the two elements
firstSection.before(seperator); //Prepend the middle seperator to the first section to create a break in the layout before the first section
if (seperator.prev().length == 0) seperator.height(0).css('height','0px'); //Check if the seperator is the first element, if it is, set height to 0 to hide it
secondSection.next().css('clear','both'); //Make the next seperator element create a break for the prev and succeeding elements with clear
firstSection.attr('class','rbs-section col-xs-12 col-sm-12 col-md-6 col-lg-6') //Apply bootstrap 2 column for large display and 1 column for small and xs display
.css('z-index',10); //Add z-index for display stack
secondSection.attr('class','rbs-section col-xs-12 col-sm-12 col-md-6 col-lg-6') //for both sections so that they are side by side
.css('z-index',10); //Add z-index for display stack
}
</script>
Thanks again for your help. This is great for our users.
It looks fab Jason :)