I am using jQuery Form Plugin to upload my files via AJAX and I also want to check if size is more than 20mb on every file before I send them to server. I've discovered this HTML5 example, but I can't figure out how to put it together with my code here.
$(document).ready(function(){
$('.form-videos').ajaxForm({
success : function(data){
alert(data);
},
beforeSubmit : function(){
var fileInput = $('.form-videos :input[type=file]');
var totalFiles = $('.form-videos :input[type=file]').get(0).files.length;
for (i = 0; i < totalFiles; i++)
{
alert('what?'); // This works and prints out correctly for every file
// How do I get current file size?
}
}
});
});
You should be able to;
var files = $('.form-videos :input[type=file]').get(0).files;
for (i = 0; i < files.length; i++)
{
if (files[i].size > 20971520) ...
}
See an example here.
In your example, length is simply the number of selected files. You need to access the individual File objects and their size property.
Related
im trying to download a file that constructs itself based on the value it recives. This is my code
<html>
<head>
<script>
var myList=[];
window.onmessage = function(event){
if (event.data) {
myList = event.data;
if (myList.length>0) {
buildHtmlTable();
}
}
else {
myList = [];
}
};
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
return exportF(); // Make Excel file download now
}
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash =`enter code here` myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
function exportF() {
var table = document.getElementById("excelDataTable");
var html = table.outerHTML;
var url = 'data:application/vnd.ms-excel,' + escape(html);
var link = document.getElementById("downloadLink");
link.setAttribute("href", url);
link.setAttribute("download", "export.xls"); // Choose the file name here
link.click(); // Download your excel file
return false;
}
</script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="">
<table id="excelDataTable" border="1">
</table>
<a style="display: none" id="downloadLink"></a>
</body>
</html>
The code itself works, but the error i get is "Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See https://www.chromestatus.com/feature/5706745674465280 for more details."
What can i do to work around this? It feels like ive tried everything i can get my hands on but nothing seems to work for it to download
As the warning message says, you can't initialize downloads from a sandboxed iframe if it doesn't have the allow-downloads permission.
All solutions will imply having access to the page where the iframe is displayed (hereafter "the embedder").
The easiest and recommended way,
is to ask the embedder to add this permission when they define their iframe:
<iframe src="yourpage.html" sandbox="allow-scripts allow-downloads"></iframe>
An other way would be to ask them to not sandbox that iframe at all,
<iframe src="yourpage.html"></iframe>
but I guess that if they did, it's because they don't trust your page enough.
Finally a more complex way would be to pass the generated file back to the parent window.
For this you'd need to define a new API with your clients.
You could obviously just emit a global message event back to them, but I guess the cleanest is to make them pass a MessageChannel's MessagePort along with the myList data, so they can wait for the response there easily and be sure they'll only catch the response and no other unrelated message.
So in the embedder page they'd do
frame.onload = (evt) => {
const channel = new MessageChannel();
// handle the response from the iframe
channel.port2.onmessage = (evt) => {
const file = evt.data;
saveAs( file, "file.html" ); // the embedder is reponsible to initialize the download
};
frame.contentWindow.postMessage( embedders_data, [ channel.port1 ] );
};
And in your page you'd do
window.onmessage = (evt) => {
const myList = evt.data;
// get the MessageChannel's port out of the transfer-list
const port = evt.ports[ 0 ];
// buildHtmlTable has to return the final file, not to make it download
const file = buildHtmlTable( myList );
if( port ) {
port.postMessage( file ); // send back to embedder
}
};
See it as a live plnkr.
Ps: note that your files are not xlsx files but HTML markup.
The correct answer
Under normal circumstances Kaiido's answer is indeed the correct solution to your problem. They will NOT work in your case though.
The answer that will work on WixSince you are using Wix there is no way for you to directly edit the Sandbox attribute of the iframe element. This is just how Wix does things. You can, however, use custom code (only applies to premium websites) to get the class name of the iframe and programatically use javascript to set the new attribute to the existing iframe.
You must use the web inspector to find out the class name (iframes in Wix do not have ids) then add "allow-downloads" to the sandbox attribute. You might then need to reload the iframe using js as well. Go to your website's settings -> Custom Code -> Create custom code at the end of the body tag
If you do not have a premium website then you unfortunately cannot do this. This is due to Wix's own limitations as a platform. If this is an absolute "must" for you project, I recommend you to not use Wix since they limit your freedom as a developer when it comes to working with
technologies that were not made by them. Not to mention that they lock features such as custom elements behind a pay wall. So we can't even test our ideas before committing to a hosting plan. For anyone reading this in the future, take this into consideration and look into other platforms.
Thanks for answers, i didnt find a sollution with the recomended answers. What i did is that i made a completely new page, instead of initializing a html iframe i redirected the current window to the new page i created. The new page took a variable from "www.page.com/?page={value} and downloaded what i needed from there instead. Its messy but it works so if anyone else has this problem i recomend this if you are using wix.
I've read similar questions and tried several suggestions nothing had worked - hope you can help
Scenario:
loading my website with initial (static) index.html -- looks great css takes fine
clicking on "next page" button --> retrieves successfully the data from DB and dynamically generates the element's innerHTML section.
Problem: the audio player is the only element which doesn't look the same
Initial state: when loading the site first time
and how it looks after generating the HTML
All other tags like header image and text do apply the css rules.
The audio player has rules in the css file and has also the following script at the end of index.html and I'm suspecting thats the root of my problem not being "fired/called" again for the new generated elements
<script>
document.addEventListener('DOMContentLoaded', function() {
var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;
for (var i = 0; i < total; i++) {
new MediaElementPlayer(mediaElements[i], {
pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement#4.2.7/build/',
shimScriptAccess: 'always',
success: function () {
var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
for (var j = 0; j < targetTotal; j++) {
target[j].style.visibility = 'visible';
}
}
});
}
});
</script>
If that's the reason how can I invoke this event on demand and how can I do it from the javascript file?
I'm using one input in html to select and upload image one by one or multiple.
I want to show preview before upload image and I'm using js FileReader. It's working for one image but not working for multiple images.
$('#fileToUpload').change(function(){
var file = this.files;
filepreview(file);
});
function filepreview(files)
{
var length = files.length;
for(var i=0 ; i<length ; i++)
{
var file = files[i];
var reader = new FileReader();
reader.addEventListener("load",function(e){
$('#pic'+i+'').attr('src' , ''+e.target.result+'');
});
reader.readAsDataURL(file);
}
}
Its basically that i is always length, as the events occur after the loop iterated:
reader.addEventListener("load",function(e){//async stuff
$('#pic'+i+'').attr('src' , ''+e.target.result+'');//i = length
});
So you may want to bind i:
reader.addEventListener("load",function(i,e){//take over the bound i
$('#pic'+i+'').attr('src' , ''+e.target.result+'');
}.bind(this,i));//the magic part
I'm trying to determine if a specific .xml file exists on my desktop before running additional code. The following trusted script is in my Javascripts folder-level directory. The section commented as "First Part" below simply sets all fields of the form to be open/writable. The second part looks for a .xml file in which to import XFA data from.
My problem is that I'm trying to determine whether this .xml file exists in the first place. Right now if it doesn't exist, it displays a dialog window to browse for the file. Instead I'd like it to show an alert if the xml file does not exist, and never show the dialog at all. What am I doing wrong?
Any help is huge, thanks
CODE:
var myTrustFunctTwo = app.trustedFunction(function(doc)
{
//First Part
for (var nPageCount = 0; nPageCount < doc.numPages; nPageCount++) {
var oFields = doc.xfa.layout.pageContent(nPageCount, "field");
//app.alert(oFields,0);
var nNodesLength = oFields.length;
// Set the field property.
for (var nNodeCount = 0; nNodeCount < nNodesLength; nNodeCount++) {
oFields.item(nNodeCount).access = "open";
}
}
//Second Part
app.beginPriv();
doc.importXFAData({
cPath:"/c/Users/ME/Desktop/Filled_In.xml"
});
app.endPriv();
});
app.trustedFunction(myTrustFunctTwo);
UPDATE CODE INCLUDING TRY/CATCH BLOCKS
var myTrustFunctTwo = app.trustedFunction(function(doc) {
for (var nPageCount = 0; nPageCount < doc.numPages; nPageCount++) {
var oFields = doc.xfa.layout.pageContent(nPageCount, "field");
//app.alert(oFields,0);
var nNodesLength = oFields.length;
// Set the field property.
for (var nNodeCount = 0; nNodeCount < nNodesLength; nNodeCount++) {
oFields.item(nNodeCount).access = "open";
}
}
try {
app.beginPriv();
doc.importXFAData({
cPath: "/c/Users/ME/Desktop/Filled_In.xml"
});
app.endPriv();
} catch (e) {
app.alert("No File Found", 1);
}
});
app.trustedFunction(myTrustFunctTwo);
If the file you try to import does not exist, you will get an error message. Using try…catch, you can catch that message and exit the function, thus prevent the subsequent code from running.
I'm writing a small progam wherein I'm getting data using $.get then display the data so far so good and then there's this part then when I click a certain link it refresh the page but it has this blinking effect. Is there a way on how to reload the content get the new updated content then replace the previously loaded data.
NOTE: I didn't use setInterval or setTimeout function because it slows down the process of my website. any answer that does not include those functions are really appreciated.
Here's the code
function EmployeeIssues(){
$('#initial_left').css({'display' : 'none'});
var table = $('#table_er');
$.get('admin/emp_with_issues', function(result){
var record = $.parseJSON(result);
var data = record.data,
employees = data.employees,
pages = data.pages;
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
}else{
$('#er_tab_label').html('<b>No employees with issues yet.</b>');
}
});
table.html('');
}
then this part calls the function and display another updated content
$('#refresh_btn').on('click', function(e){
e.preventDefault();
var tab = $('#tab').val();
if(tab == 'er'){
EmployeeIssues();
}
});
What should I do to display the content without any blinking effect?
thanks :-)
This section might be the issue :
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
} else ...
It seems you're asking table_er to fade in once per run of the loop whereas s there can only be one such table, you only need to do it once ?
first try re-arringing it like this:
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
table.append(write_link(employees[i])); // function that displays the data
}
$('#table_er').fadeIn('slow'); // only do this after the table has all its html
if(pages){
$('#pagination').html(pages);
}
} else ....
Another possibility is that you're running through a loop and asking jquery to do stuff while the loop is running. It might be better to work out the whole HTML for the new page data in a string and then get the screen to render it in one line. I cna't do this for you as I don't know what's in write_link etc but something like this ..
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
var sHTML ="";
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
sHTML+=write_link(employees[i]); // maybe this is right ? if write_link returns an HTML string ?
}
table.append(sHTML); // add the HTML from the string in one go - stops the page rendering while the code is running
$('#table_er').fadeIn('slow'); // now show the table.
if(pages){
$('#pagination').html(pages);
}
} else ...