HtmlEditor - Upload Images

[DokaRus]

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

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]

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]

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.

[nirav5884]

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

[dxbykov]

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]

Good timing actually. Thanks. I will he working with this today.

On Fri, Oct 4, 2019 at 9:44 AM Alexander Bykov ***@***.***> wrote: Hi @nirav5884 <https://github.com/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 <https://codepen.io/Doka/pen/GRRKXGb?editors=1010> of the suggested solution. You can also review the following links: File Uploading Demo <https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileUploading/> FileUploader Docs <https://js.devexpress.com/Documentation/Guide/Widgets/FileUploader/Overview/> HtmlEditor Docs <https://js.devexpress.com/Documentation/Guide/Widgets/HtmlEditor/Overview/> Hope this helps. Please let us know if you need any further assistance. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#7268?email_source=notifications&email_token=ABRVAFMHEHY2CP4ICLI2AN3QM5CFJA5CNFSM4G5U2HYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEALWBTA#issuecomment-538403020>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABRVAFIFAATUL6KUO3UJ6HLQM5CFJANCNFSM4G5U2HYA> .

-- David Evan Karasek davidekarasek@gmail.com

[nirav5884]

Thanks for the update. I was able to implement the image and video uploading from local computer and internet explicitly, happy to say that this is working fine without any issues. If anyone needs help on this please let me know. Regards, Nirav On Fri, Oct 4, 2019, 11:42 PM David Karasek <notifications@github.com> wrote:

…

Good timing actually. Thanks. I will he working with this today. On Fri, Oct 4, 2019 at 9:44 AM Alexander Bykov ***@***.***> wrote: > Hi @nirav5884 <https://github.com/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 > <https://codepen.io/Doka/pen/GRRKXGb?editors=1010> of the suggested > solution. > > You can also review the following links: > File Uploading Demo > < https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileUploading/ > > FileUploader Docs > < https://js.devexpress.com/Documentation/Guide/Widgets/FileUploader/Overview/ > > HtmlEditor Docs > < https://js.devexpress.com/Documentation/Guide/Widgets/HtmlEditor/Overview/ > > > Hope this helps. Please let us know if you need any further assistance. > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > < #7268?email_source=notifications&email_token=ABRVAFMHEHY2CP4ICLI2AN3QM5CFJA5CNFSM4G5U2HYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEALWBTA#issuecomment-538403020 >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/ABRVAFIFAATUL6KUO3UJ6HLQM5CFJANCNFSM4G5U2HYA > > . > -- David Evan Karasek ***@***.*** — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7268?email_source=notifications&email_token=AA24M7HKK53E5P2ZYNAMJ3DQM6BRHA5CNFSM4G5U2HYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAMPDRY#issuecomment-538505671>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA24M7FCCX443SHQWHAAARLQM6BRHANCNFSM4G5U2HYA> .