New Sample Repo for Web: Image Editor + Drag & Drop API

Posted on Monday, May 16th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

Creative SDK Image Editor sample app repo with Drag and Drop API
Hi Web developers! We’re exited to announce a new sample repo that integrates both the Creative SDK Image Editor for Web and the HTML Drag and Drop API.

Even better, it features the first contributions from our GitHub community (more on that below).

Contents

Overview of the repo

This repo is a basic example written in jQuery. It integrates both the Creative SDK Image Editor and the HTML Drag and Drop API.

If you’re looking specifically for the Drag and Drop implementation, see the index.js file where we listen for Drag and Drop-related events:

// `dropArea` is a jQuery object for an HTML `div` element
dropArea.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    if (e.preventDefault) e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 
})
// ...
.on('drop', function(e) {

    // Get the dropped file
    var file = e.originalEvent.dataTransfer.files[0];

    validateFileType(file);

});

That .on('drop', ...) call is where the magic starts: we get the file and pass it to our own validateFileType() helper method.

Have a look at that helper method to see what happens from there.


Sidenote:

If you’re wondering what .originalEvent is in the code above: our event e in the callback function is a jQuery event. We have to go to the original JavaScript event to access the .dataTransfer property, where the dropped file lives.

jQuery events let us do this via the .originalEvent property. If this sample repo were written in vanilla JavaScript, you could write that line as e.dataTransfer.files[0].

You can read more about the jQuery event object in the jQuery docs.

Community contributions

We’d like to thank our first GitHub community contributors for the code they’ve submitted to this sample app!

We’ll post again pretty soon about how you can contribute to this sample app too. Stay tuned!

Try it live or fork the repo

You can try a live demo of this repo on its GitHub project page.

Want to fork the repo and try it yourself? Head over to GitHub to fork, and be sure to read the readme for setup instructions!

More repos

Want more repos for Web, iOS, and Android?

We offer more sample repos for all three platforms. Have a look at our GitHub organization’s table of contents.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.