Hi!
Tell me how to add a limit on the total size of uploaded files in "SELECT MULTIPLE ITEMS" and a ban on certain types of files.
Also when using any form with reCAPTCHA v2 from google when you click on "send" without confirming reCAPTCHA v2 a red notification appears, when passing reCAPTCHA v2 and pressing "send" the same red notification appears, but at the same time the sending occurs.
contact-5-recaptcha.html
Guys?
Hello,
Apologies for the Delays in replying and Thanks for your Kind Patience!
You can consider using the input's accept Attribute to define accepted file extensions: https://www.w3schools.com/tags/att_input_accept.asp .
You can consider using the maxFileSize Setting: https://plugins.krajee.com/file-input/plugin-options#maxFileSize for the Uploads Component.
There appears to be some error with the reCaptcha core functions. We are looking into this and will provide you with with an update shortly. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Can you explain in more detail how to apply this feature and in which document I need to make changes?
I found this solution but it doesn't fit the new version of form.php
// Runs only when File Field is present in the Contact Form
if ( isset( $_FILES['template-contactform-file'] ) && $_FILES['template-contactform-file']['error'] == UPLOAD_ERR_OK ) {
$allowed_files = array('application/doc', 'application/pdf', 'another/type');
if( !in_array( $_FILES['template-contactform-file']['type'], $allowed_files ) ) {
echo '{ "alert": "error", "message": "File type not allowed! Please Try Again." }';
die;
}
if( $_FILES["template-contactform-file"]["size"] > 4000000 ) { // 4MB
echo '{ "alert": "error", "message": "File Size exceeds the Limit! Please Try Again." }';
die;
}
$mail->IsHTML(true);
$mail->AddAttachment( $_FILES['template-contactform-file']['tmp_name'], $_FILES['template-contactform-file']['name'] );
}Hello,
This JS Setting needs to be added at the bottom of the HTML File inside the File Uploads initialization Codes: $("#selector").fileinput.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hello,
With Bootstrap Uploads the PHP Solution is currently not supported and will require many Customizations. We will definitely try adding this feature in a future update and let you know once this is available.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
<script >
$(document).ready(function() {
$("input-3").fileinput({
maxFileSize: "24000KB",
msgSizeTooLarge: "File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>. Please retry your upload!"
});
});
</script>???
Yes, thats correct.
this code is not working
<script >
$(document).ready(function() {
$("input-3").fileinput({
maxFileSize: 24000,
msgSizeTooLarge: 'File "{name}" (<b>{customSize}</b>) exceeds maximum allowed upload size of <b>{customMaxSize}</b>. Please retry your upload!'
});
});
</script>On this form, this code does not work at all
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<!-- Bootstrap File Upload CSS -->
<link rel="stylesheet" href="css/components/bs-filestyle.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Bootstrap Uploads | Canvas</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container">
<h1>Bootstrap Uploads</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Shortcodes</a></li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap Uploads</li>
</ol>
</div>
</section><!-- #page-title end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div class="row gutter-40 col-mb-80">
<!-- Post Content
============================================= -->
<div class="postcontent col-lg-9">
<div class="row">
<div class="col-lg-12 bottommargin">
<label>Select Multiple Items:</label>
<input id="input-3" name="input2[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true" data-show-preview="true">
<div id="errorBlock" class="form-text"></div>
</div>
</div>
</div><!-- .postcontent end -->
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/plugins.min.js"></script>
<!-- Bootstrap File Upload Plugin -->
<script src="js/components/bs-filestyle.js"></script>
<!-- Footer Scripts
============================================= -->
<script src="js/functions.js"></script>
<script >
$(document).ready(function() {
$("input-3").fileinput({
showPreview: false,
maxFileSize: 24000,
msgSizeTooLarge: 'File "{name}" (<b>{customSize}</b>) exceeds maximum allowed upload size of <b>{customMaxSize}</b>. Please retry your upload!'
elErrorContainer: "#errorBlock"
});
});
</script>
</body>
</html>Even your code doesn't work on this form
<div id="errorBlock" class="form-text"></div> - Has been added to the form
$("#input-3").fileinput({
showPreview: false,
allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
elErrorContainer: "#errorBlock"
});<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<!-- Bootstrap File Upload CSS -->
<link rel="stylesheet" href="css/components/bs-filestyle.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Bootstrap Uploads | Canvas</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div class="row gutter-40 col-mb-80">
<!-- Post Content
============================================= -->
<div class="postcontent col-lg-9">
<div class="row">
<div class="col-lg-12 bottommargin">
<label>Change size of whole widget:</label>
<input id="input-6" name="input6[]" type="file" multiple class="file-loading" data-show-preview="false">
</div>
</div>
</div><!-- .postcontent end -->
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/plugins.min.js"></script>
<!-- Bootstrap File Upload Plugin -->
<script src="js/components/bs-filestyle.js"></script>
<!-- Footer Scripts
============================================= -->
<script src="js/functions.js"></script>
<script >
$(document).ready(function() {
$("#input-6").fileinput({
showUpload: false,
maxFileCount: 20,
maxFileSize: 24000,
msgSizeTooLarge: 'File "{name}" (<b>{customSize}</b>) exceeds maximum allowed upload size of <b>{customMaxSize}</b>. Please retry your upload!',
showCaption: true
});
});
</script>
</body>
</html>This code works.
But I can't seem to get this code to work. msgSizeTooLarge: 'File "{name}" (<b>{customSize}</b>) exceeds maximum allowed upload size of <b>{customMaxSize}</b>. Please retry your upload!'
Where can I edit this notice?
It's outrageous! The first time I contacted with your support and you did not help me at all!
I waited 3 days to get a response from you that does not work. I had to spend 4 hours to understand your code and solve the problem myself!
Were you too lazy to send me these lines of code?
$("#input-6").fileinput({
showUpload: false,
maxFileCount: 20,
maxFileSize: 24000,
msgSizeTooLarge: 'File "{name}" (<b>{customSize}</b>) exceeds maximum allowed upload size of <b>{customMaxSize}</b>. Please retry your upload!',
showCaption: true,
elErrorContainer: "#errorBlock"
});I'm shocked by your customer service.
Hello,
Apologies for the Inconveniences caused!
Our Standard Support Times are 1 Business Day. However, we did experience delays in replying to your Support Query but the response from our Support Team was within 2 Business Days (not 3 Days). We absolutely apologize for the 1 Day delay in replying, however this happens very very rarely. We will make sure that there are no further delays in the future.
The Codes provided to you were accurate based on your Initial support Query and does work conflict with the Default Functionalities. We do not include modified versions of the Plugin. The Use Case of your Support Query comes under specific customizations as these codes are not included with the Templates provided within the Package, and we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . While we are more than happy to help you with minor customizations as we always have in the past, Our Support Teams are present in different time zones and the turnaround times can be around 6-10 hours.
Let us know if we can help you with anything else or if you find any further issues.
I only needed 2 lines of code from you...
<script >
$(document).ready(function() {
$(“input-3”).fileinput({
maxFileSize: “24000KB”,
msgSizeTooLarge: “File “{name}” (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>. Please retry your upload!”
});
});
</script>To this incorrect piece of code, you answered that it is correct ...
For gmohdezb, you rewrote almost half of form.php
https://support.semicolonweb.com/forums/topic/contact-form-attachment-file-size/
I won't argue with you. But all this is sad.
We Understand and we are more than Happy to Help you. However, we request you to allow us to reply you within the Support Times.
Hello,
We have fixed the issue with the Contact Form reCaptcha showing wrong notifications. Please update the existing js/plugins.min.js File with the updated one attached to this reply.
This will definitely fix the issue. Hope this Helps!
Apologies for the Bug and Thanks for your Kind Patience!
Let us know if we can help you with anything else or if you find any further issues.
Yes! Everything works thank you very much!
Sorry! Give me a couple of minutes.
Hello,
Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this as we have tested this extensively before providing you with the updated file. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Everything works thank you very much!
Glad the issue was resolved.
Please let us know if we can help you with anything else.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard