Save to server via $_POST or $_FILE

[hero4th]

I apologize in advance, I´m a noob.

When you retrieve the finished gif with 'createObjectURL(blob)', how can you save it to a gif in your SERVER? Do you have to change the blobURL to dataURL through ajax or can you use a html5 form? Is there a simple way of getting a .gif file (other than right clicking the image)?

Thanks for any help you can give and for your time. Cheers

[1j01]

Disclamer: I've never done this before and don't even work on this project or anything. :smiley_cat: The blob URL is just a local way of accessing the blob (file), so it wouldn't be transferable to the server. The blob object holds the data of the file. Ideally you'll want to upload the blob itself. It would be less efficient to convert it to a data url and send it as text and decode it on the server, but sometimes it does seem easier. I hope this helps a little bit. If you need more help, be sure to mention what backend you're using (PHP, by the $look of it) and if you're using a library like jQuery.

[hero4th]

Pretty accurate 1j01, I´m using PHP and JQuery, sorry for not sharing it earlier. So far I´ve been able to make it work with data url conversion, but I also think I´m “wasting” resources.
I read the post you suggested (thank you for that), my current problem right now from that post is that I´m not that familiar with ajax (not that is going to stop me). I would appreciate if you could answer my next question. I understand this from the post you suggested:

var gif = new GIF();
gif.append('fname', 'gif_to_upload.gif');
gif.append('data', image/gif);
$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: gif,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});

So… I guess the upload.php file receives the $_POST and does all the processing, sorry now I have two questions: does the upload.php file has a special structure to work with ajax or just a regular .php? and the second: does the upload.php returns something to tell ajax that the upload was succesfull?

Thank you for sharing your knowledge and your time :+1:

[1j01]

Disclaimer 2: I also don't use PHP :smile_cat: I can help with the client-side code, though. The GIF class isn't interchangable with FormData. The code should look something like this, using the blob object from the 'finished' event callback:

var gif = new GIF();

gif.on('finished', function(blob) {

    var formData = new FormData();
    formData.append('fname', 'gif_to_upload.gif');
    formData.append('data', blob);

    $.ajax({
        type: 'POST',
        url: '/upload.php',
        data: formData,
        processData: false,
        contentType: false
    }).done(function(data) {
        // hopefully data contains output from the php script
        console.log(data);

        if(data.match(/success/)){
            console.log("Yay!");
        }else{
            console.log("Hmm...");
        }
    }).fail(function(){
        console.log("Failed to make upload request");
    });

});

//...
gif.render();

The PHP script shouldn't need anything special for ajax. The ajax request should be essentially equivalent to the post of a form, so you should be able to handle it like that, however that is in PHP. The PHP script should be able to return error/success messages for POST requests just like it can for GET requests.

I started to look at the PHP side of things and I really shouldn't, but this looks helpful in uploading images, maybe if you replace occurences of upfile with data to match the field appended to the FormData... get rid of png/jpeg allowance... I don't know. Anyways, good luck!

[hero4th]

Thank you very much for all your help, I really appreciate it and for answering so quickly.

Oh if is a regular php script, I know how to manage it, also thanks for pointing out the uninterchangability (I don´t know if that´s a word) of GIF and FORMDATA.

I think with this guidance I´ll be able to get it to work, I´ll share my work here for future references when I´m finished. Thanks :+1: