Topic: File Upload Plugin Issue
Expected behavior
I have bought material file upload -drag and drop plugin.I have attached both the css and js file in my projectlike this:
<link href="/customer/assets/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/customer/assets/fontawesome/js/all.min.js"></script>
<link rel="stylesheet" type="text/css" href="/customer/assets/fontawesome/css/all.css">
<link rel="stylesheet" type="text/css" href="/customer/assets/datatables/datatables.css"/>
<link href="/customer/assets/css/mdb.min.css" rel="stylesheet">
<script type="text/javascript" src="/customer/assets/sweetalert2/sweetalert2.all.js"></script>
<script type="text/javascript" src="/customer/assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/customer/assets/js/bootstrap-notify.js"></script>
<link rel="stylesheet" type="text/css" href="/customer/assets/sweetalert2/sweetalert2.css">
<script src="/customer/assets/plugins/ckeditor/ckeditor.js"></script>
<link href="/customer/assets/css/style.css" rel="stylesheet">
<link href="/customer/assets/dropzone/dropzone.css" rel="stylesheet">
<script src="/customer/assets/dropzone/dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="/customer/assets/css/mdb-file-upload.min.css">
<script type="text/javascript" src="/customer/assets/js/mdb-file-upload.min.js"></script>
However when I do not get the desired results. Below is my code :
<div class="file-upload-wrapper">
<input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
</div>
<script type="text/javascript">
$('.file_upload').file_upload();
</script>
*Actual behavior*How ever I see the following screen :
I am not sure what I am doing wrong.
Resources (screenshots, code snippets etc.)
<div class="file-upload-wrapper">
<input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
</div>
<script type="text/javascript">
$('.file_upload').file_upload();
</script>
Hi there,
It's because you have added .file-upload class to the input and then you initialized it using file_upload jQuery class selector - just make sure these two classes are consistent with each other and then everything should work fine :)
Best, Ania
BizRTC pro commented 6 years ago
Ever after changing it to this :
$('.file_upload').file_upload();
<div class="file_upload-wrapper">
<input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
</div>
it does not work, and FYI i had took this snippet from this tutorial page : https://mdbootstrap.com/plugins/jquery/file-upload/
Ok, thank you for letting us know - I will fix this in the documentation. In your case - the code should be written like this:
<div class="file-upload-wrapper">
<input type="file" id="input-file-max-fs" class="file_upload" data-max-file-size="2M" />
</div>
<script type="text/javascript">
$('.file_upload').file_upload();
</script>
jallenmorris pro premium priority commented 5 years ago
This is exactly the same as he has written above. I'm using it and it's not working for me either. There is LITTLE documentation on how to make this thing work. Great tools, but I'm not impressed with the documentation. I spent a lot of money on MDBootstrap and am rather shocked by the lack of documentation.
I've created a snippet which seems to work fine - it would be great help, @jallenmorris if you would be able to provide additional information such as browser you're using, plugin version and code snippet. You can also test the code I was using and see if it works for you (file should be in the same directory as css font html img js scc folders):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design Bootstrap - File Uplad Plugin</title>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet" />
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/addons/mdb-file-upload.css" />
</head>
<body>
<div class="file-upload-wrapper">
<div class="input-group mb-3">
<input type="file" id="input-file-now" class="file_upload" />
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="js/addons/datatables.min.js"></script>
<script
type="text/javascript"
src="js/addons/mdb-file-upload.min.js"
></script>
<script>
$(".file_upload").file_upload();
</script>
</body>
</html>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.5
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No