how to attach a local cropped Image (as blob) using FormData

  • My problem looks quite simple ..

    For an event website I need to grab new speakers profile images – along their company data.

    They usually will attach profile images in various shapes and sizes and there is a lot of work to do after we receive their images, cropping all of them to a standard dimension.

    To solve this problem, I’ve implemented a javascript solution which allow them to crop their profile image to a standard dimension before submitting the form. They use the tool I’ve embedded in CF7 – they crop their profile image – then from html5 <canvas> element I get the correct image blob and I show the cropped picture. The next step is to attach my image blob to the mail using new CF7 adopted FormData.

    my blob how it looks in console : blob:https://localhost/31a63fc2-164c-4527-bcf9-ebe1612b645d1

    in CF7 scripts.js under wpcf7.submit function (around line 190), I’ve created the blob to be attached
    var nBlob = new Blob([croppedBlob], {type : “image/png”, name:croppedBlobName});
    (in console looks like this : [object Blob])

    however, I got a message error in console : TypeError: data is null;
    which is coming from ajaxSuccess function (Scripts.js line 219) – specifically is stops on this line : id: $( data.into ).attr( ‘id’ )…

    Therefore on submit anyway my object is not sent as attachment.

    So the real question is – how we (CF7 users) can send blob objects with contact form 7 – which is the correct procedure ? can we use a WP hook for this case ? or should I save the blob as image locally on a folder (where CF7 can look for .. ) then attach the image to the form ?

  • The topic ‘how to attach a local cropped Image (as blob) using FormData’ is closed to new replies.