CODEWITHSUNDEEP
javascriptphplaraveldropzone.js
Norgul
Norgul

Reputation: 4783

Dropzone.js show stored images

I am using dropzone.js in my Laravel app to upload and show images on my platform. Storing works fine. I am saving them to database and locally in folder structure which has full_size folder for full images and icon_size for ones which are supposed to fit as a thumbnail (basically a smaller copy of the image).

The issue I'm facing is when I try to show images. This is my dropzone config file:

Dropzone.options.realDropzone = {
  previewsContainer: '#dropzonePreview',
  previewTemplate: document.querySelector('#preview-template').innerHTML,
  addRemoveLinks: true,
  dictRemoveFile: 'Remove',

  // The setting up of the dropzone
  init: function () {

    var myDropzone = this

    $.get('/image', function (data) {

      $.each(data.images, function (key, value) {

        var file = {name: value.original, size: value.size}
        myDropzone.options.addedfile.call(myDropzone, file)
        myDropzone.options.thumbnail.call(myDropzone, file, 'images/icon_size/' + value.server)
        myDropzone.emit('complete', file)
      })
    })

    this.on('removedfile', function (file) {

      $.ajax({
        type: 'POST',
        url: 'image/destroy',
        data: {id: file.name, _token: $('#csrf-token').val()},
        dataType: 'html',
        success: function (data) {
          var rep = JSON.parse(data)
        }
      })

    })
  },
  error: function (file, response) {
    if ($.type(response) === 'string')
      var message = response //dropzone sends it's own error messages in string
    else
      var message = response.message
    file.previewElement.classList.add('dz-error')
    _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
    _results = []
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      node = _ref[_i]
      _results.push(node.textContent = message)
    }
    return _results
  },
  success: function (file, done) {
  }
}

Ajax call on /image works fine and returns instances of images which are in the database

enter image description here

But when each of images is supposed to be included in the view, it is erroring out

enter image description here

The issue I'm facing is that it is erroring out because I am under a /project route since these are images connected to a project. I don't know how to remove that part of the route so that I fetch the pictures directly from my public folder

Upvotes: 0

Views: 4010

Answers (1)

Norgul
Norgul

Reputation: 4783

In case someone encounters same problem, I have solved it by defining explicitly URL for fetching:

myDropzone.options.thumbnail.call(myDropzone, file, "http://" + window.location.hostname + '/images/icon_size/' + value.server)

The http:// part is mandatory, otherwise it just appends it to existing link.

Upvotes: 1

Related Questions