Image upload on mobile

[Frank Vèssia]

Hi guys, I'm working on a code for uploading images via jQuery with fineuploader script.
The code is working good on desktop, but on mobile I got an "unknown" error from jquery but i think the problem is inside the php.
Basically I upload the images in a temp dir, after that I create a page for each image which contains an image field and attach the image. I also use PIM module for adding a watermark.

PHP

<?php

header("content-type: text/plain");
$method = $_SERVER["REQUEST_METHOD"];

if ($method == "POST" && $input->urlSegmentStr=='') {
    $arr = "";
    $uploadpath = $config->paths->root.$config->tmp_upload;
    $u = new WireUpload('qqfile');
    $u->setMaxFiles(5);
    $u->setOverwrite(false);
    $u->setMaxFileSize(2048*2048);
    $u->setDestinationPath($uploadpath);
    $u->setValidExtensions(array('jpg', 'jpeg'));
    $minWidth  = 300;
    $minHeight = 300;
    $maxWidth  = 4500;
    $maxHeight = 4500;
    // execute upload and check for errors
    $files = $u->execute();
    $error = "";
    $userpage = $pages->get("template=member,userlink=$user");
    $wmi      = $config->paths->root.$config->site_cdn."wm.png";
    $options = array('outputFormat'=>'jpg','quality'=>70);
    $pim = $modules->get('PageImageManipulator');
    foreach($files as $file){
        $tempImg = $uploadpath . $file;
        $newFile = $uploadpath . $_POST['qquuid'].'.jpg';
        @rename($tempImg, $newFile); // I rename the file because ios uploads file using the same name "image.jpg" 
        if (file_exists($newFile)){
            list($width, $height) = getimagesize($newFile);
            if(!$newFile){
                $error .= "Immagine non valida";
            }
            if ($width < $minWidth){
                $error .= "Immagine troppo piccola";
            }
            if ($height < $minHeight){
                $error .= "Immagine troppo piccola";
            }
            if ($width > $maxWidth){
                $error .= "Immagine troppo grande";
            }
            if ($height > $maxHeight){
                $error .= "Immagine troppo grande";
            }
            if(!$u->getErrors() && $error==''){
                $p = new Page();
                $p->template = $templates->get("pic");
                $p->parent   = $userpage;
                $p->name     = time();
                $p->status   = Page::statusUnpublished;
                $p->save();
                $p->image     = $pim->imLoad($newFile, $options)->watermarkLogo($wmi, 'southeast', 4)->pimSave();
                if($p->save()){
                    $arr = array('success' => true);
                }   
            }else{
                $arr = array('error' => implode(",",$u->getErrors()));
            }
            unlink($newFile);
         }else{
            unlink($tempImg);
         }
    }
    echo json_encode($arr, JSON_FORCE_OBJECT);
} ?>  

jQuery

var photoUpload = $("#photouploader");

        if (photoUpload.length > 0){
            var maxLimit = $(photoUpload).data('maxuploads');
            var runningp = 0;
            $("#photouploader").fineUploader({
                debug: true,
                maxConnections: 20,
                request: {
                    endpoint: $(photoUpload).data('endpoint')
                },
                retry: {
                    enableAuto: true,
                    maxAutoAttempts: 1
                },
                validation: {
                    allowedExtensions: ["jpg", "jpeg"],
                    acceptFiles: ["image/jpeg"],
                    sizeLimit: 4194304,
                    itemLimit: maxLimit,
                    stopOnFirstInvalidFile:true,
                    image: {
                        maxHeight: 4500,
                        maxWidth: 4500,
                        minHeight: 300,
                        minWidth: 300
                    }
                },
                messages:{
                    sizeError: '{file} è troppo grande. Massimo {sizeLimit}',
                    tooManyItemsError: 'Hai cercato di caricare ({netItems}) immagini. Puoi caricarne massimo {itemLimit}',
                    typeError: 'Estensione non valida, solo {extensions}',
                    noFilesError: 'Nessun file selezionatov',
                    maxWidthImageError: 'Il file è tropo grande in larghezza',
                    maxHeightImageError: 'Il file è troppo grande in altezza'
                },
                text: {
                    defaultResponseError: 'Errore sconosciuto'
                }
            }).on('submit', function () {
               runningp++;
            }).on('complete', function (event, id, fileName, responseJSON) {
               runningp--;
               if(runningp==0 && responseJSON.success){
                   $(location).attr('href',$("#photouploader").data('dest'));
               }
            }).on('error', function (event, id, name, errorReason) {
                alert(qq.format("Errore nel file '{}'  Motivo: {}", name, errorReason));
                $('#photouploader').fineUploader('reset');
            });
        }

I think the error is in the php because I can see the file is being uploaded in the temp dir, after that I got the error from js, so could be something after the moving file...but I don't know for sure, and the js gives me only "unknown error" impossible to debug on mobile

[Frank Vèssia]

I figured out the problem, it's the pim module...If I comment the part where add the watermark it works also on mobile, the question is why??

[horst]

I'm not sure I understand correct. You say it does work if the client is a desktop browser, but it does NOT work if the client is a mobile? This is with the exact same code?

If the above are all yes, it would be interesting to know how the the mobile clients interacting differs from that of the desktop client. Could you try it with different mobiles? (iOS and Android)

Is this upload page accessible or can you make it accessible for me? If so, you can PM me.

[Frank Vèssia]

horst, yes it's how you described, strangely...
I tried with android latest version and it doesn't work, from ipad2 it works...

I PMd you

[Frank Vèssia]

with the horst's help I found out the problem is related to the watermark jpg file, when pim tries to access to the jpg, this cause the javascript to generate the error, I'm still investigating more but at this point pim is not the direct cause, just to be clear