savefield for image upload

[Laurent]

Hi team,

About the editor's image browser upload service with imageBrowser.transport.uploadUrl : is there a possibility to set the saveField like it's possible with the upload widget ? Seems the default name is "file" !

 

Content-Disposition: form-data; name="file"; filename="xxx.jpg"

Content-Type: image/jpeg

 

Best regards,

Laurent.

[Aleksandar]

Hello Laurent,

The Editor's ImageBrowser only exposes the imageBrowser.transport.uploadUrl configuration option to specify the URL which will handle the upload of the new images. If this configuration option is not specified the Upload button will not be displayed. There is no default option available to configure the saveField, like for the Upload widget.

Having said that, a possible workaround could be to configure the Upload widget by attaching an event handler function to the execute event of the Editor. Then when the "insertimage" command is being executed get a reference to the Upload widget and customize the async configuration options of the widget via the setOptions method.

$("#editor").kendoEditor({
...
execute: function(e) {
              setTimeout(function(){
                if(e.name == "insertimage"){
                  var upload = $('[data-role=upload]').getKendoUpload();
                  upload.setOptions({
                    async:{
                      //set the async configuration as required
                    }
                  })
                }
              },1000)
            }
})

I hope the above helps you achieve the desired result. Let me know if you have further questions.

Regards,
Aleksandar
Progress Telerik

[Laurent]

Hi Aleksandar,

Thank you for your prompt response.

Not sure to understand what you mean by "get a reference to the upload widget". Do you mean, the inner upload widget used by the editor imageBrowser's instance ? Or another Upload widget, to be defined ? 

 

Best regards,

Laurent.

[Aleksandar]

Hi Laurent,

Apologies for not being clear in my initial response. By "get a reference to the upload widget" I meant exactly the inner upload widget, that is used by the editor imageBrowser's instance. 

I hope this clarifies my initial response.

Regards,
Aleksandar
Progress Telerik

[Laurent]

Hi Aleksandar,

Ok, good, but how to get an handler on the inner upload widget ?

Another point, I would like to make some tests with the dojo on the file image browser demo but it does not work due to a CORS policy issue, any clue ?

 

Best regards,

Laurent.

[Aleksandar]

Hi Laurent,

The code snippet in my previous response shows how to get a reference to the internal Upload widget. In this article you will find additional guidance on how to get a reference to a widget instance.

$("#editor").kendoEditor({ 
...
execute: function(e) {
              setTimeout(function(){
                if(e.name == "insertimage"){
                  var upload = $('[data-role=upload]').getKendoUpload(); //reference to the inner Upload widget
                  upload.setOptions({
                    async:{
                      //set the async configuration as required
                    }
                  })
                }
              },1000)
            }
})

After you get a reference to the editor itself, attach an event handler function to the execute event of the Editor. Then when the "insertimage" command is being executed get a reference to the Upload widget and customize the async configuration options of the widget via the setOptions method. Here you will find a dojo with the suggestion implemented. Upon selecting an image for upload check the headers of the submitted request to verify the updated saveField. Note that the request will fail, as after the update it is not valid for the remote endpoint.

As for the second question regarding CORS policy - could you please provide some additional details on the issue? I tried inserting images from another domain and it works as expected. Make sure the images that you are trying to insert from a different domain the domain has a CORS policy that allows access to the images.

Regards,
Aleksandar
Progress Telerik