editor-js / attaches Goto Github PK

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.

Editorjs config:

      attaches: {
              class: AttachesTool,
              config: {
                  additionalRequestHeaders: {
                      "X-CSRF-TOKEN": this.token,
                  },
                  endpoint: '/admin/builder/upload-file',
              }
          },

Laravel Controller:

          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);
              }
          }

Result:

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:

• Create attache block
• Upload any file.
• After successful upload press the Enter 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.

I am using codex docs and want to add file attachment to editorjs, the attachment doesn't show in read mode

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