savefield for image upload

6 posts, 0 answers
  1. Laurent
    Laurent avatar
    19 posts
    Member since:
    Apr 2017

    Posted 17 Jan Link to this post

    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.

  2. Aleksandar
    Admin
    Aleksandar avatar
    11 posts

    Posted 21 Jan Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Laurent
    Laurent avatar
    19 posts
    Member since:
    Apr 2017

    Posted 22 Jan in reply to Aleksandar Link to this post

    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.

  4. Aleksandar
    Admin
    Aleksandar avatar
    11 posts

    Posted 23 Jan Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Laurent
    Laurent avatar
    19 posts
    Member since:
    Apr 2017

    Posted 24 Jan in reply to Aleksandar Link to this post

    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.

  6. Aleksandar
    Admin
    Aleksandar avatar
    11 posts

    Posted 28 Jan Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top