Image upload to Apache2 server - Ionic 3 + PHP

Asked

Viewed 98 times

2

Based on a tutorial (http://masteringionic.com/blog/2018-01-23-using-the-html5-filereader-api-and-php-to-upload-images-from-ionic-framework-apps/) I made an application to upload images on an Apache server, as described in the previous link. In the created preview I put the URI of my machine on the network running Apache2 with the parse-upload.php file (the one that receives the image and plays in another folder) works normally.

When I upload the PHP file to a Hostinger VPS (Debian 8 and Apache2) the image is not loaded to the server, I get the following error in the application’s debug console:

HttpErrorResponse
error:
error: SyntaxError: Unexpected token { in JSON at position 52 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:8080/build/vendor.js:79316:51) at t.invokeTask (http://localhost:8080/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8080/build/vendor.js:5125:33) at t.invokeTask (http://localhost:8080/build/polyfills.js:3:15581) at r.runTask (http://localhost:8080/build/polyfills.js:3:10834) at e.invokeTask [as invoke] (http://localhost:8080/build/polyfills.js:3:16794) at p (http://localhost:8080/build/polyfills.js:2:27648) at XMLHttpRequest.v (http://localhost:8080/build/polyfills.js:2:27893)
text: "{"Erro":"Error! The supplied data was NOT written "}{"Sucesso":"The file was successfully uploaded"}"
__proto__: Object
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://IP_DA_VPS/uploadimg/parse-upload.php"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://IP_DA_VPS/uploadimg/parse-upload.php"
__proto__: HttpResponseBase

The file and parse-upload and folders are OK in VPS: print_vps

The parse-upload code is this:

<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');


   // Retrieve and decode the posted JSON data
   $posted        = file_get_contents("php://input");
   $obj           =  json_decode($posted);


   // Separate out the supplied keys/values
   $fileName      =  strip_tags($obj->name);
   $fileData      =  strip_tags($obj->file);


   // Format the supplied base64 data URI so that we remove the initial base64 identifier
   $uri           =  substr($fileData,strpos($fileData,",")+1);


   // Replace any spaces in the formatted base64 URI string with pluses to avoid corrupted file data
   $encodedData   = str_replace(' ','+',$uri);


   // Decode the formatted base64 URI string
   $decodedData   = base64_decode($encodedData);


   try {

      // Write the base64 URI data to a file in a sub-directory named uploads
      if(!file_put_contents('/images_upload' . $fileName, $decodedData))
      {
         // Uh-oh! Something went wrong - inform the user
         echo json_encode(array('Erro' => 'Error! The supplied data was NOT written '));
      }

      // Everything went well - inform the user :)
      echo json_encode(array('Sucesso' => 'The file was successfully uploaded'));

   }
   catch(Exception $e)
   {
      // Uh-oh! Something went wrong - inform the user
      echo json_encode(array('Falha' => 'Fail!'));
   }


?>

Where is the URI of the folder that is storing the images already switched to

/images_upload

/images_upload/

images_upload/

Nothing solved (and on my machine’s apache server all these paths work normally).

1 answer

1


Modified image storage path and installed PHP 5 in Debian VPS 8.

if(!file_put_contents('/images_upload' . $fileName, $decodedData))

Got that way:

if(!file_put_contents('/images' . $fileName, $decodedData))

And to install PHP5 ->

apt-get install php5-common libapache2-mod-php5 php5-cli

And not least, I gave a CHMOD 777 in the folder that is receiving the images

Browser other questions tagged

You are not signed in. Login or sign up in order to post.