How can I upload images in Trix editor with Rails 5.2 configured with ActiveStorage?
I saw some videos using others uploaders, but could not adapt the idea to ActiveStorage.
Other (maybe) solution is: use ActionText with Rails 5.2. Is it safe to use already?
Active Storage has direct upload js, you need just add:
//= require activestorage
to your application.js, and then create trix-attachment-add event listener:
document.addEventListener('trix-attachment-add', function (event) {
var file = event.attachment.file;
if (file) {
var upload = new window.ActiveStorage.DirectUpload(file,'/rails/active_storage/direct_uploads', window);
upload.create((error, attributes) => {
if (error) {
return false;
} else {
return event.attachment.setAttributes({
url: `/rails/active_storage/blobs/${attributes.signed_id}/${attributes.filename}`,
href: `/rails/active_storage/blobs/${attributes.signed_id}/${attributes.filename}`,
});
}
});
}
});
Hope this helps you!
Related
I try to implement ActionTest with old way asset pipeline (without Webpack) on rails 6
Almost all is good, except loading of #rails/actiontext
in my application.js I've
//= require trix
//= require #rails/actiontext
The riche editor appear, I can change bold/italic text, but can't add image (not uploaded)
I've an JS error : Uncaught SyntaxError: Cannot use import statement outside a module
on line : import { AttachmentUpload } from "./attachment_upload" from attachment_uplaod.js in actiontext.
Any way to achieve this without webpack?
thanks
I don't know what will be the official way, but I did it this way as I'm waiting for an updated install generator:
Prerequisites
hotwire-rails
CSS
Copy the CSS file in your asset pipeline (https://github.com/basecamp/trix/tree/main/dist)
JS Libraries
In app/assets/javascripts/libraries create these two files
Updated content may be found on https://www.skypack.dev
// app/assets/javascripts/libraries/actiontext#6.1.4.js
export * from 'https://cdn.skypack.dev/pin/#rails/actiontext#v6.1.4-znF92tREya92yxvegJvq/mode=imports/optimized/#rails/actiontext.js';
export { default } from 'https://cdn.skypack.dev/pin/#rails/actiontext#v6.1.4-znF92tREya92yxvegJvq/mode=imports,min/optimized/#rails/actiontext.js';
// app/assets/javascripts/libraries/trix#1.3.1.js
export * from 'https://cdn.skypack.dev/pin/trix#v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports/optimized/trix.js';
export { default } from 'https://cdn.skypack.dev/pin/trix#v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports,min/optimized/trix.js';
Import through Stimulus
In app/assets/javascripts/controllers create this file
//app/assets/javascripts/controllers/trix_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
import("actiontext").catch(err => null)
import("trix").catch(err => null)
}
}
On pages where trix/action_text should be loaded, add a data-controller="trix" to the relevant div
And voilà !
https://github.com/rails/rails/issues/41221#issuecomment-871853505
Got Action Text working by copying the actiontext scripts into a custom file, and removing the imports and exports.
And second, you will need to require activestorage in your application.js to make use of DirectUpload.
application.js
//= require trix
//=# require #rails/actiontext
//= require activestorage
//= require actiontext
actiontext.js
// Copied from node_modules/#rails/actiontext/app/javascript/actiontext/attachment_upload.js
class AttachmentUpload {
constructor(attachment, element) {
this.attachment = attachment;
this.element = element;
// Requires `require activestorage` in application.js
this.directUpload = new ActiveStorage.DirectUpload(
attachment.file,
this.directUploadUrl,
this
);
}
start() {
this.directUpload.create(this.directUploadDidComplete.bind(this));
}
directUploadWillStoreFileWithXHR(xhr) {
xhr.upload.addEventListener("progress", event => {
const progress = (event.loaded / event.total) * 100;
this.attachment.setUploadProgress(progress);
});
}
directUploadDidComplete(error, attributes) {
if (error) {
throw new Error(`Direct upload failed: ${error}`);
}
this.attachment.setAttributes({
sgid: attributes.attachable_sgid,
url: this.createBlobUrl(attributes.signed_id, attributes.filename)
});
}
createBlobUrl(signedId, filename) {
return this.blobUrlTemplate
.replace(":signed_id", signedId)
.replace(":filename", encodeURIComponent(filename));
}
get directUploadUrl() {
return this.element.dataset.directUploadUrl;
}
get blobUrlTemplate() {
return this.element.dataset.blobUrlTemplate;
}
}
// Copied from node_modules/#rails/actiontext/app/javascript/actiontext/index.js
addEventListener("trix-attachment-add", event => {
const { attachment, target } = event;
if (attachment.file) {
const upload = new AttachmentUpload(attachment, target);
upload.start();
}
});
This still uses ES6 syntax, so if you want to support older browsers and aren't using Babel, you might want to rewrite or transpile this to ES5.
I am using dropzone with and active storage to upload files directly upload files to the s3 server from the client side. Currently I am getting file from dropzone with addedfile event of dropzone and uploading it via new ActiveStorage.DirectUpload(file, url);. Now according to the documentation they have provided some event listeners which I can use to show progress of upload to the user but they are only working if I am using a normal form and a submit button. It does not work if I upload files via Javascript.
Here is my code:
dropzone.on("addedfile", function (file) {
const upload = new ActiveStorage.DirectUpload(file, url);
upload.create((error, blob) => {
if(error) return;
alert('file uploaded');
}
}
addEventListener("direct-upload:start", event => {
console.log('This does not work');
})
DirectUpload doesn't dispatch events.
DirectUploadController does, and it uses DirectUpload to do the actual upload, like you are doing in your example code. You don't need to listen for events from DirectUploadController since you can infer when the event would be dispatched.
To do something where you would expect the direct-upload:start and direct-upload:end events, change your code to something like:
dropzone.on("addedfile", function (file) {
const upload = new ActiveStorage.DirectUpload(file, url);
console.log("direct-upload:start")
upload.create((error, blob) => {
if(error) {
console.log("direct-upload:error")
return;
}
}
console.log("direct-upload:end")
}
I'm trying to get some TDD happening with Ember and Konacha - I get this error when I try to use visit
ReferenceError: visit is not defined
at Context.<anonymous> (http://localhost:3500/assets/api_spec.js?body=1:24:5)
at Test.Runnable.run (http://localhost:3500/assets/mocha.js:4336:32)
at Runner.runTest (http://localhost:3500/assets/mocha.js:4724:10)
at http://localhost:3500/assets/mocha.js:4802:12
at next (http://localhost:3500/assets/mocha.js:4649:14)
at http://localhost:3500/assets/mocha.js:4659:7
at next (http://localhost:3500/assets/mocha.js:4597:23)
at http://localhost:3500/assets/mocha.js:4621:7
at Hook.Runnable.run (http://localhost:3500/assets/mocha.js:4338:5)
at next (http://localhost:3500/assets/mocha.js:4609:10)
api_spec.rb
//= require spec_helper
describe("fake server", function() {
beforeEach(function() {
this.server = sinon.fakeServer.create();
});
afterEach(function() {
this.server.restore();
});
it("#transition off Landing", function() {
visit("/").then(function() {
var mock = sinon.mock(testHelper.lookup('route', 'index'));
mock.expects('transitionTo').once();
mock.verify();
mock.restore();
});
});
}
here's my spec_helper.rb
//= require sinon
//= require ember-mocha-adapter
//= require application
mocha.ui('bdd');
mocha.globals(['Ember', 'App', 'DS', 'MD5']);
mocha.timeout(500);
chai.Assertion.includeStack = true;
ENV =
{
TESTING:true
};
window.server = sinon.fakeServer.create();
window.testHelper = {
lookup: function(object, object_name) {
name = object_name || "main";
return App.__container__.lookup(object + ":" + name);
}
}
App.Router.reopen({
location: 'none'
});
Konacha.reset = Ember.K;
How do I make ember play nice with visit?
Cheers!
visit is only injected when you call
App.injectTestHelpers();
Additionally you must be running a debug build of Ember.
But it only works with qunit, you'll need to write your own visit if you're using a different testing framework.
I'm using AngularJS in a Ruby on Rails 3.2.8 project with assets.
When I load up my form which is using AngularJS on my development machine I don't have a problem. However when I load the same form up on my production server I get this error in the Javascript console:
Error: Unknown provider: aProvider <- a
I've tracked it back to my coffeescript file where I setup AngularJS for use within a form:
$ (event) ->
$("#timesheet_description").autocomplete({source: '/autocomplete/work_descs'})
# Create AngularJS module
app = angular.module 'timesheetApp', []
# Create a AngularJS controller
app.controller "TimesheetCtrl", ($scope) ->
$scope.costed_amount = 0
# Bind my module to the global variables so I can use it.
angular.bootstrap document, ["timesheetApp"]
If I comment all this out the page will load without errors and without AngularJS abilities.
Is the problem due to Rails assets compiling and minify?
Is there a way to fix this and still use coffeescript and Rails assets?
AngularJS, when using the style you're using right now (called pretotyping), uses the function argument names to do dependency injection. So yes, minification does break this completely.
The fix is simple, though. In every case where you need injection (are using '$xxx') variables, do this:
app.controller "TimesheetCtrl", ['$scope', ($scope) ->
$scope.costed_amount = 0
]
Basically, replace all function definitions with an array. The last element should be the function definition itself, and the first ones are the $names of the objects you want injected.
There's some more (albeit not clear enough) info on the docs.
If you miss the array notation somewhere , to locate this we need to modify the angular code little bit, but its very quick solution.
change is console.log("Array Notation is Missing",fn); ( line no 11 from function start)
Find out annotate function in angular.js (non-minified)
function annotate(fn) {
var $inject,
fnText,
argDecl,
last;
if (typeof fn == 'function') {
if (!($inject = fn.$inject)) {
$inject = [];
if (fn.length) {
console.log("Array Notation is Missing",fn);
fnText = fn.toString().replace(STRIP_COMMENTS, '');
argDecl = fnText.match(FN_ARGS);
forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg){
arg.replace(FN_ARG, function(all, underscore, name){
$inject.push(name);
});
});
}
fn.$inject = $inject;
}
} else if (isArray(fn)) {
last = fn.length - 1;
assertArgFn(fn[last], 'fn');
$inject = fn.slice(0, last);
} else {
assertArgFn(fn, 'fn', true);
}
return $inject;
}
To minify angular all you need is to do is to change your declaration to the "array" declaration "mode" for example:
From:
var demoApp= angular.module('demoApp', []);
demoApp.controller(function demoCtrl($scope) {
} );
To
var demoApp= angular.module('demoApp', []);
demoApp.controller(["$scope",function demoCtrl($scope) {
}]);
How to declare factory services?
demoApp.factory('demoFactory', ['$q', '$http', function ($q, $http) {
return {
//some object
};
}]);
I am using Telerik Upload in my MVC3 Project. I need to make the select file window as only showing the Text files rather than showing all the file types files. Is there any way that i can make it?
The following code filter only jpeg/jpg and png file. Also check when select a file whether it is a valid extension file.
#(Html.Telerik().Upload()
.Name("attachments")
.Multiple(false)
.Async(async => async
.Save("AddImg", "Home")
.AutoUpload(false)
)
.ClientEvents(events => events
.OnLoad("onLoad")
.OnSelect("onSelect")
.OnSuccess("onSuccess")
)
)
<script type="text/javascript">
function onLoad(e) {
$(this).find("input").attr("accept", "image\/jpeg,image\/jpg,image\/png");
}
function onSelect(e) {
if (e.files[0].size > 102400) {
alert('The file size is too large for upload');
e.preventDefault();
return false;
}
var ext = e.files[0].extension.toLowerCase();
if ($.inArray(ext, ['.gif', '.jpeg', '.jpg', '.png']) == -1) {
alert('This type of file is restricted from being uploaded due to security reasons');
e.preventDefault();
return false;
}
return true;
}
</script>
Telerik Forum has an answer for this. See this post from the Telerik Team.