In Html How do I transfer local file to server with Ajax

Question

I have javascript code that allows user to drag and drop a image from either another webpage or their desktop so display on my webpage, then I have ajax code (sendFormData())that can transfer the image to server if it was from another webpage.

What I have not done is the transfer the image when it was a local file to the server, I do not know how to do it, this is my Javascript

Basically I have a file object from e.dataTransfer.files[0], but how do I transfer its contents to the server in the sendFormData() method (BTW there is no longer actually a form don't let the function name mislead you)

dropzone.ondragover
    = function ondragover(e)
    {
        e.preventDefault();
        dropzone.classList.add('dragover');
    };

dropzone.ondrop
    = function ondrop(e)
    {
        e.preventDefault();
        dropzone.classList.remove('dragover');

        // try to get images from this dropevent
        img = retrieveImageData(e.dataTransfer);
        if (!img)
        {
            return;
        }
        res.src=img.element.src;
    };

dropzone.ondragexit
    = function(ondragexit)
    {
        dropzone.classList.remove('dragover');
    };

/**
Get Data from latest user drop
*/
function retrieveImageData(dataTransfer)
{
    // first try to get Files
    var img = getFile(dataTransfer);
    if (img!=null)
    {
        return img;
    }

    // if none, try to get HTMLImage or SVGImage
    var elems = getHTMLMarkup(dataTransfer);
    if (elems && elems.length)
    {
        return elems[0];
    }
    // we could also try to getData('text/plain') hoping for an url
    // but this might not be such a good idea...
    console.warn('unable to retrieve any image in dropped data');
}

/** User has drag/dropped a local file, if they try and drop more than one we just take the first one
*/
function getFile(dataTransfer)
{
    if (dataTransfer.files && dataTransfer.files.length)
    {
        // only Image Files
        if (dataTransfer.files[0].type.indexOf('image/') === 0)
        {
            imgObj =
            {
                type: 'file',
                element: new Image(),
                file: dataTransfer.files[0]
            };
            imgObj.element.src = URL.createObjectURL(imgObj.file);
            return imgObj;
        }
    }
}

/**
Dragged an image from another webpage

NOTE DO NOT TRY TO REFORMAT SEEMS TO BREAK IT
*/
function getHTMLMarkup(dT)
{
    var markup = dT.getData('text/html');
    if (markup)
    {
        var doc = new DOMParser().parseFromString(markup, 'text/html');
        var imgs = doc && doc.querySelectorAll('img,image') ||  [];
        imgs.forEach(toImageObject);
        return Array.prototype.map.call(imgs, toImageObject);
    }

  function toImageObject(element) {
    var img;
    if (element instanceof SVGImageElement) {
      img = new Image();
      img.src = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href') ||
        element.getAttribute('href');
    } else {
      img = document.adoptNode(element);
    }
    return {
      type: 'element',
      element: img
    };
  }
}

// Once we got everything, time to retrieve our objects
function sendData()
{
    if(img.type == 'file')
    {
        sendFormData(img.file);
    }
    else if(img.type == 'element')
    {
        sendFormData(img.element.src);
    }
};

function sendFormData(data)
{
    console.log('Data', data);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200)
        {
            var check       = document.getElementById("ARTWORK_TABLE").querySelectorAll("input[type='checkbox']")
            var images      = document.getElementById("ARTWORK_TABLE").getElementsByTagName("img");
            var imglabel    = document.getElementById("ARTWORK_TABLE").getElementsByClassName("imglabel");
            var hidden      = document.getElementById("ARTWORK_TABLE").querySelectorAll("input[type='hidden']")

            if(xhr.responseText.length > 0)
            {
                var response = JSON.parse(xhr.responseText);
                for (var i = 0; i < check.length; i++)
                {
                    if(check[i].checked==true)
                    {
                        images[i].src   = "images/" + response.path + "_thumbnail.jpg";
                        images[i].title = response.dim;
                        imglabel[i].textContent = response.dim;
                        hidden[i].value = response.path;
                    }
                }
            }
        }
    };

    xhr.open('POST', '/editsongs.update_artwork', true);
    xhr.setRequestHeader("Content-type", "text/plain");
    xhr.send(data);
}

Answer 1

make changes to your function sendData() inside if condition if(img.type == 'file') as

if(img.type == 'file'){  
    reader = new FileReader();  
    reader.addEventListener('load',function (){  
        sendFormData(reader.result);  
    }, false);  
    reader.readAsDataURL(img.file);  
}

c. in your server code (this is by the way .NET - c#) - ashx handler

HttpPostedFile inputFile = HttpContext.Current.Request.Files["strinputfile"];