upload big file to server by javascript

Question

What is the best way for upload any type of Gigabyte File (such as: video,audio,image,document) to php server when using javascript and ajax?

send file as chunked blob?

Or first convert blob to ArrayBuffer then send to php?

how to merg file in Server Side when send file as ArrayBuffer ?

file to blob function :

function sliceFile(file, chunksAmount) {
var byteIndex = 0;
var chunks = [];
for (var i = 0; i < chunksAmount; i += 1) {
var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1));
chunks.push(file.slice(byteIndex, byteEnd));
byteIndex += (byteEnd - byteIndex);
}

return chunks;

}

send as ArrayBuffer function :

function sendChunkFile(chunksArray,filename){
var slice_chunk = chunksArray.shift();
var reader = new FileReader();
reader.onload = function(event){
        var fd = new FormData();
        fd.append('filename', filename);
        fd.append('data', event.target.result);
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            if(chunksArray.length){
            sendChunkFile(chunksArray,filename)
            }
        });
    };      
    reader.readAsArrayBuffer(slice_chunk);
}

score 1 · Answer 1 · answered Jun 04 '20 at 08:00

In Client side :

STEP 1 :

Make Blob slice:

slice Function

function slice(file, start, end) {
 var slice = file.mozSlice ? file.mozSlice :
          file.webkitSlice ? file.webkitSlice :
          file.slice;

 return slice.bind(file)(start, end);
}

File Slicer

 function sliceFile(file, chunksAmount, mimetype) {
 var byteIndex = 0;
 var chunks = [];

 for (var i = 0; i < chunksAmount; i += 1) {
var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1));
chunks.push( new Blob([slice(file, byteIndex, byteEnd)], {
type: mimetype
  }));

   byteIndex += (byteEnd - byteIndex);
}

  return chunks;
}

File Slicer Helper

function chunksAmount(size){
const BYTES_PER_CHUNK = ((1024 * 1024)*5); //5MB chunk sizes.
return Math.ceil(size / BYTES_PER_CHUNK);
}

Get Blob

var file = self.get(0).files.item(0); //files[0];
var chunks = chunksAmount(file.size);
var blobChunksArray = sliceFile(file,chunks,file.type);

STEP 2 :

Send Blob to server side :

Send Function

function sendChunkFile(chunksArray,filename){
var slice_chunk = chunksArray.shift();

    var fd = new FormData();
    fd.append('chunksupload',true);
    fd.append('filename', filename);
    fd.append('data', slice_chunk);
    if(chunksArray.length){
    fd.append('chunksend',false);
    }else{
    fd.append('chunksend',true);
    }
    $.ajax({
        type: 'POST',
        url: 'upload.php',
        data: fd,
        processData: false,
        contentType: false
    }).done(function(data) {
        if(chunksArray.length){
        sendChunkFile2(chunksArray,filename)
        }else{
        console.log(JSON.stringify(data));
        }
    });

}

STEP 3:

Handle Blob to server side by PHP

<?php
if(isset($_POST['chunksupload'])){

file_put_contents($_POST['filename'], file_get_contents($_FILES['data']['tmp_name']), FILE_APPEND | LOCK_EX);

if($_POST['chunksend']){
    echo json_encode(["url"=>"path-to-file/".$_POST['filename'],"size"=>filesize($_POST['filename']) . " bytes"]);
}else{
    return true;
}
}
return false;

upload big file to server by javascript

1 Answers1