diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2d40d4f8..f801e2f4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,6 +6,8 @@ import { Select } from '@ngxs/store';
 import { NavigationService, LeftPanelType } from './services/navigation.service';
 import { StreamElement } from './states/streams.state';
 import { OpenMediaEvent } from './models/common.model';
+import { ToolsService } from './services/tools.service';
+import { MediaService } from './services/media.service';
 
 @Component({
     selector: 'app-root',
@@ -25,7 +27,10 @@ export class AppComponent implements OnInit, OnDestroy {
 
     @Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
 
-    constructor(private readonly navigationService: NavigationService) {
+    constructor(
+        private readonly toolsService: ToolsService,
+        private readonly mediaService: MediaService,
+        private readonly navigationService: NavigationService) {
     }
 
     ngOnInit(): void {
@@ -65,37 +70,32 @@ export class AppComponent implements OnInit, OnDestroy {
     }
 
     drag: boolean;
-    drag2: boolean;
-    private dragCounter: number = 0;
-
+    // drag2: boolean;
     dragenter(event): boolean {
         event.stopPropagation();
-        event.preventDefault();        
+        event.preventDefault();
         this.drag = true;
         return false;
     }
     dragleave(event): boolean {
         event.stopPropagation();
-        event.preventDefault();        
+        event.preventDefault();
         this.drag = false;
         return false;
     }
-    dragover(event): boolean{
+    dragover(event): boolean {
         event.stopPropagation();
         event.preventDefault();
         return false;
     }
-    drop(event): boolean {
+    drop(event): boolean {     
         event.stopPropagation();
-        event.preventDefault();        
-        
-        let files = event.dataTransfer.files;
-        for(let file of files){
-            console.warn(file.name);
-            console.warn(file);
-        };
-
+        event.preventDefault();
         this.drag = false;
+
+        let files = <File[]>event.dataTransfer.files;
+        const selectedAccount = this.toolsService.getSelectedAccounts()[0];
+        this.mediaService.uploadMedia(files, selectedAccount);
         return false;
     }
 }
diff --git a/src/app/services/media.service.spec.ts b/src/app/services/media.service.spec.ts
new file mode 100644
index 00000000..8a119ece
--- /dev/null
+++ b/src/app/services/media.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MediaService } from './media.service';
+
+describe('MediaService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MediaService = TestBed.get(MediaService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/media.service.ts b/src/app/services/media.service.ts
new file mode 100644
index 00000000..f3deb8ba
--- /dev/null
+++ b/src/app/services/media.service.ts
@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+import { AccountInfo } from '../states/accounts.state';
+import { ApiRoutes } from './models/api.settings';
+import { Attachment } from './models/mastodon.interfaces';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class MediaService {
+    private apiRoutes = new ApiRoutes();
+
+    mediaSubject: BehaviorSubject<MediaWrapper[]> = new BehaviorSubject<MediaWrapper[]>([]);
+
+    constructor(private readonly httpClient: HttpClient) { }
+
+    uploadMedia(files: File[], account: AccountInfo){
+        for (let file of files) {
+            this.postMedia(file, account);
+        }      
+    }
+
+    private postMedia(file: File, account: AccountInfo){
+        const uniqueId = `${file.name}${file.size}${Math.random()}`;
+        const wrapper = new MediaWrapper(uniqueId, file, null);
+
+        let medias = this.mediaSubject.value;
+        medias.push(wrapper);
+        this.mediaSubject.next(medias);
+
+        let input = new FormData();
+        input.append('file', file);
+        const route = `https://${account.instance}${this.apiRoutes.uploadMediaAttachment}`;
+        const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
+        this.httpClient.post(route, input, { headers: headers }).toPromise()
+            .then((attachment: Attachment) => {
+                let currentMedias = this.mediaSubject.value;
+                let currentMedia = currentMedias.filter(x => x.id === uniqueId)[0];
+                if(currentMedia){
+                    currentMedia.attachment = attachment;
+                    this.mediaSubject.next(currentMedias);
+                }
+            })
+            .catch((err)=>{
+                let currentMedias = this.mediaSubject.value;
+                let currentMedia = currentMedias.filter(x => x.id !== uniqueId);
+                this.mediaSubject.next(currentMedia);
+
+                //TODO: notify
+            });
+    }
+}
+
+export class MediaWrapper {
+    constructor(
+        public id: string,
+        public file: File, 
+        public attachment: Attachment) {}
+}