[Feture request] Add image select button

[tsu1980]

It is nice if this editor has select existing image future on Image Uploader property.

Currently, if you want to use an existing image, you must input the image URL manually.

My idea is here.

unlayer.registerCallback('selectimage', function(done) {
  openImageSelector()
    .selected(function(e) {
      done({
        url: e.publicUrl,
        alternateText: e.alternateText,
      });
    });
});

• If register selectimage callback, Select Image button appears on the Image Uploader property.
• If the user click Select Image button, image selector displayed
• If the user selects some image, the done function called and image URL replaced to selected image URL.
• If the user cancels to select the image, nothing to do

[adeelraza]

@tsu1980 this is a good solution, we are looking into this.

[adeelraza]

@tsu1980 this feature is now available. It would work like this:

unlayer.registerCallback('selectImage', function(data, done) {
  done({ url: imgUrl })
})

[tsu1980]

Thank you for a quick response!

I tried using selectImage callback. I have a few points and questions.

• When I register selectImage callback, Upload image drag here area is disappeared, I would like to use both. Is it possible?
• I think select image button label is wrong, it should be "Select Image" instead of "Upload Image".
• I would appreciate if it can set ALT text too!

Anyway, thank you again for great work!

[robmack]

Thanks for implementing this as well

Our use case, sounds similar to @tsu1980, and we'd like the user to either choose from a file on their system or one from our existing image gallery, so we'd want both options.

I also agree that the button/link should say "Select Image" or "Choose Image" instead of "Upload Image".

Just to give you an idea of what we were hoping for, we had tried to implement this feature inserting HTML into the DOM and were going for something like this:

<div class="blockbuilder-widget-label">
  <label class="blockbuilder-label-primary">
    <span>Image Gallery</span>
  </label>
  <label class="blockbuilder-label-right">
    <button type="button" onClick="CALLBACK HERE" class="btn btn-link btn-sm">
      <span>Choose Image</span>
    </button>
  </label>
</div>

[pmccain226]

Is there going to be any update here? I feel like this is super close and would add alot of value to our users. We simply need to have both options present - not one or the other.

[pmccain226]

Any update here?

[rcreynolds53]

Any update on this?

[arudlang]

Our company is a new customer of Unlayer and we would also like the option to use both scenarios, as robmack and tsu1980 described. The mockup that robmack submitted would be ideal as it would give our users the best of both worlds.

[adeelraza]

Image library is now supported. Check the following docs:

https://docs.unlayer.com/docs/images

[medelmourabite]

Can I get the current image url in the data:

 unlayer.registerCallback('selectImage', (data, done) => {
      let imageUrl = data.url
})

[muzamilar]

@tsu1980 this feature is now available. It would work like this:

unlayer.registerCallback('selectImage', function(data, done) {
  done({ url: imgUrl })
})

@tsu1980 @adeelraza i am not getting registerCallback method in unlayer object. What can be the issue? i also tried to use addEventListener event, but showing same issue.

My unlayer object in console, without registerCallback

React: (...) ReactDND: (...) ReactDOM: (...) createEvent: (...) createPanel: (...) createViewer: (...) createWidget: (...) hidePreview: (...) loadBlank: (...) loadBlocks: (...) loadConfig: (...) loadDesign: (...) loadProject: (...) loadSession: (...) loadStockTemplate: (...) loadTemplate: (...) loadUser: (...) loadUserUploads: (...) registerColumns: (...) registerPropertyEditor: (...) registerTab: (...) registerTool: (...) reloadProvider: (...) setAppearance: (...) setBodyValues: (...) setCustomCSS: (...) setCustomFonts: (...) setCustomJS: (...) setDesignMode: (...) setDesignTags: (...) setDesignTagsConfig: (...) setDisplayConditions: (...) setDisplayMode: (...) setLinkTypes: (...) setLocale: (...) setMergeTags: (...) setMergeTagsConfig: (...) setSpecialLinks: (...) setTranslations: (...) showPreview: (...) startSession: (...) Symbol(Symbol.toStringTag): "Module" __esModule: true get React: ()=>dl._$ get ReactDND: ()=>dl.FB get ReactDOM: ()=>dl.gE get createEvent: ()=>dl.yM get createPanel: ()=>dl.wf get createViewer: ()=>dl.i9 get createWidget: ()=>dl.A4 get hidePreview: ()=>dl.wE get loadBlank: ()=>dl.yW get loadBlocks: ()=>dl.tX get loadConfig: ()=>dl.ME get loadDesign: ()=>dl.$7 get loadProject: ()=>dl.Cb get loadSession: ()=>dl.dF get loadStockTemplate: ()=>dl.LT get loadTemplate: ()=>dl.$k get loadUser: ()=>dl.II get loadUserUploads: ()=>dl.mV get registerColumns: ()=>dl.m get registerPropertyEditor: ()=>dl.Ty get registerTab: ()=>dl.uh get registerTool: ()=>dl.ZD get reloadProvider: ()=>dl.IL get setAppearance: ()=>dl.xt get setBodyValues: ()=>dl.Wn get setCustomCSS: ()=>dl.Ue get setCustomFonts: ()=>dl.kJ get setCustomJS: ()=>dl.Y9 get setDesignMode: ()=>dl.SW get setDesignTags: ()=>dl.gr get setDesignTagsConfig: ()=>dl.kF get setDisplayConditions: ()=>dl.Wg get setDisplayMode: ()=>dl.UC get setLinkTypes: ()=>dl.yh get setLocale: ()=>dl.i get setMergeTags: ()=>dl.pQ get setMergeTagsConfig: ()=>dl.zp get setSpecialLinks: ()=>dl.Cz get setTranslations: ()=>dl.Yh get showPreview: ()=>dl.Bx get startSession: ()=>dl.yj proto: constructor: ƒ Object() hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() toLocaleString: ƒ toLocaleString() toString: ƒ toString() valueOf: ƒ valueOf() defineGetter: ƒ defineGetter() defineSetter: ƒ defineSetter() lookupGetter: ƒ lookupGetter() lookupSetter: ƒ lookupSetter() get proto: ƒ proto() set proto: ƒ proto()

[nsourov]

For react

const onLoad = () => {
    ref.editor.registerCallback('selectImage', () => {
      // console.log('image label disapears')
      const input = document.createElement('input')
      input.setAttribute('type', 'file')
      input.click()
      input.onchange = () => {
        const files = input?.files
        if (!files) return

        const file = files[0]
        // file type is only image.
        if (/^image\//.test(file.type)) {
          // this.sendToServer(file)
          console.log(file)
        } else {
          console.warn('You could only upload images.')
        }
      }
    })
  }

[milicadj2]

Hi :) When I try to select image from my own gallery, as soon as I click on "Upload Image" button, I get this error: "Invalid result passed to selectImage callback. Expected object with url, width, height and size. Received: undefined"

My implementation is the same as in https://examples.unlayer.com/media/custom-media-library/

To me it seems that the problem might be the src value within img tag. It looks like it has to be in a certain format so that the mentioned error is not shown. Regardless of this error, the images from custom gallery are shown and can be selected properly. It seems that everything work fine despite this error message.

How to get prevent displaying of this error?

Btw, I have implemented the unlayer using classic js and html within mvc application .

[brunolemos]

@milicadj2 this issue has been fixed