Error when when uploading file from OneDrive via AJAX with JQuery

Question

I'm having some trouble with creating a drag and drop file upload interface - it works perfectly for local files, but when I try and drag from OneDrive in Explorer into the 'drop' area, the console reports a net:ERR_FAILED .

Is it not possible to get drag and drop working from non-local files in certain situations? If that's the case, what kind of restrictions apply? iCloud on a mac seems to work fine for example.

The uploader seems to think it is a valid file, but it seems like it can't access it or something.

Just in case it's helpful, here's the relevant bits of code:

function handleFileUpload(files,obj) {
    for (var i = 0; i < files.length; i++) {
        var fd = new FormData();
        fd.append('file', files[i]);    
        status.setFileNameSize(files[i].name,files[i].size);    
        sendFileToServer(fd,status);
    }
}

function sendFileToServer(formData,status){
    num_uploaded_files++;
    checkUploadLimit();
    var uploadURL = "uploader.php?request=upload_file"; //Upload URL
    var jqXHR=$.ajax({
        xhr: function() {
            var xhrobj = $.ajaxSettings.xhr();
            return xhrobj;
        },
        url: uploadURL,
        type: "POST",
        contentType:false,
        processData: false,
        cache: false,
        data: formData, 
        success: function(data, textStatus, jqXHR){
            status.setProcessing();
            response = $.parseJSON(data);
            if(response.success == 1) {
                status.setType(response.file_type);
                status.uploadComplete(response.id,response.file_type,response.new_filename);
                type = response.file_type;
            } else {
                status.setFailure(response.failure_reason);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            status.setFailure(errorThrown);
        }
    }); 
    status.setAbort(jqXHR);
}
$( document ).ajaxError(function( event, jqxhr, settings, thrownError ) {
  console.log('AJAX error');
});

Thank you in advance for any help or advice!

Answer 1

It looks like it was indeed an issue with OneDrive not storing files locally. Here's an example:

In the above example the top file (Available offline) uploaded fine and the one below did not.

As far as I've been able to tell, there is no way to upload an Online-only file via drag and drop (or at least not with code similar to the above method). Instead, you'd need a input type="file" in order to do this (and Windows automatically then downloads the file locally in preparation for the upload).

Users can right click files and choose 'Make available offline', which resolves the issue for those files.

I've tested the same files on Google Drive and the same issue occurs. If Google can't do it, then it's unlikely I will be able to do so, but if anybody else finds a solution please do post your answer below and I'll be very pleased accept that instead.