I am trying to implement Dropzone.js into a custom CMS. I have no problems processing the files as needed in PHP, that's actually the easy part.
I need to know how to do the following on a page-by-page basis (will use the dropzone script in several pages for different functions):
Restrict the files types (jpg,jpeg,pdf)
Restrict the number of files that can be uploaded (some pages will
just be one file, some will be up to 100)
Restrict the Max File Size
Redirect the page or have a 'next' button/link appear when the file
upload is complete.
Can I add this at the bottom of the page, while addressing the settings:
<script src="../assets/global/plugins/dropzone/dropzone.js"></script>
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
Demo.init(); // init demo features
FormDropzone.init();
});
</script>
HTML:
<div id="my-dropzone"></div>
JavaScript:
var initDropzone = function( filesAllowed ){
Dropzone.options.myDropzone = {
paramName: "file",
uploadMultiple: true,
maxFiles: filesAllowed, //this will need to be set upon init,
acceptedFiles: ['image/jpeg', 'image/jpg', 'application/pdf'],
complete: function() {
alert('Your file was successfully uploaded!');
}
};
}
//init the dropzone
initDropzone( 4 );
Related
my javascript code doesnt work internal (it works external) what is the problem
i tried external and it worked well but when i add js file to statics in django i can load css with {% load static%} well but my js file doesnt work .
function animatethis(targetElement, speed) {
var scrollWidth = $(targetElement).get(0).scrollWidth;
var clientWidth = $(targetElement).get(0).clientWidth;
$(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
{
duration: speed,
complete: function () {
targetElement.animate({ scrollLeft: 0 },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#scroll-div'), 22000);
and this is my HTML page :
when i run my server i can see my js file is loaded
[
i think my problem is is in my js code or some import probs.
If I'm understanding your problem correctly, you placed your js code in an external file and now it's not running on the page. This is likely because you haven't imported the javascript file to load it on the page in a script tag. So inside your javascript block or even inside a content block, you need something like:
<script src="{% static 'js/folder/file.js' %}"></script>
where js is the name of the folder inside of your static folder that stores your javascript, folder is a folder (if you have one) that further organizes your code and might be multiple paths deep if you have many nested folders, and of course file.js is the name of your file. If you just have a js folder and no subfolders, the path would be js/file.js.
i found soloution ,my problem was in priority of jquery before my file script.
Working on a form that will allow users to drop files in for my new help desk ticket module. The problem I'm having is that when I submit the form, the text area field (which is using the html editor CKEDITOR) is coming up empty in the database. I've tried several different options to get the data from CKEDITOR but none of them have worked with dropzone. Hoping maybe somebody knows how to get around this, if not I might just have to look at another option for a drag and drop uploader.
This is the code in question that I've been having problems with.
formData.append("description", jQuery("textarea#description").val());
I've also tried
var html = CKEDITOR.instances.description.getData();
Dropzone.options.myDropzone= {
url: 'upload.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
addRemoveLinks: true,
init: function() {
dzClosure = this;
document.getElementById("submit-all").addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("department", jQuery("#department").val());
formData.append("category", jQuery("#category").val());
formData.append("subject", jQuery("#subject").val());
formData.append("description", jQuery("textarea#description").val());
});
}
}
Thanks in advance!
I had the same issue and it seems like dropzone sends text attribute while ckeditor changes value. Try this before processing queue, it works for me:
$("textarea#description").text($("textarea#description").val());
Use CKEDITOR.instances['description'].getData(), you will get ckeditor's data. ['description'] is the ID which is used for calling ckeditor. I have faced same problem & have solved it using it.
I have an odd problem, I want to upload files with plupload.ui to my server.
So my init script is like example on plupload site:
$(document).ready(function(){
var url = adminUrl +'/data/upload-users/';
var upload = $("#uploader").plupload({
// General settings
runtimes : 'html5,html4',
url : url,
// Maximum file size
max_file_size : '2mb',
chunk_size: '1mb',
// Resize images on clientside if we can
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip,avi"}
],
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
// Views to activate
views: {
list: true,
thumbs: false, // Show thumbs
active: 'list'
}
});
});
And I have include all files:
<script src="/js/plupload/plupload.full.min.js" type="text/javascript"></script>
<script src="/js/plupload/jquery.ui.plupload/jquery.ui.plupload.js" type="text/javascript"></script>
But when I click on the Start Upload button nothing happens, not even an error is fired. In firebug the html line where this button is located is hightlined so I think "click" is working fine.
Form for uploading is generated, even drag&drop is working (thumbnail is generated, shown filed size after drop etc);
I also tried setting uploader to variable and manually binding event to button:
var uploader = $('#uploader').pluplad({...});
$('body').on('click','#upload_start',function(e){
uploader.start();
});
But nothing happened. Any suggestions why this is happening, anybody else had same problem?
I am implementing the Blueimp jQuery File Uploader https://github.com/blueimp/jQuery-File-Upload and I'm wanting to change the previewMaxWidth and previewMaxHeight after the first image is added. This is because I have a product feature image and then subsequent views of the product, each of which should display smaller than the feature image.
Here is my file upload call:
$('.imageupload').fileupload({
autoUpload : true,
acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i,
previewMaxWidth : 198,
previewMaxHeight : 800,
uploadTemplateId : 'product-add-image-upload',
downloadTemplateId : 'product-add-image-download'
}).bind('fileuploadadded', function(e, data) {
// change preview width/height to 60px/60px after first image loaded
// not sure what to put here
});
There is present option param that allows to change options after widget is initialized.
According to your code:
...
}).bind('fileuploadadded', function(e, data) {
$('.imageupload').fileupload(
'option',
{
previewMaxWidth: 60,
previewMaxHeight: 60
}
);
});
More info about changing options see at official API page (section Options).
I'm using blueimp JQuery file upload script to fancy the uploading of files. You can download it here: https://github.com/blueimp/jQuery-File-Upload/zipball/master (ZIP).
Here is a snippet of the JavaScript code:
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Dirs
url: 'accesspoint/upload.php',
uploadDir: 'accesspoint/files/',
thumbnailsDir: '',
// Options
autoUpload: 1,
maxNumberOfFiles: 1,
limitConcurrentUploads: 1,
maxFileSize: 1000000,
});
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function (files) {
var fu = $('#fileupload').data('fileupload');
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function () {
// Fix for IE7 and lower:
$(this).show();
});
});
// Open download dialogs via iframes,
// to prevent aborting current uploads:
$('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
e.preventDefault();
$('<iframe style="display:none;"></iframe>')
.prop('src', this.href)
.appendTo('body');
});
});
Now take a look at http://www.mcemperor.nl/test/appstest/blueimpjqueryfileupload/example/. We can upload a file, and it works.
Now if I upload a file which is larger than the maximum file size defined in the JavaScript snippet above, then you'll see something like this.
Perfect, works as expected. (Note that I have set the maximum upload size to 1000000 bytes, so if you upload a file of 1 MB, it states the file is too big.)
But... Now when I paste the same script (with some small modifications) as a module into a framework of some kind, the script won't work properly; I get this:
As you can see, The 'delete entry' icon is smaller (it's supposed to be square) and nothing happens when I click on it.
I do not have any clue what can be the problem. Does anyone have ideas?
Can using this script inside another <form> be the problem?
Can multiple elements with the same id be the problem?
Can collisions between javascripts (e.g. redefining functions or objects) be the problem?
I am not sure how to fix the scripts, but maybe a workaround would be to locate the element using FireBug and patch it with a css entry or a jquery function. Also, you might take a look at jquery.fileupload-ui.css which is the css file responsible for overriding jqueryUI elements for the control. I do know that the buttons are styleable independently. Again, I am not for certain, but there may be a class added via script to change the icon on the delete button.