![image-editor.png](https://cdn.steemitimages.com/DQmexrE35uk8rQeynXZ1T4aGcG4EbBnjiarHGwe3u9DMRQ8/image-editor.png)

# Repository

### Electron GitHub Address
https://github.com/electron/electron

### My GitHub Address
https://github.com/pckurdu

### This Project GitHub Address
https://github.com/pckurdu/Image-Editor-Application-With-Electron-Part-3

# What Will I Learn?

- You will learn `drop and drag` events in electron.
- You will learn `addEventListener()` function.
- You will learn `preventDefault()` and `stopPropagation()` functions.
- You will learn how to create and use angularjs service.
- You will learn to use the `ng-src` feature.

# Requirements

- basic electronjs knowledge
- basic css knowledge
- basic angularjs knowledge
- <a href="https://atom.io/">Atom Editor</a>

# Difficulty

- Intermediate

# Tutorial Contents

In previous tutorials, I had shown the `showOpenDialog` method of getting images, and mentioned the `drag and drop` method.

In this tutorial I'll show you how to drag and drop in an electron application and I will also develop the `edit.html` page so that the selected image is displayed in the application.

We selected the `selectCtrl` controller to select the image. Since the drag and drop method is actually an image selection task, we have to perform drag and drop operations in `selectCtrl`.

I have defined editCtrl in `config()` for the image editing process. The selected image must be in editCtrl.

We can provide data from one controller to another using angularjs services.

In this tutorial you will learn how to create and use angularjs service.

Let's start coding

I will divide the tutorial into three parts:

- drag and drop operations
- custom service creation
- editCtrl and edit.html page coding

I will perform the operations step by step. So you can learn better.

### Drag and Drop Operations

We can apply drag and drop operations with our electron applications.

In html, drag and drop operations are performed by default, but this is not an operation we want because each file is drag and drop.

We have to override this feature in html because we want to drag and drop the just image files.

Then we can listen to the drag and drop events of an element we want on the select.html page using the `addEventListener()` method.

__addEventListener()__ is used to listen to the selected event of the html elements and to control when that event occurs.

I will select the `imageSelector` element and listen to the `drop` event.

In selectCtrl
```
var dragFile= document.getElementById("imageSelector");//I choose the imageSelector element
dragFile.addEventListener('drop', function (e) {//I listen to the drop event.
        // drop operations will come.
});
```
<br>
We are now listening for the drop event on the `imageSelector`.

The first thing we have to do is to remove and stop the current events of this element because we do not want the default drop event in the html element to work.

With __e.preventDefault()__ method, we can remove the current events of an element.

With __e.stopPropagation()__ method use to stop the events of the current element and all its child element.
```
dragFile.addEventListener('drop', function (e) {//I listen to the drop event.
      e.preventDefault();//prevent the current events of the element
      e.stopPropagation();//stop all events of the present element.
});
```
<br>
So in the drop event only our code will work.

When the drop event is triggered, the callback function gets the result `e` variable.

Let's examine what kind of information this variable e contains.
```
console.log(e);
```
<br>
![electron1.JPG](https://cdn.steemitimages.com/DQmexiJrB7sNUSjjBdoEML4JvA1HDmfy6PMChYbRyumX6T9/electron1.JPG)
<br>
We only need to access the `dataTransfer.files` object to access the file being dragged here.

I have to handle it in the for loop to access each of these files, as multiple files can be dragged.
```
for (let f of e.dataTransfer.files) { //I am accessing the dropped file.
        console.log(f);
}
```
<br>
![electron2.JPG](https://cdn.steemitimages.com/DQmaiiSDnjjy8vzBzmuTKUKqDqdzjFWqa63Zh5QBzRpCEPo/electron2.JPG)
<br>
We can learn `the name`, `the path`, `the size` and `the type` of the file when we examine the object `f`.

We can perform a check to let the application just drag and drop the image files.
```
for (let f of e.dataTransfer.files) {//I am accessing the dropped file.
        console.log(f);
        //image/jpeg  image/png
        if(f.type=="image/jpeg"||f.type=="image/png"){
            $location.path('/edit');
            $scope.$apply();
        }
      }
```
<br>
We redirect the page to the edit.html page and run the `$apply()` method.

We need to deal with the `dragover` event after we have done the drop event because when the drag operation finishes, the element's events start to work and may not be directed to the page we want.
```
dragFile.addEventListener('dragover', function (e) {
      e.preventDefault();
      e.stopPropagation();
    });
```
<br>
So you can select the image with the drag and drop operation and the dialog with the application.

### Custom Service Creation

We can create angularjs service to move the data to another controller.

We can create a service from the `app` object. In this service, we need functions that perform get and set operations.

After defining these functions, we can move the data in the controller by using the functions of this service, before this service needs to be defined for the controller.

Let's start by creating a service that carries the data.
```
app.service('imageService',function(){
	// get and set functions will come
})
```
<br>
We use the `service()` method to create the service and we define the name of the service as the first parameter. We will need name in the future for use this service.

It is enough to know it's way for carry the picture.
```
app.service('imageService',function(){
    var imagePath="";

    this.setImagePath=function(path){//set image
        imagePath=path;
    }

    this.getImagePath=function(){//get image
        return imagePath;
    }
});
```
<br>
I define a local variable to hold the path to the image.

I pass this local variable image path with the named function `setImagePath()` which I created to use in the controller that I obtained from the image path.

I pass this local variable to the controller that wants to access the image path with the help of the `getImagePath()` function.

I can use my service in the controller.
```
app.controller('selectCtrl',function($scope,$location,imageService){
…
for (let f of e.dataTransfer.files) {//I am accessing the dropped file.
        //image/jpeg  image/png
        if(f.type=="image/jpeg"||f.type=="image/png"){
            …
            imageService.setImagePath(f.path);
        }
      }
…
$scope.imageSelect=function(){
…

    dialog.showOpenDialog({
        …
                imageService.setImagePath(path);
            }
        })
    }
```
<br>
I am introducing the controller controller first while creating the controller, and then I use the `setImagePath(path)` function for both the drag and drop event and the `showOpenDialog()` method.

If you use this service in `editCtrl` and use the necessary function, you will get data communication between controller.

### editCtrl and edit.html page coding

We can now create the `edit.html` page.

For now I will only display the selected file on this page.

We already gave the command to view the `edit.html` page when the image was selected for the application.

Then I will display the image when the page is opened.

In edit.html
```
<div id="imageEditor">
    <div id="preview">
        < img ng-src="{{imagePath}}"/>
    </div>
</div>
```
<br>
Where we will use the `img` element to represent the image.

We can access the path of the image by using the `ng-src` property. We can also define the `imagePath` variable in `editCtrl`.
```
app.controller('editCtrl',function($scope,imageService){
    $scope.imagePath=imageService.getImagePath();
});
```
<br>
`imagePath` variable was passed through the service to the image path.
![ezgif.com-crop(1).gif](https://cdn.steemitimages.com/DQmTHv6GLs858ci88AUUaG8hX7E3jk917RHTaEZQ4Wf4k2t/ezgif.com-crop(1).gif)
<br>

# Curriculum

<a href="https://steemit.com/utopian-io/@pckurdu/image-editor-application-with-electron-part-1">Image Editor Application With Electron(Part-1)</a>

<a href="https://steemit.com/utopian-io/@pckurdu/image-editor-application-with-electron-part-2">Image Editor Application With Electron(Part-2)</a>

# Proof of Work Done

https://github.com/pckurdu/Image-Editor-Application-With-Electron-Part-3