Form with two images is saving both with same content as first in PHP

47 Views Asked by At

I am trying to use a form with two images, and then download both images to local when submitted the form. But both images are downloaded as the same image.

In HTML I have this fields:

<img src="data:image/jpeg;base64,UklGRoog..." id="foto_muestra__url_val">
<img src="data:image/jpeg;base64,/9j/4AAQ..." id="foto_monton__url_val">

Then I have this JS Called when Form Submitted:

    var selectFotoMonton = document.getElementById("foto_monton__url_val");
    var selectedFotoMonton_url = selectFotoMonton.src;
    
    var selectFotoMuestra = document.getElementById("foto_muestra__url_val");
    var selectedFotoMuestra_url = selectFotoMuestra.src;

    $.ajax({
            type: "POST",
            url: "procesos/procesar_imagenes.php",
            data: {
                encodedFotoMuestra: encodeURIComponent(selectedFotoMuestra_url),
                encodedFotoMonton: encodeURIComponent(selectedFotoMonton_url)
            },
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            done: function(data){
                //uniqid_code_ = data.responseText;
            },
            success: function(data){
            },
            error: function(xhr, status, error) {
              var err = eval("(" + xhr.responseText + ")");
              alert(err.Message);
            }
        });

And then, in the file procesos/procesar_imagenes.php :

if (ISSET($_POST['encodedFotoMonton'])){
    $isFotoMontonSaved = saveImage($_POST['encodedFotoMonton'], true);
    $isFotoMuestraSaved = saveImage($_POST['encodedFotoMuestra'], false);
}

And then, I have the function saveImage() before this code in the same file:

function saveImage($base64img_encoded, $isMonton){
    $previousDir = '';
    //define('UPLOAD_IMAGES_DIR', $previousDir.'/Imagenes/');
    //define('UPLOAD_IMAGES_DIR', '../Imagenes/');
    $fileExtension = "jpeg";
    $isFileImage = true;
    $base64img = rawurldecode($base64img_encoded);  
    
    //base64_decode // DEPRECATED FOR BASE64 - FORMAT IN HTML-URL DECODER
    
    if (str_contains($base64img, 'data:image/jpeg')) { 
        $fileExtension = "jpeg";
        $base64img = str_replace('data:image/jpeg;base64,', "", $base64img);
        
    } else if (str_contains($base64img, 'data:image/jpg')) {
        $fileExtension = "jpg";
        $base64img = str_replace('data:image/jpg;base64,', "", $base64img);
        
    } else if (str_contains($base64img, 'data:image/png')) {
        $fileExtension = "png";
        $base64img = str_replace('data:image/png;base64,', "", $base64img);
        
    } else if (str_contains($base64img, 'data:image/gif')) {
        $fileExtension = "gif";
        $base64img = str_replace('data:image/gif;base64,', "", $base64img);
        
    } else if (str_contains($base64img, 'data:image/tiff')) {
        $fileExtension = "tiff";
        $base64img = str_replace('data:image/tiff;base64,', "", $base64img);
        
    } else if (str_contains($base64img, 'data:image/webm')) {
        $fileExtension = "webm";
        $base64img = str_replace('data:image/webm;base64,', "", $base64img);
        
    } else {
        $isFileImage = false;
    }
    
    if ($isFileImage){
        $selected_img = 'muestra';
        if ($isMonton) {
            $selected_img = 'monton';
        } 
        
        $file_img = '../Imagenes/temp_' . $selected_img . '.' . $fileExtension;
        if (file_exists($file_img)) {
           unlink($file_img);
        }
        $file_action = file_put_contents($file_img, $base64img);

        if ($file_action){
            return $base64img; // Mandar mensaje de Imagen Procesada
        } else {
            return $base64img; // Mandar mensaje de Imagen no procesada
        }
        
    } else {
        return 'No se han detectado las imágenes. '.$base64img;
    }
    
}

And the results as images:

enter image description here

There's something I am not doing well but I don't know where or why it happens. I always test with different images, for Monton image and Muestra image.

Monton = Mount image Muestra = Preview image

Thanks in advance! If something it's bad explained, please tell me.

0

There are 0 best solutions below