javascript - How to decode and upload GIF via AJAX and PHP

Question

I'm currently using Gifshot.js to create user avatars on my site. I want to be able to store the GIF files server side, but am unable to get it to work. The question is how do I properly decode a base64 encoded GIF file, to store via PHP? Also, is there a way to upload the files as incremented numbers, instead of a static name? Here is what I currently have for code:

Javascript:

$("#savegif").click(function(){      
    gifshot.createGIF({
        interval: 0.1,
        numFrames: 25,
    }, function (obj) {
        if (!obj.error) {

            var image = obj.image,
            animatedImage = document.getElementById('animatedgif');
            animatedImage.src = image;

            var data = animatedImage.src;
            $.ajax({ 
                url: "gifsave.php",
                method: "POST",
                dataType: "text",
                data: { data }
            });
        }
    });
});

PHP:

$file = $_POST['data'];
$img = str_replace('data:image/gif;base64,', '', $file);
file_put_contents('images/image.gif', base64_decode($img));

Answer 1

You can POST a Blob representation of file object to server and use php://input and fopen() to get the file contents at php, see Trying to Pass ToDataURL with over 524288 bytes Using Input Type Text.

fetch("gifsave.php", {method:"POST", body:blob})
.then(response => response.ok)
.then(res => console.log(res))
.catch(err => console.error(err));

You can stream the file as chunks to server by converting a Blob to an ArrayBuffer, creating a TypedArray, for example, a Uint8Array, with ArrayBuffer as parameter, and streaming the file to server using WebSocket.