Readasdataurl() Doesn't Work

I was trying to implement a Drag n' Drop feature in my website. I need to convert the dropped image into Data URI so I can use it with JCrop and upload it after. drop:

Solution 1:

//applies to only one file.
reader.readAsDataURL(files); 

solution:

for(var i=0;i<files.length;i++){
   reader.readAsDataURL(files[i]);
}

Solution 2:

You can try this

HTML

<divid="dropBox"><div>Drop your image here...</div></div>

CSS

#dropBox {
  margin: 15px;
  width: 300px;
  height: 300px;
  border: 5px dashed gray;
  border-radius: 8px;
  background: lightyellow;
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
  }

#dropBoxdiv {
  margin: 100px70px;
  color: orange;
  font-size: 25px;
  font-family: Verdana, Arial, sans-serif;
  } 

JavaScript

var dropBox ;

window.onload = function() 
{
 dropBox = document.getElementById("dropBox");
 dropBox.ondrop = drop;
};

functiondrop(e)
{
  // Get the dragged-in files.var data = e.dataTransfer;
  var files = data.files;

 // Pass them to the file-processing function.processFiles(files);
}

functionprocessFiles(files)
{
  var file = files[0];

 // Create the FileReader.var reader = newFileReader();

 // Tell it what to do when the data URL is ready.
  reader.onload = function (e) 
  {
    // Use the image URL to paint the drop box background
    dropBox.style.backgroundImage = "url('" + e.target.result + "')";
  };

 // Start reading the image.
 reader.readAsDataURL(file);
}

Solution 3:

ForFileReader to read contents of file correctly such word documents and excelsheets, the contentType may also have to be specified :-
The controller class :-
publicclassSagarAttachFile {
    publicString fileName {get;set;}
    publicString fileValue {get;set;}
    publicString contentType {get;set;}
    publicAttachment attachment {
        get {
            if(attachment == null)
                attachment = newAttachment();
            return attachment;
        }
        set;
    }
    publicSagarAttachFile() // Constructor
    {
        fileName = '';
        fileValue = '';
        contentType = '';
    }
    publicPageReferencesaveMethod()
    {
        if(attachment != null && fileName != null && fileName != ''
            && fileValue != null && fileValue != '')
        {        
            try
            {
                attachment.ownerId = UserInfo.getUserId();
                attachment.ParentId = '5002C000006zvjyQAA'; // Attach the uploaded file as an attachment to this Case.
                attachment.Name = fileName;       
                fileValue = EncodingUtil.urlDecode(fileValue, 'UTF-8');
                attachment.Body = EncodingUtil.base64Decode(fileValue);
                attachment.ContentType = contentType;
                insert attachment;
            }
            catch (DMLException e) {
                System.debug(LoggingLevel.INFO, '#### error occurred while adding attachment to case ' + e.getMessage());
            }
            finally
            {
                attachment = newAttachment(); 
            }
        }
        else
        {
            System.debug(LoggingLevel.INFO, '#### no attachment adding to case');
        }
        returnnull;
    }           
}
TheVisualforce page :- browse for by appending this to URL :- apex/SagarAttachFileVF
<apex:page controller="SagarAttachFile">
    <apex:form><apex:actionFunctionname="saveAF"action="{!saveMethod}"reRender="attchFilePanel"><apex:paramassignTo="{!fileName}"value=""name="fileName"/><apex:paramassignTo="{!fileValue}"value=""name="fileValue"/><apex:paramassignTo="{!contentType}"value=""name="contentType"/></apex:actionFunction><apex:pageBlockid="pageBlock1"><apex:outputPanelid="attchFilePanel"><inputtype="file"id="file"name="attFile"/><apex:commandButtonvalue="Save"onclick="javascriptFunc1(); return false;"/></apex:outputPanel></apex:pageBlock></apex:form><script>functionjavascriptFunc1()
    {
        var fileName = null;
        var file1 = document.getElementById('file');   
        if(file1 != null)
        {
            if ('files'in file1)
            {
                if (file1.files.length == 1)
                {
                    alert('one file attached');
                    var file1Obj = file1.files[0];                           
                    if(file1Obj.name != '')
                    {
                        fileName = file1Obj.name;
                    }
                    var reader = newFileReader();
                    reader.onload = function() {
                        alert('reading is done now');
                        var fileContent = reader.result;
                        var base64 = 'base64,';
                        var dataStart = fileContent.indexOf(base64) + base64.length;
                        fileContent = fileContent.substring(dataStart);
                        var encodedFileContent = encodeURIComponent(fileContent);
                        saveAF(fileName, encodedFileContent, file1Obj.type);                        
                    }
                    reader.readAsDataURL(file1Obj);    
                }
                else
                {
                    alert('no file attached');    
                }
            }    
        }
    }
    </script>
</apex:page>