0

I'm trying to implement the profile picture change, saving the new one on my postgres db, to do it I pass the data to php with ajax, but if I put the ajax call into the change function it gives me these errors:

jquery-1.11.0.min.js:4 Uncaught TypeError: Illegal invocation

And:

Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation

The logic I'm using is: Set the new preview profile image, and then call ajax that pass the new image to php to insert it also into the db to store it. This is my script:

/* change profile picture */ 
    $(document).ready(function() {
        $("#profilepic__image").click(function(e) {
            $("#imageUpload").click();
        });

        $("#profilepic__content").click(function(e) {
            $("#imageUpload").click();
        });

        function fasterPreview( uploader ) {
            if ( uploader.files && uploader.files[0] ){
                $('#profilepic__image').attr('src', window.URL.createObjectURL(uploader.files[0]) );
            }
        }

        $('#imageUpload').on('click', function (){
            fasterPreview( this );
            $('#imageUpload').trigger('change');
            ajaxCall( this );
        });

        function ajaxCall(uploader) {
            if ( uploader.files && uploader.files[0] ) {
                $(document).ready(function(){  
                    $.ajax({
                        url: "saveNewProfileImg.php", 
                        method: "post", 
                        data: { "input": uploader.files[0], "key":email},  
                        success: function(result){
                            console.log('Image update succ');
                        },
                        error: function() {
                            console.log('Image update err');
                        } 
                    });
                });
            }
        }
    });

If I remove the ajax call it works fine but obv it doesn't call php so it doesn't works the db insert. Searching the possible fix I tried to do use .on function instead of change, or also .live, but both cases not worked. I don't know if this is the correct way to do it, I'm learning.

If html is needed:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title></title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Bootstrap icons-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="style.css" rel="stylesheet"/>
    <link href="all.css" rel="stylesheet"/>
    <link href="all.min.css" rel="stylesheet"/>
</head>
<body class="act-home">
    <div class="main-content">
        <div class="home-container">

            <div class="profile-container">
                <div class="banner-profile-container">
                    <div class="profilepic-name-container">
                        <img class="profilepic__image" id="profilepic__image" src="../media/profilepic.jpg" style="border-radius: 55px;" width="150px" height="150px" alt="">
                        <div class="profilepic__content" id="profilepic__content">
                            <img src="../media/cameraiconprofile.png" class="profilepic__icon" id="profileImage"></span>
                            <span class="profilepic__text">Edit Image</span>
                        </div>
                        <input id="imageUpload" type="file" name="profile_photo" placeholder="Photo" required="" capture>
                        <span class="banner-username">Shibaka</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</body>
C-Gian
  • 62
  • 2
  • 19
  • 1. To upload an image you need a formdata element. 2. I do not see any jQuery loaded in the HTML. 3. $(document).ready(function(){ does not belong in a function. It should wrap all your event handlers. 4. jQuery is now way past version 3. Please update to at least 3.6. – mplungjan May 08 '22 at 11:51
  • Fixed the jquery version and the $document wrapping the event handlers, I don't know what is formdata, I don't use a form in the html – C-Gian May 08 '22 at 15:02
  • You need formdata object to upload an image using Ajax- see the dupe or look it up: `Ajax jQuery image upload` – mplungjan May 08 '22 at 15:05
  • ok but I don't use ajax to upload the image, I need it to pass the uploaded image to php to insert into db – C-Gian May 08 '22 at 15:14
  • So Ajaxcall is not ajax??? – mplungjan May 08 '22 at 16:24
  • yes it is but to send data to php! I don't know if you mean this for "upload image" I'm learning these things – C-Gian May 08 '22 at 16:32
  • You upload data to a server. You use Ajax to do so. Ajax needs a formdata object to pass a file. Use the example in the dupe I closed the question with – mplungjan May 08 '22 at 18:07

0 Answers0