js/myaction.js
/* Should only call this function after validateImage has checked 
image file. Call this function to upload an image and a description to 
querydata.php to handle. 
NOTE: the image from an <input> needs to be scanned into the browser first,
then an ajax call is sent to querydata to parse & decode the file. Then it's
copied by value into the db. This could be made more efficient but I couldn't.
To any future devs feel free to simplify this process from
html(input)->js(FileReader)->ajax(FormData)->php(base64_decode)->mysql(longblob)
*/
Should only call this function after validateImage has checked
image file. Call this function to upload an image and a description to
querydata.php to handle.
NOTE: the image from an  needs to be scanned into the browser first,
then an ajax call is sent to querydata to parse & decode the file. Then it's
copied by value into the db. This could be made more efficient but I couldn't.
Should only call this function after validateImage has checked image file . Call this function to upload an image and a description to querydata . php to handle . NOTE : the image from an needs to be scanned into the browser first then an ajax call is sent to querydata to parse & decode the file . Then it ' s copied by value into the db . This could be made more efficient but I couldn ' t .
function uploadImage() {
    var imageHtml = document.getElementById('imageToUpload').files[0];
    var descriptionContent = document.getElementById('imageDescription').value;
    var formData = new FormData();
    var reader = new FileReader();
    reader.onload = function(){
        var imageContent = reader.result;
        formData.append('QueryData', 'saveUploadedImage');
        formData.append("image", imageContent);
        formData.append("description", descriptionContent);
        $.ajax({
            type: "POST",
            url: "/querydata.php",
            success: function (data) {
                console.log("img upload success");
                console.log(data);
                $("#uploadSuccessButton").click();
            },
            error: function (error) {
                console.log("fail");
                console.log(error);
            },
            async: true,
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            timeout: 60000
        });
    }
    reader.readAsDataURL(imageHtml);
}
function uploadImage ( ) { var imageHtml = document . getElementById ( 'imageToUpload' ) . files [ 0 ] ; var descriptionContent = document . getElementById ( 'imageDescription' ) . value ; var formData = new FormData ( ) ; var reader = new FileReader ( ) ; reader . onload = function ( ) { var imageContent = reader . result ; formData . append ( 'QueryData' , 'saveUploadedImage' ) ; formData . append ( "image" , imageContent ) ; formData . append ( "description" , descriptionContent ) ; $ . ajax ( { type : "POST" , url : "/querydata.php" , success : function ( data ) { console . log ( "img upload success" ) ; console . log ( data ) ; $ ( "#uploadSuccessButton" ) . click ( ) ; } , error : function ( error ) { console . log ( "fail" ) ; console . log ( error ) ; } , async : true , data : formData , cache : false , contentType : false , processData : false , timeout : 60000 } ) ; } reader . readAsDataURL ( imageHtml ) ; }
Should only call this function after validateImage has checked
image file.
Should only call this function after validateImage has checked image file .
// reader.readAsBinaryString(imageHtml); doesnt decode properly on php side