I'm trying to use plupload with mvc2 but the filebrowser-window does not open.
my code:
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").pluploadQueue({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: '<%: Url.Content( "~//Uploades/Horses/" ) %>',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
// Flash settings
flash_swf_url: '../../../../Scripts/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '../../../../Scripts/plupload/plupload.silverlight.xap'
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('UploadProgress', function () {
if (uploader.total.uploaded == uploader.files.length)
$('form').submit();
});
uploader.start();
} else
alert('You must at least upload one file.');
e.preventDefault();
}
});
});
<div id="uploader" style="height:300px">
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
If I try to debug the uploadingelemt is showen with out any problems. But If I click add files the window just jumps to the top of my page and nothin else happens.
Firebug does not show any problems.
I've tried in FF4 & IE 8 using flash and silverlight
Any one an idea?
Thank you very much and wish you a nice weekend!
Your browser will use Flash runtime as it is listed before the 'html5'. Flash runtime requires setting of 'container: "my_uploader_container_id"'
And your 'pickfiles' button need to be placed into the DIV with ID 'my_uploader_container_id'.
Another solution is using html5 engine - list it before flash in 'runtimes' parameter. But html5 runtime does not work in IE.
Related
We have been using Froala editor within Wagtail for years, and even though Draftail is nice, the end user wants to continue to use Frola, especially as a license fee has been paid for it, and it offers extra functionality that they use.
I have used the following which works great for any version of Wagtail prior to version 2.2:
https://github.com/jaydensmith/wagtailfroala/pull/5/commits/d64d00831375489cfacefa7af697a9e76fb7f175
However in Wagtail version 2.2 this has changed:
https://docs.wagtail.org/en/stable/releases/2.2.html#javascript-templates-in-modal-workflows-are-deprecated, this causes selecting images within Froala to no longer work correctly. You get to pick the image, but it fails to move onto the 2nd dialog to select alignment and then click insert.
It looks like wagtailfroala/static/froala/js/froala.js needs to be changed to add onload to the ModalWorkflow.
$.FE.RegisterCommand('insertImage', {
title: 'Insert Image',
undo: false,
focus: true,
refreshAfterCallback: false,
popup: true,
callback: function () {
var editor = this;
return ModalWorkflow({
url: window.chooserUrls.imageChooser + '?select_format=true',
responses: {
imageChosen: function(imageData) {
editor.edit.off();
var $img = $(imageData.html);
$img.on('load', function() {
_loadedCallback(editor, $(this));
});
// Make sure we have focus.
// Call the event.
editor.edit.on();
editor.events.focus(true);
editor.selection.restore();
editor.undo.saveStep();
// Insert marker and then replace it with the image.
if (editor.opts.imageSplitHTML) {
editor.markers.split();
} else {
editor.markers.insert();
}
var $marker = editor.$el.find('.fr-marker');
$marker.replaceWith($img);
editor.html.wrap();
editor.selection.clear();
editor.events.trigger('contentChanged');
editor.undo.saveStep();
editor.events.trigger('image.inserted', [$img]);
}
}
});
},
plugin: 'image'
});
But what needs to be added to make it work? I can't find any documentation or examples on how do to this? Please help or point me in the direction of the documentation for how this should be done.
Thank you so much in advance.
I have implemented Meteor-CollectionFS for image uploading in a post and everything is working fine as like uploading & showing.
Now I'm working for versioning as like resize an image while uploading & given this name is thumb see the below code
ProjectImages = new FS.Collection('ProjectImages', {
stores:[
new FS.Store.FileSystem("images", {
path: "~/files/images"
}),
new FS.Store.FileSystem("thumb", {
transformWrite: function(fileObj, readStream, writeStream){
gm(readStream, fileObj.name())
.resize('400', '350').stream()
.pipe(writeStream);
}
})
// new FS.Store.GridFS('ProjectImages')
],
filter: {
allow: {
contentTypes: ['image/*'],
extensions: ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG']
}
}
});
And I'm showing the image as natural as like
this.state.events.map((event, i) => (
....
<img src={ event.projectImage } />
....
and it's showing original image not resized but the log is showing image has resized see the below
FS.File._saveChanges: images
UPDATE: {"$set":{"copies.images":{"name":"dev.jpg","type":"image/jpeg","size":204521,"key":"ProjectImages-NSAxTejMyoQKZvQ6f-dev.jpg","updatedAt":"2018-11-29T08:08:33.230Z","createdAt":"2018-11-29T08:08:33.230Z"}}}
FS.File._saveChanges: thumb
UPDATE: {"$set":{"copies.thumb":{"name":"dev.jpg","type":"image/jpeg","size":24104,"key":"ProjectImages-NSAxTejMyoQKZvQ6f-dev.jpg","updatedAt":"2018-11-29T08:08:33.471Z","createdAt":"2018-11-29T08:08:33.471Z"}}}
......
My question is how to show the thumb image instead of original
Thanks
I need help to achieve multi page pdf generation in node.js . I have tried with html-pdf a freeware. I have six table's i have in my angluar(html) page. I want to hide any table during run time, if the check box is checked. i have tried with ng-show/hide. But is not working. So that, i was tried to design a html template in node.js, it works fine if i display entire page. I want to show only particular table's according to the values of an array sent from angular to node. In here myProject.html contains all my table design. I know how to hide tables in angular. That's using ng-hide/show. But i don't know how to achieve the same in node.js server side. Is there any possibility to use angularjs in this html-pdf modules. Anyone tell me.
Any help would be grateful.
My sample code snippet:
var html = fs.readFileSync('./public/pages/myProject.html', 'utf8');
var content1 = fs.readFileSync('./public/pages/footer.html', 'utf8');
var options = {
filename: './public/pdf/reports.pdf', format: 'Letter', "type": "pdf",
"font-family": "Calibri",
// //Footer options
"footer": {
"height": "28mm",
"contents": content1
},
// //Page option
"border": {
"top": "0.2in",
"bottom": "0.1in",
"right": "0.5in",
"left": "0.5in"
}
};
pdf.create(html, options).toFile(function (err, res) {
if (err) return console.log(err);
console.log(res); // { filename: '/tmp/html-pdf-8ymPV.pdf' }
});
Phantomjs it is. Trust me, my man. We have been using it to generate all our bills and invoices(of course dynamic data)
EDIT per comment request.
phantom.create(function(ph) {
ph.createPage(function(page) {
page.set('paperSize',{
format:'Letter',
margin: {
'top':'0in',
'bottom':'0in',
'left':'0in',
'right':'0in'
}
});
page.set('content',templates.bill(data));
page.set('settings.loadImages',true);
page.render('/tmp/file.pdf',function() {
ph.exit();
callback(null,'/tmp/file.pdf');
});
});
});
where templates.bill is a jade compile function (returns string);
I am using Extjs - 4.1.0 and I want to prompt download window. I used 'iframe'. The window displays only when the file being posted is zip/mp3 but when the file being posted is text/image file, the window doesn't appear. Is there some property to be set to enable download window for text/image/different files?
Please find my code below.
var record = item.findParentByType('itemcontextmenu').record;
Ext.Ajax.request({
url : ORT.Configuration.DOWNLOAD_GRAPHICS_URI+"&graphics="+record.get('id'),
success: function (response, opt) {
result = Ext.decode(response.responseText);
try {Ext.destroy(Ext.get('graphicsDownloadIframe'));}catch(e) {}
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'graphicsDownloadIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.fileName,
frameBorder: 0,
width: 0,
height: 0
});
}
});
It's all about the mimetype and what your browser does with it. So I guess your problem will the that. Which likely will cause the browser to handle the received file different.
Edit
Following is a helper class that I still use
Ext.ux.util.HiddenForm = function(url,fields){
if (!Ext.isArray(fields))
return;
var body = Ext.getBody(),
frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenform-iframe',
name:'iframe'
}),
form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
target:'iframe'
});
Ext.each(fields, function(el,i){
if (!Ext.isArray(el))
return false;
form.createChild({
tag:'input',
type:'text',
cls:'x-hidden',
id: 'hiddenform-' + el[0],
name: el[0],
value: el[1]
});
});
form.dom.submit();
return frame;
}
Usage
Ext.ux.util.HiddenForm('http://localhost/file/fetch',[['PropName','PropValue'],['Prop2Name','Prop2Value']])
The server take these arguments and build up a sort of 'FileStreamResult' which trigger a download on the clientside. If you are using a language like .Net or Java then there are already implementations you can use, if you are using PHP you might find this helpful. Anyway, look at your backend...
I am currently working on a task which want to display bar charts/tables on the website.
The application is using: sproutcore (1.6) as front-end, Java Restful as backend.
However, I can't find some useful library for charts in sproutcore. Are there any ideas for that?
I search on the website, I feel the google chart tools is quite good, also jFreechart as backend is also a good choice.
I am not sure how to integrate that to sproutcore.
Thanks.
I'm using Flot to display charts on my Sproutcore app.
To use it, you need to create a flot directory inside the frameworks folder which will include the jquery.flot.js file (I've also include jquery.flot.pie.js file) and a core.js file with this content:
sc_require('jquery.flot.js');
sc_require('jquery.flot.pie.js');
Flot = SC.Object.create({
plot: $.plot
}) ;
Then, you need to add this new library to your buildfile :
config :yourapp,
:required => ['flot']
To display your charts in your app, you can use this custom view that I made to work with Flot:
GX.FlotView = SC.View.extend({
classNames: ['flot'],
//ex: [{ data: [[1326366000000, 1500], [1326452400000, 600]], label: 'title of the serie' }, ...]
data: [],
/*
ex: {
legend: { show: true },
series: line, points,
xaxis: { mode: "time", timeformat: "%d/%m/%y", }
grid: { backgroundColor: { colors: ["#FFF", "#fefefe"]}},
}
*/
options: [],
render: function(context, firstTime) {
var frame = this.get('frame'),
data = this.get('data'),
options = this.get('options');
// To avoid an error with flot, we check if width and height > 0
if(frame.width > 0 && frame.height > 0 && data && data.length) {
var layer = this.get('layer'),
plot = Flot.plot(layer, data, options);
}
},
viewDidResize: function() {
this.invokeLast(function() {
if (this.get('isVisibleInWindow')) this.set('layerNeedsUpdate', YES);
});
}.observes('data', 'data.[]'),
});
Then, you just have to bind the data and the option properties with your data.