Provide the source URL for images dropped in a dropzone field

[btrumsey]

My application requires that I track the original source of images that users add to the site through a dropzone field. This is not natively supported by Backpack or the dropzone component, but I did find that it is quite easy to implement and thought it might be a nice feature to add to Backpack. My implementation is as follows:

Add a new hidden field to the dropzone.blade.php file:

<div
        class="dropzone dropzone-target {{ $disabled ? 'disabled' : '' }} {{ $readonly ? 'readonly' : '' }}"
        data-config="{{json_encode($field['configuration'])}}"
        data-init-function="bpFieldInitDropzoneElement"
        data-name="{{ $field['name'] }}"
        data-server-files="{{ $field['server_files'] ?? '' }}"
        data-form-operation="{{ $crud->get('dropzone.formOperation') }}"
        data-temp-upload-folder-name="{{ $temporaryDirectory }}"
        data-is-dropzone-active="{{ var_export(($disabled || $readonly) ? false : true) }}">
        <div class="dz-message">
            <button class="dz-button" type="button">{!! trans('backpack/pro::dropzone.click_or_drop_files') !!}</button>
        </div>
</div>
<input type="hidden" name="image-src-url" value="">

The image source URL can then be inserted into this hidden field with the following Javascript (also added to the dropzone.blade.php file):

 if (!$dropzoneConfig.drop) {
      $dropzoneConfig.drop = function (e) {
          imageSourceUrl = e.dataTransfer.getData('text/html');
          $("input[name='image-src-url']").val(imageSourceUrl);
          if (typeof addImageSource !== 'undefined' && typeof addImageSource === 'function')
              addImageSource(imageSourceUrl);
      }
}

I also have a callback function, addImageSource, that is called when an image is dropped to dynamically update the page with the source information. This should be implemented as an optional callback property on the dropzone field... just been too lazy to go the last mile and implement that part properly.

[karandatwani92]

Hey @btrumsey

What do you mean by image source? A few example values would help to understand the need.

[btrumsey]

By image source I mean the URL of the image when it is dragged and dropped from a website. BTW, I now realize that the implementation I have above will only work for a single dropzone field on the page. To support multiple dropzones the field name would need to added to the name of the <input> tag.