How do I upload an image to liferay documents and media using javascript

I'm trying to make a form that uploads an image to the document and media library in liferay. Eventually the idea is to make the form bigger but for now i'm testing it out with just the image upload.

I've made an html form with an input type file. In javascript I then try to upload this file using the add-file-entry method which I found in the api/jsonws.

The javascript code:

$('#form').submit(function(event){
event.preventDefault();

var input = document.getElementById("file");
var file = input.value.split("\\");
var fileName = file[file.length-1];

    
Liferay.Service('/dlapp/add-file-entry', {
repositoryId: id,
folderId: 0,
sourceFileName: fileName,
mimeType: "image/jpeg",
title: fileName,
description: "",
changeLog: "",
file: input,
},
function(obj) {

})
});

This seems to only give me the file name, and not the actual picture. Does anyone know how to save the actual image as a variable in javascript? Or is this not possible?