Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HtmlEditor - Upload Images #7268

Open
DokaRus opened this issue Mar 13, 2019 · 16 comments
Open

HtmlEditor - Upload Images #7268

DokaRus opened this issue Mar 13, 2019 · 16 comments

Comments

@DokaRus
Copy link
Contributor

@DokaRus DokaRus commented Mar 13, 2019

The Problem

There are three ways to add an image to a web-based rich editor:

  • Use the image's URL
  • Drag-and-drop the image or paste it from the clipboard and encode it in base64
  • Upload the image to a server

At the moment, the HtmlEditor supports only the first two.

The Proposed Solution

We plan to rework the image dialog to allow you to upload files to the server.

We consider adding an imageUploading option that accepts an object with the following structure:

imageUploading: { 
  uploadUrl: string, // Specifies the target URL for the upload request
  enabled: boolean // true: the HtmlEditor uploads the image to the server and pastes the URL into the content 
                   // false: the HtmlEditor inserts the image into the content as a base64 code
}

UI Design

Image Dialog

Try It

Coming soon

We Need Your Feedback

Take a Quick Poll

Do you find the capability to upload images in the HtmlEditor useful?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

@davidekarasek
Copy link

@davidekarasek davidekarasek commented Mar 19, 2019

Please provide some details around the upload process to a server. Ideally I'd like the solution to be strictly HTML5 and upload files through RESTful POSTS of the files to a separate, RESTFUL API or to a specific server location.

Our application currently uses a file upload location within the applications application folder, e.g. [root]/images/userImages. We want to constrain images to only use that location, and pre-validate the image being uploaded so that it's only a small JPG.

We have this working currently using ASP.Net Web RAZOR on the front end, but it doesn't work well because I need to run it separately from the remainder of the app which is HTML5 only on the front end. Thus I wanted to eliminate the use of RAZOR (or any client-side ASP.Net component). If I understand correctly, this image upload solution will do that.

@DokaRus
Copy link
Contributor Author

@DokaRus DokaRus commented Mar 20, 2019

We'll use a built-in FileUploader widget to add the ability to upload images. We'll definitely provide a way to customize its options (like maxFileSize that would be helpful in your case).
We will update this issue once we discuss the API in the team.

@dxbykov dxbykov added 19_2 and removed 19_1 labels Jul 16, 2019
@nirav5884
Copy link

@nirav5884 nirav5884 commented Sep 3, 2019

Is there any updates on this as preview release is out of 19.2?
How can we use the new image uploader?

@dxbykov
Copy link
Contributor

@dxbykov dxbykov commented Oct 4, 2019

Hi @nirav5884,

Unfortunately, we couldn't add this functionality to the 19.2 release cycle but didn't reject it. We expect to finally ship it with 20.1. Please bear with us.

Nevertheless, our HtmlEditor API allows you to implement this scenario outside of the component. To achieve this, you need to perform the following steps:

  • Add a custom button to the editor's toolbar (it will open an upload popup)
  • Create a popup and put our FileUploader component in it
  • Handle file uploading and insert a link to the editor content using the 'extendedImage' format

We have prepared sample code of the suggested solution.

You can also review the following links:
File Uploading Demo
FileUploader Docs
HtmlEditor Docs

Hope this helps. Please let us know if you need any further assistance.

@davidekarasek
Copy link

@davidekarasek davidekarasek commented Oct 4, 2019

@nirav5884
Copy link

@nirav5884 nirav5884 commented Oct 5, 2019

@DokaRus DokaRus added 20_1 and removed 19_2 labels Mar 6, 2020
@Semigradsky
Copy link

@Semigradsky Semigradsky commented May 25, 2020

@nirav5884 Could you provide the example of code?

@DokaRus DokaRus added 20_2 and removed 20_1 labels May 25, 2020
@Yookey
Copy link

@Yookey Yookey commented Jul 20, 2020

@dxbykov Hi, Thanks for you example, and how to get uploaded image url?

@San4es San4es self-assigned this Aug 3, 2020
@San4es San4es added 21_1 and removed 20_2 labels Oct 30, 2020
@San4es San4es removed their assignment Oct 30, 2020
@jsdmitry jsdmitry self-assigned this Nov 2, 2020
@DokaRus
Copy link
Contributor Author

@DokaRus DokaRus commented Dec 28, 2020

@Yookey You can generate the correct URL on the client side if you know the folder that you usually use for saving images and the file name that you can get from the name field. Please review the File Uploading demo to learn how to get the file name.
If you face any issues, feel free to create a ticket in our Support Center.

@jonathanalberghini
Copy link

@jonathanalberghini jonathanalberghini commented Mar 12, 2021

How about adding support for S3 uploading?

@jsdmitry
Copy link
Contributor

@jsdmitry jsdmitry commented Mar 15, 2021

FileUploader doesn't currently support Amazon S3, but we'll consider adding this feature in the future. You can build your solution based on the demo as well.

@jsdmitry jsdmitry added 21_2 and removed 21_1 labels Mar 17, 2021
@daviddejaeger
Copy link

@daviddejaeger daviddejaeger commented Jul 1, 2021

Hi, will this feature be able to upload 'pasted' images from the clipboard that are encoded in base64 to a server, which for example return the link from the server?

My scenario is I want to keep the pasting with clipboard feature as this is handy for the user, but I don't want to save this in my db/htmleditor, so I want to convert this to a file, save it in some storage and then insert the url in the htlmeditor instead.

@davidekarasek
Copy link

@davidekarasek davidekarasek commented Jul 1, 2021

@SpiraMira
Copy link

@SpiraMira SpiraMira commented Sep 1, 2021

Has the ability to upload images or paste media from the clipboard been added yet?

@charlesmatvchuk
Copy link

@charlesmatvchuk charlesmatvchuk commented Sep 7, 2021

When will the ability to upload images be added?

@DokaRus
Copy link
Contributor Author

@DokaRus DokaRus commented Sep 8, 2021

When will the ability to upload images be added?

Now we are focused on improvements in table support. Image uploading should be our next task if all goes well.

Has the ability to upload images or paste media from the clipboard been added yet?

By default, all images are converted to base64 strings when a user adds them using drag and drop. It is possible to extend the basic clipboard and uploader modules in order to intercept the "paste" and "drop" events and be able to perform the necessary actions (like upload). You can examine this example: CodePen. Anticipating your next question, I'd like to add that we think of improving our API for this usage scenario, but have no immediate plans to introduce this feature out of the box.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet