editor-js / attaches Goto Github PK
View Code? Open in Web Editor NEWFile attachments Block for the Editor.js
License: MIT License
File attachments Block for the Editor.js
License: MIT License
I would expect it to popup a window to select files to upload. But instead it directly calls the upload endpoint.
The uploading works fine, the response is also correct, the file gets displayed in the builder although without the file name for some reason.
attaches: {
class: AttachesTool,
config: {
additionalRequestHeaders: {
"X-CSRF-TOKEN": this.token,
},
endpoint: '/admin/builder/upload-file',
}
},
public function upload_file() {
if (request()->file('file')) {
$file = request()->file('file');
$extension = $file->extension();
$size = $file->getSize();
$fileName = $file->getClientOriginalName();
$time = date('H-i-s');
$date = date('d-m-Y');
Storage::disk('public')->put('uploads/categories/'.$date.'/'.$time.'_'.$fileName, file_get_contents($file));
return response()->json([
'success' => 1,
'file' => [
'url' => asset('/storage/uploads/categories/'.$date.'/'.$time.'_'.$fileName),
'size' => $size,
'extension' => $extension,
'name' => $fileName
]
], 200);
}
}
Getting "File Upload Failed" although it is uploaded and the file is displayed in the builder but without the file name.
Is it possible to over ride title: 'Attaches'
which is shown on hover of icon inside editor?
static get toolbox() {
return {
icon: Icon,
title: 'Attaches'
};
}
Dependencies in package.json seem to be missing
npm install
npm run build
fails with:
> @editorjs/[email protected] build /.../attaches
> webpack --mode production
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
Hash: 46a985958e381b5d6669
Version: webpack 4.42.1
Time: 107ms
Built at: 04/11/2020 3:15:30 PM
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/home/yoel/src/editorjs/attaches'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @editorjs/[email protected] build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @editorjs/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /../.npm/_logs/2020-04-11T19_15_30_973Z-debug.log
And installing babel-loader
just run into more problems.
please change onUpload function
this.image = response.file;
@editorjs/[email protected]
@editorjs/[email protected]
Steps To regenerate:
attache
blockEnter
key.Video Sample:
give a option to configure a route to send a request when deleting files, to remove the file from a cloud for example, when the file is deleted from the editor
It would be nice to add the ability to send additional headers
For example: X-CSRF-TOKEN
Just like it is available in image https://github.com/editor-js/image/blob/master/src/uploader.js
Line #L64
In the latest release it is not "AttachementTool" - it is "AttachesTool".
Update readme.md
Hi!
I have an error after uploading a file: "failed to execute 'selectNodeContents' on 'Range': parameter 1 is not of type 'Node'".
The error occurs in version 1.1.1 and I don't have it in version 1.1.0
editor-js/image provides a uploadByFile function. I think simply an endpoint is not enough for attaches either. E.g. I have to pass CSRF-token and do other stuff.
When the file is loaded, the onChange event does not fire for editorJS. The problem appeared after the latest updates.
This is a really excellent editor.
I want to know how to add a custom header to the attaches tool. I have an API that requires an authorization token to be sent before you can upload a file
Is it possible to show human readable error on 413 - Request Entity Too Large? Now I`m getting error only in console and user has no chance to find out what actually happened.
Thanks for otherwise great plugin!
Switched from 1.0.1 to 1.2.0 and it seems like the css styles from index.css
are not beeing injected into the dom.
All other plugins append their custom styles as <style>.cdx-...</script>
into the dom but this tool is not.
Any ideas why?
Using: <script src="https://cdn.jsdelivr.net/npm/@editorjs/attaches@latest"></script>
With the examples inside editor js: https://github.com/codex-team/editor.js/blob/next/example/example.html
In the section about backend response format, the text says
Can contain data you want to store.
I've implemented a simple upload handler which returns only { success : 1 }
response, but the component fails with the message
File upload failed
The same thing happens when I add an empty file: { }
section to response.
If I add the url
field inside file
object, the error changes to
Cannot read property 'split' of undefined
The message is the same if I add the title
field inside the file
object.
Once I added the name
field into the file
object, everything works as expected.
Note that in all these instances, the actual upload works โ the file is properly stored inside the dedicated uploads folder.
I am using the latest dist version downloaded from the master branch today.
The way I see it, either docs need to reflect that name
is a required response field inside the file
object, or it needs to default to some name if one isn't returned.
Happy to supply more details if needed and thank you for all your work on this.
Hello, i am using attaches plugin for my project and it works fine but when the editor js is in read-only mode, i got an Error. When debugging i got this index.js:1 Editor.js is not ready because of Error: To enable read-only mode all connected tools should support it. Tools attached don't support read-only mode.
.
Is their a way to enable support for read-only mode or suggestion on how to handle this
My backend responds with 201 when saving a new file. This fails silently. I have to change status code to 200 in the backend for it to work.
Same backend works fine with the "images" plugin.
when i upload file it's throwing File upload failed
Hi,
When you add an attaches field, the finder/explorer opens automatically.
But this takes like a second or so before it opens.
When in the meantime you click on the select a file box, the finder opens again after you selected a file initially in the automatically opened finder. So in that case the finder opens twice, which is a bit confusing.
Maybe it's better to disable click events on the button till the finder has opened initially? Or disable initially opening the finder?
It would be nice to have read-only mode
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.