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?
Related
I am very new to working with file concepts in java and i have a files in my folder and when i click on the file link in my page it shows action not found error page.How to solve it?Do i need to set any configurations in play?Please help me and for all help thanks in advance.
This is my link:
<td>#hoForm.fileName</td>
And my js code is:
function OpenFancyBoxForHeadOfficeFormsView(hoFormId){
$(".fancyboxPDF").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
width:1200,
height:1000,
autoSize: true,
type: 'iframe',
loop : false,
helpers : {
overlay : {closeClick: false}, // disables close when outside clcik
},
iframe: {
preload: false // fixes issue with iframe and IE
}
});
}
Files are showing correctly without any error in production server.But in my local system getting error page with action not found.
I got answer after doing some changes.in play it shows action not found error page.what i did is i generate war file and run it in tomcat.it works perfectly.I think i missed some path to give in play and that is the reason it shows error while run in polay framework.
You forget to route the URL to your function.
You must have in conf/routes file:
GET /INVOICEPROCESSINGSYSTEM/ YourControllerClass.OpenFancyBoxForHeadOfficeFormsView(hoFormId: String)
Documentation: https://www.playframework.com/documentation/2.5.x/JavaRouting
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 );
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 am using the tinyMCE library for my textareas but also for image uploads, however when have both of them on one page it doesn't work. It is fine when it is one of them alone but as soon as I put a tinyMCE textarea on a page and a button that launches the imagemanager dialog, the dialog loads up but the spinning loading icon just keeps going instead of loading the files from my rootpath.
In the head of my document i have:
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor",
editor_deselector : "mceNoEditor",
plugins : "style,advlink,inlinepopups,preview,contextmenu,paste,directionality,fullscreen,noneditable,imagemanager,media",
// Theme options
theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,code,|,fullscreen",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false,
media_strict: false
});
Which is great for my textareas, then with jQuery on document.ready() I have the following for the uploads:
$('.add_image_button').click(function(){
mcImageManager.open(''{
rootpath : '{0}/',
oninsert:function(o){
var location = o.focusedFile.path;
location = location.substr(4);
location = '_uploads/'+location;
var preview_image = '../' + location;
$('#selected_image > img').attr('src', preview_image);
$('#image_path').val(location);
}
});
return false;
});
If I have an MCE textarea on the page and press my upload image button I get the following javascript errors:
Uncaught TypeError: Cannot set property 'innerHTML' of null - editor_plugin.js:1
Uncaught TypeError: Cannot call method 'getArgs' of undefined - index.php:1
I have tried the tinyMCE.init() after DOM ready, but no joy.
It feels like there might be some kind of path configuration conflict like the imagemanager.
Does anybody know if there is a way of looking if the rootpath is getting screwed somehow on the imagemanager?
Cheers
If anybody comes across this... I fixed it by removing inlinepopups from the plugins list.
I have the following jQuery call that correctly creates and loads a DataTable on my page. This only works, however, when this script is part of the HTML file because my sAjaxSource URL is composed using a template substitution value: ${company.name}.
When I move this code to a separate .js file it still runs and creates the DataTable. Since the template substitution never runs on the include .js file, however, the sAjaxSource is not set and the table doesn't load properly.
What is the proper way of handling this? Do I have to include at least this javascript function in the HTML file itself?
function() {
$('#fund-contacts-table').dataTable( {bFilter: false,
bInfo: false,
bJQueryUI: true,
bPaginate: false,
bStateSave: false,
bSort: false,
bAutoWidth: false,
aoColumns: [ {"sTitle" : "Date", "sWidth" : "20%"}, {"sTitle" : "Our Team", "sWidth" : "20%"}, {"sTitle" : "Client Team", "sWidth" : "20%"}, {"sTitle" : "Note", "sWidth" : "40%"} ],
sAjaxSource: "/contact/${company.name}/"} );
});
I am imagining that the template substitution is done at the time of the HTML page being rendered. As long as you set this as a variable during the template rendering phase, you should be able to pass it into your DataTables initialization.
Before your external .js is loaded,
<script>
var contactSource = "/contact/${company.name}/";
</script>
And then in your initialization in your external js:
sAjaxSource: contactSource;
My best answer so far (but I'll leave the question open to see if someone can really solve it):
Instead of including my script file using <script src=. . . /> in my HTML, I'm including it this way:
<script>
<%include file="../js/fund_page.js" />
</script>
where %include is a Mako directive that reads the specified file, performs template processing on it, and includes it in the HTML file. It appears to be intended for HTML fragments, but works here too.
Unfortunately, that means that I'll lose the optimization to not download the script file if it hasn't changed. On the other hand, the reason this is an issue is that the script file does change from page to page, so that may not be a major loss.