Support dropzone for file uploads

[jacargentina]

My first advance on direction to implement #182 Not finished. Needs adding http://www.dropzonejs.com library for it to work. https://raw.github.com/enyo/dropzone/master/dist/dropzone.js

Any advice or a hand to complete it are very welcome.

[acrobat]

@jacargentina code looks good! Can you provide a jsfiddle example to show this new feature? Also when this PR is merged, create a new PR against the ghpages branch with some docs about this feature!

[jacargentina]

@acrobat Here it is, the missing thing is the URL to post it (i dont know how to make it work with an URL external to the very jsfiddle.net domain)

On my own server it works like a charm!

https://jsfiddle.net/v9ncy741/2/

[jacargentina]

The proof of it working (on my keystonejs local install)

[acrobat]

Thanks for the jsfiddle and gif! @toopay do you have any remarks?

[jacargentina]

@acrobat, @toopay please any news? there is something i can do to make it better?

[toopay]

@jacargentina It doesn't seem to be working, i may be wrong thou. Can you please re-check?

[durden]

I've tested this with PR with my own setup and it mostly works. However, I do get the following error message from dropzonejs: No URL provided. The error comes from this line.

I've done a bit of debugging on my end and seems like my scenario is trying to create two drop zone objects. My setup should only have 1 drop zone element so not sure why this is yet, maybe I'm doing something wrong in the setup. Here's the configuration I'm using to setup the editor:

    var editor = $('#md-editor-ta');
    editor.markdown({
        autofocus: true,
        resize: 'vertical',
        height: 500,
        onPreview: add_article_header_data,
        dropZoneOptions: {
            url: '/img_upload/',
            disablePreview: true
        }
    });

Here's the HTML I'm targeting:

<div class="editor-container">
        <textarea id="md-editor-ta" name="content"></textarea>
</div>

I was able to workaround this error by returning null instead of throwing the No URL provided error. Is this something wrong with the plugin setup?

[durden]

I also noticed the jsfiddle example uses the disablePreview option which is not in the main fork of dropzonejs. I did find this option added in this fork, but it doesn't look like that has been merged into the canonical dropzonejs repo.

[jacargentina]

@toopay: the problem is you are not writing a valid url on the url field. So when droping a file, there is an error when it tries to post it to the given string (not an url). @durden: I can try to help if you post a jsfiddle?

[toopay]

@jacargentina Thanks for your effort!

[acrobat]

:+1: thanks @jacargentina!

[durden]

@jacargentina Let me do a bit more debugging on my end because I'm sure the issue is on my setup. thanks for the offer and I'll let you know if I have trouble with it. Great job on the addition!

[webdevbrian]

I have the same question as @mohammedsuleman, @jacargentina

[jacargentina]

Look at the response to acrobat

[webdevbrian]

Found that out actually an hour later I posted, hadn't updated my comment yet. Thanks!