How To Encode file into base64 in upload form

Question

I'm making edit form and i stuck on file upload. I want to make output with key like

new_files[0][format]:pdf
new_files[0][name]:1T5WZ9S_Aleydin.pdf
new_files[0][file]:JVBERi0xLjQNCiWys7S1DQolR2VuZXJhdGVkIGJ5IEV4cGVydFBkZiB2OS4xLjMNCjEgMCBvYmoNCjw8DQovVHlwZSAvQ2F0YWxvZw0KL1BhZ2VNb2RlIC9Vc2VOb25lDQovMizLOkjKt62VsTvdDlztlA93atwNRrIqyhHHyJFvkebGs8mqWJdm
= (Base64)

And right now im getting like

name: "1T5WZ9S_Aleydin.pdf"
size: 0
type: "application/pdf"

this is part of my file input part

        <div class="app-basic-form-file-drop" data-type="Offer Confirmation">
        <label class="orange">Offer Confirmation:</label>
        <div class="app-basic-form-file-drop-area">
                <div class="form-file-drop-header">
                        <div class="app-add-button">Add Files</div>
                </div>
                <div class="form-file-drop-icon" onClick="$(this).parent().siblings('.file-drop-click').click()">
                        <div class="form-file-icon"></div>
                        <div class="clear"></div>
                        <label>Select Files</label>
                </div>
        </div>
        <input type="file" multiple="true" name="file[]" class="file-drop-click" style="display: block;">
    </div>

i'm submitting with ajax datatype Json with Codeigniter upload library.

And i want to upload doc and pdf type files.

UPDATE :

So i write function for this

    public function write($file, $box = true) 
{
    $filename = $file["filename"];
    $dir = $file["dir"];
    $base64 = $file["file"];
    $format = $file["format"];
    $path = "files/{$dir}/" . $filename; 

    // Write file
    $document_file = fopen($path, "w");
    fwrite($document_file, base64_decode($base64));

    // Close file
    fclose($document_file);

    // Generate HTML
    if($box) 
    {
        $html_filename = str_replace($format, ".html", $filename);
        $c_file = $this->convert_file($path, $html_filename, $dir);

        $file["document_id"] = $c_file["document_id"];
        $file["converted"] = $c_file["converted"];
        if($file["converted"] == 1)
            $file["html_filename"] = $html_filename;

    }
    return $file;
}

So now im asking how to get file dir in upload.

Answer 1

i can show you a demo you can implement as per your need ... HTML

JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

Answer 2

You can try to get the information in this way:

$new_files = array();
foreach ($_FILES['file']['name'] as $key => $name) {
     $new_files[] = array (
         'file' => base64_encode(file_get_contents($_FILES["file"]["tmp_name"][$key])),
         'name' => $name,
         'format' => end((explode(".", $name)))
}