ActiveAdmin Trumbowyg is not working properly. I have added upload option using it and uploaded file as per code give here.
It successfuly uploads the file, but it is not inserted inside text area.
form do |f |
f.inputs do
f.input: title
f.input: body, as:: trumbowyg,
input_html: {
data: {
options: {
btns: [
['removeformat'],
['upload'],
['insertImage'],
['viewHTML']
],
plugins: {
upload: {
serverPath: uploader_image_path(resource.id),
fileFieldName: 'file_upload'
}
}
}
}
}
f.input: banner_image, as:: file
end
f.actions
end
Any solution?
Demo site for reference.
Use it with plugin option given below the editor.
Related
I'm using AWS cognito and amplify in my vue js application. Everything is working fine with pre-defined fields.
I've added the custom fields in AWS user pool attributes section. Those newly added fields are not reflecting in UI.
Here is my code for amplify config and custom fields.
HTML Code:
<amplify-authenticator>
<amplify-sign-up
slot="sign-up"
header-text="My Project Sign-Up"
submit-button-text="Register"
:formFields="formFields"
></amplify-sign-up>
</amplify-authenticator>
Custom Fields JSON
formFields: [
{ type: 'username' },
{ type: 'password' },
{ type: 'email', inputProps: { required: true, autocomplete: 'username' } },
{ type: 'phone_number' },
{ type: 'custom:name' },
]
Result form
Custom fields are not coming in the form. Can some one please help me to solve this issue?
The issue appears to be related to Stencil. See this discussion.
The solution suggested is to change formFields to formFields.prop.
E.g.
<amplify-authenticator>
<amplify-sign-up
slot="sign-up"
header-text="My Project Sign-Up"
submit-button-text="Register"
:formFields.prop="formFields"
></amplify-sign-up>
</amplify-authenticator>
This worked for me using Vue 2.
My project structure is as follows:
src
..lib
....someLibrary.js
bundles.js:
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"sourceMaps": 'inline'
"inject": true,
"minify": true,
"depCache": true,
"rev": true
}
},
The project builds fine, but when I check app-build.js I don't find a definition for lib/someLibrary.js. I am using typescript for my own project so I assume this has something to do with that, how can I mix regular js files and output from my transpiled TS files into the same app-build bundle?
Update
So I tried to split the 'build-system' gulp task into two tasks: 'build-typescript' which is the same as 'build-system' was before, then I created 'build-libs' which looks like so:
gulp.task('build-libs', function() {
return gulp.src(paths.root + '**/*.js')
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src' }).on('error', gutil.log))
.pipe(gulp.dest(paths.output));
});
I then added to my dist/app-build bundle config: "lib/someLibrary.min.js"
And now my app-build.js does have the library defined, however when I try to use the library in one of my views using:
<require from="lib/someLibrary.min.js">
I get an error:
Failed to load resource: the server responded with a status of 404 (Static File '/dist/lib/someLibrary.min.html' not found)
What?!?? Why is it looking for html when nowhere is html ever involved in this whole scenario? Why is something that should be easy this hard?
Update2
So apparently 'require' does not work with javascript files. I changed to use the 'script' tag, however it seems these get stripped out when rendered by Aurelia. I am at a loss as to how to get Aurelia to do what I want it to.
Ok so after much frustration and disbelief at how hard something so simple could be, in addition to the changes to the build tasks mentioned above (which includes the javascript library file that has no npm/jspm package into the app-bundle) I created a modified version of this solution which looks as follows:
import { bindable, bindingMode, customElement, noView } from 'aurelia-framework';
#noView()
#customElement('scriptinjector')
export class ScriptInjector {
#bindable public url;
#bindable public isLocal;
#bindable public isAsync;
#bindable({ defaultBindingMode: bindingMode.oneWay }) protected scripttag;
public attached() {
if (this.url) {
this.scripttag = document.createElement('script');
if (this.isAsync) {
this.scripttag.async = true;
}
if (this.isLocal) {
const code = 'System.import(\'' + this.url + '\').then(null, console.error.bind(console));';
this.scripttag.text = code;
} else {
this.scripttag.setAttribute('src', this.url);
}
document.body.appendChild(this.scripttag);
}
}
public detached() {
if (this.scripttag) {
this.scripttag.remove();
}
}
}
To use it, simply add the following tag to the view where you want the script library to be used as follows:
<scriptinjector url="lib/bootstrap-toc.js" is-local.bind='true'></scriptinjector>
This will keep the original scriptinjector functionality which allows you to add remote 3rd party libraries to your Aurelia app but it will also allow you to load any local 3rd party libraries that you have bundled with your app.
Hope this helps someone.
i am working on Extjs4 file upload control. i have view with file upload control as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
enctype : 'multipart/form-data',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And corresponding action in controller is-
getUpload : function() {
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
}
});
So above controller's function is retriving uploaded file and displaying it in encoded format inside reader's onload function. i.e. "console.log(oFREvent.target.result);" line is displaying uploaded file's data in encoded format in console. I need to send this file to server side. So i am passing above fileobj as parameter to store as-
var storeObj=this.getStore('kp.DnycontentStore');
storeObj.load({
params:{
data:fileobj
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
But its showing fileobj as undefined outside reader.onload function. So how to send this file along with its contents to server side? Is there any other way to get uploaded file in controller and send it to server. Please can someone guide me.
I dont know how to handle fileuplaod on php side, but the return response from the server needs to be text/html encoded
See the docs on this:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
also example PHP fileupload script:
http://www.w3schools.com/php/php_file_upload.asp
I am using wicked_pdf plug-in for generating pdf. I am showing message and spinner when user click on pdf link and i want to hide that when pdf is generated and pushed to browser for download/show. I have added jquery code on body onload which will not execute. Is there any other way to trigger jquery function when pdf file pushed to browser?
This is a rather complicated issue, but can be solved nicely if you are willing to use jQuery plugins. http://jqueryfiledownload.apphb.com/ is a plugin that can do exactly what you need if I understood you correctly.
My frontend code looks like this
$.fileDownload('/Content/Print', {
successCallback: function (url) {
$("#PrintingMessage").dialog('close');
},
failCallback: function (responseHtml, url) {
$("#PrintingMessage").dialog('close');
if (responseHtml.indexOf('Error403') != -1) {
$("#PrintingFailedMessage").html("Error 403.");
} else if (responseHtml.indexOf('Error500') != -1) {
$("#PrintingFailedMessage").html("Error 500.");
}
$("#PrintingFailedMessage").dialog({ modal: true });
},
httpMethod: "POST",
data: $('#PublishForm').serialize()
});
And my backend does this at the end of the process. You'll have to translate that yourself :)
Response.SetCookie(new System.Web.HttpCookie("fileDownload", "true") { Path = "/" });
return File(file, System.Net.Mime.MediaTypeNames.Application.Octet, filename);
iam new sencha touch.
Iam doing one project , in that project i need to convert the images to base64 string, iam uploading the image, and iam getting fulll path of image, but iam unable to convert image to base64 string.
plz help me in this issue.
make sure that iam asking in sencha touch
How do you access the files? Where the images are coming from? If they are from the camera or the photo gallery then Phonegap is the best way to get them. Base64 encoding is solved by PG in that case. If you are trying to solve it in pure js then you need to do some more work on it. Sencha doesn't provide functions for base64 encoding. So the best bet if you add some function to your project. There are lots of resources on the web how to do base64 encoding in javascript. E.g. see the discussion here Base64 encoding and decoding in client-side Javascript
The following code snippet helps you for uploading image and get base64 data uri
In your view you should have the following filefield component of sencha touch
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'filefield',
id: 'idfilefieldSample',
name: 'filefieldSample',
accept: 'image'
},
]
}
});
and your controller look like this:
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control:{
'filefield[name=filefieldSample]': {
change: 'onChangefilefield',
},
}
},
onChangefilefield: function(filefield, newData, oldData, eOpts)
{
var filesSelected = Ext.getCmp('idfilefieldSample').getComponent().input.dom.files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var srcData = fileLoadedEvent.target.result;
console.log(srcData);
}
fileReader.readAsDataURL(fileToLoad);
}
},
});