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> .

[Semigradsky]

@nirav5884 Could you provide the example of code?

[Yookey]

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

[DokaRus]

@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]

How about adding support for S3 uploading?

[jsdmitry]

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.

[daviddejaeger]

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]

We use the Dev Express file uploader on the front end for this purpose but built our own .Net Core API to save files to the file system. Make sure to allow images only and enforce upload file size limits. See https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-5.0 for a full example.

On Thu, Jul 1, 2021 at 5:09 AM daviddejaeger ***@***.***> wrote: 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. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#7268 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRVAFLFJILTDYU7VYAGA6DTVQWD5ANCNFSM4G5U2HYA> .

-- David Evan Karasek ***@***.***

[SpiraMira]

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

[charlesmatvchuk]

When will the ability to upload images be added?

[DokaRus]

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.