Test

media.js

//Helper function for getting the exif data.
function base64ToArrayBuffer (base64) {
    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
    var binaryString = atob(base64);
    var len = binaryString.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}

function readURL(input) {
    for (var i = 0; i < input.files.length; i++) {
        var reader = new FileReader();
        reader['uniqueIdentifier'] = Date.now() + i;
        reader['originalFilename'] = input.files[i].name;
        reader['fileObject']       = input.files[i];

        reader.addEventListener("load", function () {

            $('.image-picker').append(generateTM(this.result, this.uniqueIdentifier));
            //$('.image-picker').append(generatePlaceholder(this.result, this.uniqueIdentifier));
            if (/\.(jpe?g)$/i.test(this.originalFilename)) {
                var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));
                switch(exif.Orientation){
                    case 8:
                        $("#"+this.uniqueIdentifier+" img").css('transform','rotate(-90deg)');
                        break;
                    case 3:
                        $("#"+this.uniqueIdentifier+" img").css('transform','rotate(-180deg)');
                        break;
                    case 6:
                        $("#"+this.uniqueIdentifier+" img").css('transform','rotate(90deg)');
                        break;
                }
            }
            startUpload(this.fileObject, this.uniqueIdentifier);
        }, false);

        reader.readAsDataURL(input.files[i]);
    }
}

$("#imgInp").on('change drop', function(e){
    e.preventDefault();
    if(e.type === 'drop') {
        readURL(e.originalEvent.dataTransfer);
    }
    if(e.type === 'change') {
        readURL(this);
    }
});

function generatePlaceholder(img, uniqueIdentifier) {
    return `
        <div class="placeholder" id="${uniqueIdentifier}">
            <img src="${img}" alt="">
            <div class="image-progress">
                <div class="progress-bar"></div>
            </div>
        </div>
    `;
}

function startUpload(file, uniqueIdentifier) {
    var form = new FormData();
    form.append('file', file);
    form.append('uniqueIdentifier', uniqueIdentifier);
    $.ajax({
        url: '/files',
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    $("#"+uniqueIdentifier+" .progress-bar").css({
                        width: percentComplete * 100 + '%'
                    });
                }
            }, false);
            return xhr;
        },
        method: 'POST',
        beforeSend: function (xhr) {
            var token = $('meta[name="csrf_token"]').attr('content');
            if (token) {
                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
            }
        },
        data: form,
        processData: false,
        contentType: false,
    }).done(function(data){
        $("#"+data.uniqueIdentifier+" .progress-bar").addClass('hide');
        $("#"+data.uniqueIdentifier+" img").css('opacity', 2);
        $("#"+data.uniqueIdentifier).removeClass('media-modal-placeholder')
            .html(generateTModal(data.id, data.file_extension, data.path, data.file_name, data.created_at))
    }).fail(function(data){

    });
}