Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    48
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Uploading Canvas Image to Server

    Hi. I want to make a simple browser-based program that allows the user to doodle in a canvas, then upload the image to my server. Googling for tutorials, it seems this should be simple using ajax. However, I can't get it to work.

    I have an HTML file called uploadit.html that calls a javascript called JsCode.js . This is just an example I copied and pasted from the internet. It creates a canvas, draws an image on the canvas, and provides an upload button. When I press the upload button, I get my alert that the file was successfully uploaded. A file called recieve.php is in the same directory on my server to save the image as a png to my server to a folder called uploads.

    But when I check the folder, the image is not there. I've also copied and pasted other examples I've found on the web. They too present alerts telling me that the upload was successful, yet the uploads folder remains empty.

    These cut-and-paste examples, where everyone is praising the author in the comments section should work. I'm wondering if the problem is with my server? PHP is installed. I've done simple echo scripts and email scripts that work fine. Does ajax have to be installed too, or is that just part of Javascript? I'm not sure if I have to modify the permissions of the html, js, and php files or not. I've given them and the uploads folder all 777s.

    Any ideas? Thanks in advance!

    In case you want to see these files, they're here:
    http://orbitsimulator.com/testing/uploadit.html
    http://orbitsimulator.com/testing/JsCode.js
    http://orbitsimulator.com/testing/receive.php

    Here's the php code:
    Code:
    <?php
      if (array_key_exists('imageData',$_REQUEST)) {
       
    $imgData = base64_decode($_REQUEST['imageData']);
    
        // Path where the image is going to be saved
        $filePath = 'http://orbitsimulator.com/testing/uploads/myImage.png';
    
        // Delete previously uploaded image
        if (file_exists($filePath)) { unlink($filePath); }
    
        // Write $imgData into the image file
        $file = fopen($filePath, 'w');
        fwrite($file, $imgData);
        fclose($file);
    
      }
    
    ?>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    your file path needs to be a local file path, not a url path.
    try just "myImage.png" and see if the image appears somewhere on your server...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    48
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    your file path needs to be a local file path, not a url path.
    try just "myImage.png" and see if the image appears somewhere on your server...
    Thanks. I tried it that way first. The code I copied and pasted sent it to /uploads/myImage.png. So I created a folder called uploads. When that didn't work, I changed it to a url path just to see if that would fix the problem. It didn't. I also tried like you suggested, trying to save it in the same directory as the php html and js files. That didn't work either.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by tony873004 View Post
    Thanks. I tried it that way first. The code I copied and pasted sent it to /uploads/myImage.png. So I created a folder called uploads. When that didn't work, I changed it to a url path just to see if that would fix the problem. It didn't. I also tried like you suggested, trying to save it in the same directory as the php html and js files. That didn't work either.
    if you place a dummy file there, does the unlink() call delete it?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    New Coder
    Join Date
    May 2004
    Posts
    48
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for that suggestion. Just tried it. I a dummy image called myImage.png into uploads. Tried to upload through the javascript/ajax. The dummy version is still there.

    I just found yet another online example. Uploaded it, and it works fine. So the problem probably isn't my server like I thought. Haven't looked through the code yet, but at least I have a working example I can dissect in case I can't debug the one I posted here.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    The canvas is built by javascript so it doesn't really exist on the server, as such. You can save the information needed for the javascript to the server, but you can't make the server build the canvas, which only can exist on the client machine.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    tony873004 (01-17-2014)

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by tony873004 View Post
    Thanks. I tried it that way first. The code I copied and pasted sent it to /uploads/myImage.png. So I created a folder called uploads. When that didn't work, I changed it to a url path just to see if that would fix the problem. It didn't. I also tried like you suggested, trying to save it in the same directory as the php html and js files. That didn't work either.
    yeah, if it's not deleting the existing image, you have some php trouble with that code, and i would ask on the php section, not to pawn your problems off... it sounds like you got something else working, so let us know if you still need help with the code posted. cheers!
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    tony873004 (01-17-2014)

  • #8
    New Coder
    Join Date
    May 2004
    Posts
    48
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    yeah, if it's not deleting the existing image, you have some php trouble with that code, and i would ask on the php section, not to pawn your problems off... it sounds like you got something else working, so let us know if you still need help with the code posted. cheers!
    Cheers to you too! I ultimately solved this problem. I just visited every page that Google returned when I asked "how to upload an image to my server", and copied and pasted their code. Here's the code that ultimately worked:
    PHP Code:
    <?php
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
    {
       
    $rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
       
    $removeHeaders=substr($rawImagestrpos($rawImage",")+1);
       
    $decode=base64_decode($removeHeaders);
       
    $fopen fopen'ims/imageView.png''wb' );
       
    fwrite$fopen$decode);
       
    fclose$fopen );
    }
    ?>
    I still don't understand what every line in this code does, and why the previous code didn't work. That's next. I've got another recent thread in Ajax sub-forum, where I'm writing my own code rather than copying and pasting the code of others. It's the absolute most simple Hello World (assuming that's what you type in the text box!) I could think of. No error checking, no nothing except echoing what was sent. I wish I had time to take a night course at a community college and learn this stuff in baby steps like I did BASIC and Pascal back in the 80's. But I don't, so I have to copy code, make it work, and then try to understand it. So a HUGE thank you to you and everyone here who helps me through this!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •