Даже так, то что у вас творится на странице по ссылке вы считаете нормальным рабочим процессом?
Зачем предлагаю? Может я и не прав, но вы не понимаете много, либо пытаетесь решать все методом научного тыка. Вот простой пример, я пишу примером как отправить файл ajax:
var data = new FormData();
data.append(argument_1, argument_2);
вы повторяете это так:
data.append(argument_1, argument_2, argument_3);
Да, метод .append() может принимать три аргумента. Но если вы так пишите в коде своем, значит вы даже не представляете чем это чревато.
Ваш код не есть нечто бесценное, drag&drop не работает, выбрать традиционно тоже нельзя, то есть поведение страницы при попытке загрузить файл поставит в ступор любого вашего пользователя. И к этому прикручивать?
Поэтому и предлагаю - возьмите готовое, и всего-то потребуется прочесть как подключить. Все. А навести красоту вам нужную, так это как хотите.
PS.
я разобраться в этом хочу. Хорошо, но надо разбираться, а не тыкать бездумно, и начать с простого - отправить файл традиционно выбрав его в диалоге. Как это сделать примеры были.
Далее сделать предпросмотр выбранного для загрузки, что можно сделать посредством FileReader, и таковое в вашем коде есть. Разобрались, поняли как работает, то есть не будет возникать вопросов как это можно "прикрутить" к любой ситуации. А потом таинство перетаскивания, а я давал ссылку, где можно об этом все расжованное прочесть,
читайте.